2010-11-14 12 views
9

Estoy a punto de presentar el protocolo Open Graph a una aplicación web HTML5 existente y me gustaría incluir los datos necesarios de RDFa sin introducir ningún problema innecesario.Compatibilidad con HTML5 y RDFa

He mirado en el proyecto de HTML+RDFa 1.1 y comparándolo con Facebook's Open Graph protocol documentation, sólo necesito para establecer el atributo lang en el elemento html y es HTML5 listo:

<html lang="en"> 
<head xmlns:og="http://opengraphprotocol.org/schema/"> 
    <title>The Rock (1996)</title> 
    <meta property="og:title" content="The Rock"/> 
    <meta property="og:type" content="movie"/> 
    ... 

Inicialmente, crecí confundido sobre el apoyo RDFa en HTML5 con tantas fuentes que afirman que no se puede hacer de manera válida, hasta que finalmente llegué al borrador. No soy un experto en los asuntos en cuestión, por lo que agradecería que alguien pudiera echarle un vistazo y comentar sobre el apoyo que el borrador disfruta en los buscadores de hoy en día.

+0

RDFa es una especificación separada de HTML5 en total, por lo que no existirá soporte en HTML5. No quiere decir que no pueda hacer que funcione, ya que es XML y HTML5 puede manejar XML enviado como RDF. – Rob

+0

Ahí es donde la Web me confunde a todos. Extraeré los subtítulos del borrador de HTML + RDFa 1.1: "Soporte para RDFa en HTML4 y HTML5". ¡Por favor, mire esto! –

+0

@Rob: ¿no es la especificación de HTML + RDFa que kRON se vinculó a una especificación separada de HTML5 y RDFa? ¿Describiendo cómo usar RDFa en HTML5? Según mi lectura de la especificación HTML + RDFa, mi objetivo es definir cómo se usa RDFa en HTML incluso cuando no se está sirviendo el HTML como XML, aunque no están seguros de si eso funcionará, ya que depende de lo que el HTML5 la especificación decide sobre los atributos de espacio de nombres. –

Respuesta

16

El validador del W3C se queja de todos los

<meta property="whatever" content... 

exigiendo que la propiedad será

<meta name="whatever ... 

lugar, ¿verdad? Si Facebook es, lo que en su mayoría se preocupa, estoy feliz de poder decir, tolera esta última forma, por lo que ir a por todas:

<meta name="og:title" content="My nice picture"/> 
<meta name="og:type" content="article"/> 
<meta name="og:url" content="http://foobar123.com/test/simple.php"/> 

Al probar con FB: Cuidado con, que FB almacena en caché parsings página (globalmente, Facebook, la recarga dura no ayudará) así que asegúrese de agregar un path-info 'único' (pero inútil) o un parámetro GET a la url cada vez que cambie algo para probar su publicación en Facebook:

mysite.com/test.php/bogusParam1 
mysite.com/test.php/bogusParam2 
mysite.com/test.php/bogusParam3 
... 
mysite.com/test.php?foo=hello 
mysite.com/test.php?foo=howdy 
mysite.com/test.php?foo=aloha 
+1

¡Muy bueno! No vi en ningún lado que FB aceptara 'nombre'. –

+2

Me encanta este. Parece que hay muy pocos mensajes que apuntan a este truco. –

+0

La versión actual del validador W3C se queja de que el valor del atributo de nombre no es válido. Entonces esta solución parece molestar tanto a W3C como a FB. Supongo que uno debería usar 'property' después de todo. – Qtax

6

Tanto HTML5 como HTML + RDFa 1.1 están todavía en desarrollo, implica que todo lo que digamos ahora puede estar sujeto a cambios. Hay dos lados de sus preguntas:

  • ¿Es válido?
  • ¿Creará problemas de interoperabilidad?

Para la validez, puede verificar a un ritmo regular el estado de implementación de las especificaciones en el W3C validator. Tiene un validador HTML5 experimental integrado.

Los espacios de nombre en HTML5 todavía están en debate. Crean problemas que conducen a un DOM diferente de lo que realmente se pretende, lo que lleva a mi segunda pregunta: problemas de interoperabilidad. Puede probar cómo se maneja el marcado con Live Dom Viewer o usar algo como Opera Dragonfly para explorar la representación DOM del documento en el navegador.

Si desea explorar el tema de HTML5 DOM y RDFa un poco más, es posible que desee leer el blog post de Jenni.

Su marcado hasta el momento no es realmente un problema, pero si implica javascript, tendrá que tener cuidado con los espacios de nombres y los valores con columnas.

1

Ésta es la manera corecta a doIT en HTML5:

<meta property="http://ogp.me/ns#locale" content="en_US" /> 
<meta property="http://ogp.me/ns#site_name" content="xxxxxx" /> 
<meta property="http://ogp.me/ns#type" content="website" /> 
<meta property="http://ogp.me/ns#title" content="xxxxxxxxxxxx" /> 
<meta property="http://ogp.me/ns#description" content="xxxxxxxxxxxxxxxx" /> 
<meta property="http://ogp.me/ns/fb#app_id" content="xxxxxxxxxxxxxxxx" /> 

etc ... creo que sirve

+2

¿Podría proporcionar una fuente para eso? – joar

+0

@joar Proof está aquí en la última [RDFa 1.1 Primer] (http://www.w3.org/TR/rdfa-primer/#using-the-content-attribute). Consulte también el último [Validator for HTML5] (http://validator.w3.org/nu/) y asegúrese de seleccionar el preajuste para RDFa 1.1. – snahl

1

Hoy en día, el validador HTML 5 y Facebook tanto apoyo HTML + RDFa 1.1, por lo que solo puede usar propiedad en lugar de nombre ahora. Tampoco tiene que meterse con las declaraciones xmlns en html5. El prefijo og se define en la especificación (RDFa), por lo que no es necesario definirlo. Sin embargo, podría decir explícitamente prefix="og: http://ogp.me/ns#" en el html o en la etiqueta principal.

Cuestiones relacionadas