Share
No se crean dos marcas de sitios web iguales. Como tal, puede ser difícil para las plataformas de redes sociales como Facebook encontrar la información correcta dentro del contenido que se mostrará cuando la página se comparta en el Feed de Noticias..
Aquí es donde entra en juego el Open Graph Protocol (OGP); una iniciativa desarrollada por Facebook que le permite reconocer contenido web fácilmente y mostrarlo bien dentro de su plataforma.
Examina lo siguiente:
Página renderizada en el feed de Facebook, sin etiquetas meta de Open GraphEsto nos da una vista previa de contenido decente en la fuente de Facebook, con el título y el extracto. Sin embargo, si miramos el contenido de nuestra página de demostración, hay algunos elementos más que podrían utilizarse; como la imagen y el nombre del autor. Facebook no recogerá estos detalles sin ayuda..
Así que echemos un vistazo a cómo podemos usar Open Graph para mejorar nuestra presentación de contenido en Facebook.
Open Graph especifica una cantidad de metaetiquetas que definen la metainformación del contenido, similar a las metaetiquetas que alimentamos a los motores de búsqueda en las prácticas comunes de SEO. Antes de agregar estas etiquetas meta, tendremos que configurar el espacio de nombres XML para Open Graph en la html.
La concepción del espacio de nombres en HTML es similar a otros lenguajes web; Evita la ambigüedad en la estructura de datos. Se refiere a qué vocabulario semántico o sintaxis se debe usar cuando el espacio de nombres está presente en el documento. En nuestro caso, el og espacio de nombres se refiere al Open Graph Protocol, mientras que pensión completa espacio de nombres se refiere a la especificación Open Graph propia de Facebook.
Alternativamente, podemos usar el prefijo atributo para definir estos espacios de nombres. Por ejemplo:
Facebook requiere que algunas etiquetas estén presentes en todo momento..
Primero, el tipo de contenido, especificado por el og: tipo propiedad. En la página de inicio, normalmente establecemos el valor en sitio web.
Y comúnmente lo ponemos a artículo por el contenido.
Un número de otros valores posibles también se pueden establecer en og: tipo etiqueta meta que incluye producto, lugar, video.movie, books.book, y mucho más en caso de que su contenido no sea un artículo típico como una publicación de blog o noticias.
Por ejemplo:
La URL de contenido, especificada con el og: url propiedad, debe contener una URL absoluta de la página web sin cadenas de consulta ni hashes, similar a la canónico enlazar. En la página de inicio, la URL es la URL de la página de inicio:
La URL del contenido será un poco más detallada:
El título meta, especificado con el og: titulo Propiedad, define el título para la vista previa. El valor del título puede no coincidir siempre con el conjunto de títulos en el título etiqueta; Usted puede elegir alterar, o abreviar el título para compartir.
Por ejemplo, el contenido de nuestra página es sobre CSS y tiene derecho a los fines de las redes sociales "Learn CSS: The Complete Guide". Sin embargo, el título del documento es en realidad "Open Graph Protocol - Tuts +", por lo tanto:
No hay un límite de caracteres definido para el og: titulo, pero se sabe que Facebook trunca los títulos en ocasiones, especialmente por el contenido compartido en el hilo de comentarios donde el espacio es limitado.
Facebook trunca el título y la descripción del contenido compartido en Facebook Wall La meta descripción, especificada con el og: descripción etiqueta, proporciona el extracto de contenido compartido.
Facebook no establece un carácter definido o un límite de palabra a la descripción. Aún así, Facebook truncará la descripción cuando lo considere oportuno, así que mantén la descripción breve y atractiva.
La meta imagen se define con og: imagen, Le permite representar visualmente el contenido, y el valor no siempre tiene que ser una imagen dentro del contenido. Use la mejor imagen para atraer a los lectores a hacer clic y finalmente leer el contenido.
Además de la URL, también puede agregar etiquetas meta que especifican el tamaño de la imagen y el tipo MIME de la imagen. Estas etiquetas meta son opcionales, pero ayudarán a aliviar la carga de trabajo de Facebook cuando se trata de analizar y almacenar en caché la imagen.
El tamaño mínimo de la imagen está limitado a 200x200 píxeles, pero Facebook recomienda que el tamaño de la imagen sea de 1200x630 píxeles para obtener el mejor resultado posible..
Imágenes pequeñas vs grandes en contenido compartido de Facebook..Es posible que desee considerar la relación de aspecto de su imagen también:
"Intente mantener sus imágenes lo más cerca posible de 1.91: 1 para mostrar la imagen completa en News Feed sin ningún recorte". - Desarrolladores de Facebook
Dentro de Facebook, agregando el ID de la aplicación de Facebook con fb: app_id etiqueta meta es muy recomendable. La ID de la aplicación permitirá a Facebook vincular su sitio web y generar una visión general completa de cómo los usuarios interactúan con su sitio web y contenido.
Puede ignorarlo, si no es necesario tener un análisis de su sitio web.
Algunas etiquetas meta son opcionales, pero serán útiles en ciertos casos.
El nombre del sitio se especifica con la og: nombre de sitio etiqueta meta Define el nombre del sitio web, o más exactamente su marca de sitio web. Es posible que la marca o el nombre del sitio web no siempre sea su nombre de dominio. Tuts +, en este caso, es un buen ejemplo..
De acuerdo con nuestras directrices de marca, esto debería escribirse como Tuts + en lugar de Tutsplus, aún tutsplus.com es el nombre de dominio ya que un dominio no puede contener el + personaje, por lo tanto:
Facebook no muestra el nombre de este sitio en el contenido compartido. En su lugar, encontrará que se muestra en la notificación cuando haya instalado un complemento social de Facebook como Facebook Comment en su sitio web..
Hay una serie de metaetiquetas relacionadas con el tipo de contenido especificado. Como está implícito, estas etiquetas difieren según el valor especificado en og: tipo etiqueta meta Aquí tenemos un artículo. Un artículo pueden acompañarse con algunas etiquetas meta de apoyo tales como artículo: autor, Artículo: Published_time, artículo: editor, artículo: sección, y artículo: etiqueta.
Antes de incluir estas etiquetas meta, tendremos que agregar un nuevo espacio de nombres que apunte a la especificación del artículo de Open Graph. Entonces, en este punto, tenemos tres espacios de nombres a saber og, pensión completa, y artículo.
Según Facebook, el artículo: autor la etiqueta meta debe contener una URL de perfil de Facebook o el ID del autor del artículo.
Se permite agregar más de una URL o ID en caso de que varios autores hayan contribuido al artículo.
Propina: si el autor no tiene una cuenta de Facebook, puede reemplazar artículo: autor con lo siguiente autor etiqueta meta.
Facebook mostrará el nombre del autor en la vista previa, como sigue.
Aunque Facebook sugiere que incluyamos etiquetas de artículos como artículo: fecha de publicación y artículo: sección no añaden ningún significado en el momento de la escritura. Es decir, a menos que estés tratando con una página de artículo instantánea.
Como se mencionó, estas etiquetas dependen en gran medida de su tipo de contenido. Si el tipo de contenido es video.movie, etiquetas más apropiadas serían video: actor, video: director, y video: duración en vez de articulos: fecha de publicación.
Por esa razón, dejaré esa parte de Open Graph para que la explore. Facebook ha proporcionado material de referencia completo sobre estas metaetiquetas junto con algunos ejemplos de fragmentos de código..
Desde entonces, Open Graph ha sido adoptado por otras plataformas de medios sociales como Twitter (aunque Twitter también tiene su propia marca registrada llamada Twitter Cards), Pinterest, LinkedIn y Google+ de una forma u otra. En este tutorial examinamos algunas metaetiquetas de Open Graph y las aprovechamos para hacer que nuestra vista previa del contenido sea más convincente.
Finalmente, si encuentra que su contenido no se procesa como se espera, use el Depurador de uso compartido de Facebook para averiguar qué está mal con el marcado.
Accentsconagua