Cómo agregar la metaetiqueta OpenGraph de Facebook a Blogger

Facebook es lo suficientemente inteligente como para extraer automáticamente datos de enlaces de sitios web que las personas comparten en su plataforma. Sin embargo, es posible que no reciba el título, la miniatura o la descripción correctos del sitio web.

Para resolver este problema, Facebook introdujo la etiqueta OpenGraph para creadores de contenido web. Las etiquetas meta de Open Graph le permiten controlar el contenido que se muestra en Facebook cuando los usuarios comparten un enlace a su sitio.

Agregue la metaetiqueta OpenGraph de Facebook a Blogger

Puedes ayudar a Facebook a obtener la información correcta en tu sitio web (título, descripción, miniaturas, etc.). Las etiquetas Open Graph son similares a las etiquetas de mapa de resumen de Twitter y a los fragmentos de motor de búsqueda enriquecidos.

Tipos de etiquetas Open Graph de Facebook

Las etiquetas predeterminadas de Facebook Open Graph para incluir en su sitio web de Blogger son:

Abrir etiqueta de gráfico explicación
og:title Título de la página web o del artículo.
og:url La URL canónica de la página web.
og:description Una breve descripción de la página web o el artículo (la longitud óptima de los caracteres es de 150 a 160 palabras).
og:image La URL de la imagen en miniatura que se muestra cuando el contenido se publica en Facebook.
og:type Tipos de páginas web como sitios web y blogs.
og:site_name El nombre completo del sitio.

Agregue la metaetiqueta OpenGraph de Facebook a Blogger

Blogger ya agregó tres etiquetas meta de Facebook Open Graph (og:título, og:imagen, og:descripción) a la sección de título del blog. Asegúrate de que tu plantilla contenga el siguiente código: b:include data=’blog’ name=’all-head-content’/

Luego, debe agregar el resto de las etiquetas de Facebook Open Graph a su blog de Blogger. Siga esta guía.

Capítulo 1: Agregar espacio de nombres xml de gráfico abierto a la plantilla de Blogger:

  1. Inicie sesión en el panel de control de Blogger y vaya a la sección Editar plantilla HTML.
  2. Luego busque la siguiente etiqueta HTML en el editor de plantillas.
     html......xmlns_expr='http://www.google.com/2005/gml/expr'
  3. Agregue las siguientes propiedades junto al código resaltado. xmlns_og=’http://ogp.me/ns# Ahora la etiqueta html es:
     html xmlns_og = 'http://ogp.me/ns#'...... xmlns_expr = 'http://www.google.com/2005/gml/expr'

Si el espacio de nombres xml del gráfico abierto ya existe en su plantilla de Blogger, puede omitir esta parte.

Parte 2: Agregue metaetiquetas Open Graph a las plantillas de Blogger

  1. Haga clic en cualquier parte del editor de plantillas y presione CTRL+F para abrir la barra de búsqueda.
  2. Luego ingrese una etiqueta de título y presione el botón Enter para buscar.
  3. Agregue el siguiente código justo debajo de la etiqueta principal [ Guardar plantilla «botón. Eso es todo.
    ! -FacebookOpenGraph metaetiqueta de vap13.com ---b:if cond='data:blog.pageType==quot;indexquot;' meta content='blog' property='og:type'/b:else/meta content='article 'property='og:type' // b:ifmeta content='your-blog-name' property='og: site_name'/b:if cond='data:blog.pageType! =quot;itemquot;'b:if cond='data:blog.pageType! =quot;static_pagequot;'meta content=' your-blog-cover-pic'property='og:image' //b:if/b:if

Nota: Debe reemplazar el texto resaltado en el código anterior.

  • Reemplaza el nombre de tu blog con el nombre de tu sitio web o blog.
  • Reemplaza la imagen de portada de tu blog con la URL de portada de tu blog. Los blogs de Blogger aparecen en la página de inicio y en los archivos.

Cómo comprobar las etiquetas Open Graph de Facebook

Si desea verificar que todas las etiquetas de gráficos abiertos de Facebook en su blog de Blogger funcionan correctamente, puede usar: Depurador de recursos compartidos de Facebook herramienta.

Esta herramienta le permite obtener una vista previa de cómo se verá su contenido cuando se publique en Facebook y depurar problemas de etiquetas de OpenGraph. Introduzca una URL válida para su sitio web de Blogger, depuración » botón.

Vista previa del depurador de acciones de Facebook

Esperamos que esta guía le haya ayudado a agregar la etiqueta Open Graph de Facebook a su blog de Blogger. Si tiene algún problema, no dude en compartirlo en la sección de comentarios.