facebook - checker - Open Graph validation para HTML5
open graph facebook html (12)
Aunque cortará a los usuarios que no usan Javascript, he usado esto
<script type="text/javascript">
//<![CDATA[
document.write(''<fb:like href="" send="false" layout="button_count" width="100" show_faces="true" font=""></fb:like>'')
//]]>
</script>
y validado perfectamente. Se muestra y funciona bien con Firefox, Opera, IE, Chrome, Safari en Windows y con Firefox, Opera y Safari en Mac.
¿Hay alguna forma de obtener las meta tags Open Graph de facebook para validar si mi doctype es <!DOCTYPE html> (HTML5)?
Aparte de las metaetiquetas Open Graph de Facebook, mi documento se valida perfectamente.
Realmente no quiero usar <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> ya que eso crea un nuevo conjunto de problemas.
Aquí hay un ejemplo de uno de los errores de validación en cuestión ...
Error Line 11, Columna 47: propiedad de atributo no permitida en el elemento meta en este punto.
<meta property="og:type" content="website" />
Cualquier ayuda sería apreciada ... he estado buscando de vez en cuando durante días en vano.
Bueno, Visual Studio 2011 me dice que el atributo "propiedad" no es válido. Sin embargo, el W3C parece ser un poco más indulgente:
http://validator.w3.org/check?uri=http%3A%2F%2Fpacificfoods.com%2F
Notarás que agregué etiquetas Open Graph por recomendación de Facebook a ese sitio, y no rompe el validador W3C, que considero autoritario.
Consultando la especificación W3C HTML5 oficial para la etiqueta meta , está claro que el uso del atributo "propiedad" (en lugar de los atributos "nombre", "http-equiv", "charset" o "itemprop") no es válido. Sin embargo, su validador lo valida (???). No tengo explicación para esta discrepancia.
En JSP:
<%
String ua=request.getHeader("user-agent").toLowerCase();
if(ua.matches(".*facebookexternalhit.*")){
}
%>
<meta property="og:image" content="images/facebook.jpg" />
...
<%
}
%>
O:
<c:set var="ua" value="${header[''User-Agent'']}" scope="page"/>
<c:if test="${ua.matches(''.*facebookexternalhit.*'')}">
<meta property="og:image" content="images/facebook.jpg" />
...
</c:if>
Estas metaetiquetas solo son necesarias cuando facebook escanea la página para estas etiquetas.
<?
if(eregi("facebookexternalhit", $_SERVER[''HTTP_USER_AGENT''])){
echo ''<meta property="og:type" content=xxxxxxxxxxxxx'';
// continue with the other open graph tags
}
?>
Dichas etiquetas solo estarán presentes cuando Facebook las necesite; este método con PHP las elimina por completo para todas las demás instancias, incluida la validación W3C.
Ha pasado más de un año y la mejor solución que tenemos es ajustar las metaetiquetas en algún tipo de verificación del lado del servidor.
En PHP, hice:
<?php if (stristr($_SERVER["HTTP_USER_AGENT"],''facebook'') !== false) { ?>
<meta property="og:title" content="Title of the page" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:type" content="website" />
<meta property="fb:admins" content="123456789" />
<meta property="og:image" content="http://www.example.com/images/thumb.jpg" />
<?php } ?>
Realmente funciona para Facebook. ¡Pero realmente no me gusta esta idea!
La respuesta corta es no, no en este momento. Todas las otras respuestas son soluciones, piratas informáticos, o simplemente loco. La única solución a largo plazo es que Facebook necesita crear una sintaxis alternativa que sea válida para HTML5.
Para aquellos que recomiendan la selección de Facebook por parte del agente de usuario "facebookexternalhit", debe recordar que otras compañías están siguiendo el ejemplo de Facebook con estas etiquetas. Por ejemplo, Google+ recurrirá a las etiquetas OpenGraph si su marcado preferido de Schema.org no está presente. Dado que la mayoría de los sitios no utilizan los atributos de Schema.org (especialmente si están usando el tiempo para usar OpenGraph correctamente), puede perder la oportunidad de mejorar sus fragmentos en sitios como Google+ siguiendo este consejo.
Con la ubicuidad de Facebook, realmente no es una buena solución para dirigirse directamente a ellos, incluso si su elección de implementación es problemática para los desarrolladores. Cuando busca soluciones en un sitio como , siempre debe recordar que puede haber consecuencias imprevistas para estos métodos.
Para nuestros sitios principales, nos hemos quedado con XHTML + RDFa por validación, y ha funcionado bastante bien. Espero que a medida que el uso de HTML5 crezca, el equipo de Facebook comenzará a aceptar un formato válido para estos metadatos.
En cuanto a por qué nos importa la validación: descubrimos que la validación, cuando es posible, ayuda a alertarnos sobre errores en nuestras páginas al no enseñarnos a ignorarlas. Dado que todos utilizamos extensiones de validación en nuestros navegadores, sabemos instantáneamente si hay un error de validación (o advertencia) en una página, y podemos investigar si es posible eliminarlo (que es el 99 +% del tiempo). Esto nos ahorra tiempo para lidiar con implementaciones restrictivas de las especificaciones, especialmente en plataformas marginales y móviles en la actualidad. Hemos visto una gran reducción en bugs impares porque sabemos que nuestras páginas son válidas y sabemos que lo que está sucediendo en el navegador no tiene que ver con el marcado no válido que un UA en particular podría no interpretar como se esperaba.
Mala solución para las etiquetas meta. Si envuelve esos en Javascript, el Facebook Linter no los encontrará. Eso es lo mismo que no ponerlos en absoluto.
Envolver como botones y tal en script funciona para ayudar a validar contra XHTML 1.0 pero no HTML5.
Me inclino a decir que no se preocupe por la validación, no creo que tener marcas no válidas perjudique su clasificación en los buscadores. por ejemplo, las recomendaciones técnicas de Google no mencionan los estándares. http://www.google.com/support/webmasters/bin/answer.py?answer=35769#2 . Html5 le permite proporcionar más información a los motores de búsqueda que luego pueden usar, pero no puedo verlos en el ranking basado en no validar.
Sin embargo, si cree que le ayuda a validar, puede usar
<script>document.write(''<meta property="og:type" content="website" />'')</script>
tener estas etiquetas presentes y tener un archivo html que pase los validadores.
Muchas de las respuestas aquí se han vuelto obsoletas. No indague en los encabezados ni escriba a través de JavaScript (ya que es posible que los procesadores no evalúen el JS).
Las Recomendaciones del W3C (Extensiones a HTML5) se llamaron RDFa 1.1 y RDFa Lite 1.1 (ver http://www.w3.org/TR/rdfa-lite/ y w3.org/TR/rdfa-primer ) han hecho que el atributo "propiedad" sea válido y conforme. Mientras tanto (dado que las respuestas anteriores aquí), el validador http://validator.w3.org/check reconoce el atributo como válido. Además, la documentación del protocolo Open Graph, http://ogp.me/ , se ha actualizado para reflejar RDFa 1.1 (utiliza el atributo "prefijo").
El trabajo del W3C se ha realizado con la participación de OpenGraph y schema.org, entre otros, para resolver el tipo de problema planteado por esta pregunta.
En resumen, asegúrese de que sus etiquetas OG se ajusten a RDFa y esté dorado.
Para HTML5, agréguele esto a su elemento html como se describe en ogp.me y conserve sus propiedades con prefijo og: :
<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:type" content="website" />
...
Para XHTML (como la pregunta de OP), use el atributo de name lugar del atributo de property . Facebook pelusa arrojará una advertencia, pero el valor meta aún será reconocido y analizado.
<meta name="og:title" content="Hello Facebook" />
Una solución reciente es registrar un prefijo en la etiqueta html o head:
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
o
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
tomado de here - lo siento, la página está en alemán ...
Sí . Para validar como HTML5, agregue el atributo de prefix de los documentos de Open Graph :
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Valid HTML5!</title>
<meta charset="utf-8"/>
<meta property="og:title" content="">
</head>
<body></body>
</html>
Copie y pegue lo anterior en el validador w3 para verificar.
Está listo para la producción: Apple usa este método en apple.com .