Comprensión y cómo instalar etiquetas Open Graph en un sitio web de WordPress
Comprensión y cómo instalar etiquetas Open Graph en un sitio web. Open Graph es un método de etiquetas especiales que utiliza código HTML y funciones para reconocer la página de un sitio web. Estas etiquetas serán reconocidas automáticamente por los navegadores y motores de búsqueda como la descripción principal de una página web.
Los verdaderos especialistas en marketing y blogueros siempre crean contenido interesante y de alta calidad. El objetivo es que el contenido sea leído por mucha gente. Pero ¿cómo consigues que el contenido llegue a mucha gente? ¡Simplemente comparte el contenido en las redes sociales! Sí, eso es seguro. Porque, de hecho, Facebook, Twitter y otras redes sociales son las mejores plataformas para compartir tu contenido. Pero una vez más, ¿sabes cómo optimizar el potencial de participación para que el alcance de tu audiencia sea mayor? Si no, intentemos conocer una herramienta llamada Open Graph.
¿Por qué se creó Open Graph?
Facebook introdujo Open Graph Tags en 2010. En realidad, esta herramienta es solo un egoísmo de Facebook para aumentar la integración entre Facebook y otros sitios externos. Con esta herramienta, es posible que todas las URL de sitios que se comparten a través de páginas de Facebook tengan automáticamente gráficos, imágenes y títulos apropiados y prolijos.
Esta característica fue creada para superar los problemas experimentados por los blogueros en el pasado, es decir, cuando compartían su contenido en Facebook, algo salió mal. Estas irregularidades incluyen que la imagen no coincida con el título, que la descripción mostrada en Facebook no coincida o incluso que la vista previa de su sitio web no aparezca en Facebook en absoluto.
Desde entonces, Facebook ha emitido un estándar para la integración de sitios web y Facebook con etiquetas Open Graph.
En pocas palabras, su sitio web recibirá un código especial, donde Facebook, Whatsapp, Twitter y similares reconocerán inmediatamente este código para usarlo como referencia de contenido. En el código, se incluyen la imagen en miniatura, el título del contenido, la descripción del contenido, etc.
Este código especial de Open Graph generalmente se coloca en su sitio web justo debajo de la etiqueta HTML o PHP.
Sin embargo, resulta que ahora, los sitios de redes sociales distintos de Facebook también están comenzando a usar etiquetas Open Graph para recuperar información del sitio web. ¡Incluso GOOGLE ahora también usa Open Graph para recuperar datos! Todas las demás plataformas importantes, Twitter, LinkedIn y Google, han hecho de Open Graph Tags la principal opción para reconocer un sitio web.
Twitter en realidad tiene sus propias metaetiquetas para Twitter. Sin embargo, cuando el robot de Twitter no puede encontrar la etiqueta de Twitter en su sitio web, utilizará automáticamente la etiqueta Open Graph.
¿Cómo utilizar Open Graph en un sitio web?
Cómo instalar etiquetas Open Graph en un sitio web de WordPress : Buenas noticias para los usuarios de WordPress, porque ya no es necesario agregar un código especial de etiquetas Open Graph a cada contenido. ¡Simplemente usando un complemento gratuito llamado YOAST SEO, obtendrá funciones completas y control sobre OPEN GRAPH en cada página y contenido! ¡Descarga Yoast SEO para WordPress ahora!
Mientras tanto, para otros CMS como Blogger, Joomla, etc. Estoy seguro de que hay quienes proporcionan complementos similares a Yoast SEO. Entonces, para aquellos de ustedes que les da pereza agregar código especial Open Graph manualmente, ¡use su navegador para navegar y encontrar el complemento!
O si desea agregarlo manualmente, busque Archivo encabezado.html (bloguero) o encabezado.php (wordpress) y pega el siguiente código:
Blogger HTML:
<!-- Open Graph Meta Tags BEGIN --> <meta expr:content="data:blog.pageName" property='og:title'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content="data:blog.postImageThumbnailUrl" property='og:image'/> </b:if> <meta expr:content="data:blog.title" property='og:title'/> <meta expr:content="data:blog.canonicalUrl" property='og:url'/> <b:if cond='data:blog.metaDescription'> <meta expr:content="data:blog.metaDescription" property='og:description'/> </b:if> <!-- Open Graph Meta Tags END -->
WordPress PHP:
<meta property="og:locale" content="id_ID" /> <meta property="og:type" content="" /> <meta property="og:title" content="" /> <meta property="og:description" content="" /> <meta property="og:url" content="" /> <meta property="og:site_name" content="" /> <meta property="og:image" content="" /> <meta property="og:image:width" content="" /> <meta property="og:image:height" content="" />
¡Todas las funciones de Open Graph más completas!
Código 1: título
Máximo 65 caracteres
<title>your keyword rich title of the website and/or webpage</title>
Código 2: descripción
Máximo sólo 155 caracteres
<meta name="description" content="description of your website/webpage, make sure you use keywords!">
Código 3: og:título
Máximo 35 caracteres
<meta property="og:title" content="short title of your website/webpage" />
Código 4: og:url
Complete esta sección con la URL de la página o el contenido al que desea personalizar el enlace
<meta property="og:url" content="https://www.example.com/webpage/" />
Código 5: og:descripción
Máximo 65 caracteres
<meta property="og:description" content="description of your website/webpage">
Código 6: og:imagen
El tamaño de la imagen (JPG o PNG) debe ser Menos de 300 KB y dimensiones mínimas 300 x 200 píxeles
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
Código 7: og:tipo
Adáptate al tipo de contenido que se comparte, si es “escrito” simplemente completa el artículo. También puede ser vídeo, audio, sitio web, blog, libro, juego, película, comida, ciudad, país, empresa, hotel, restaurante.
<meta property="og:type" content="article" />
Código 8: og:locale
Esto solo se completa si su sitio web tiene varios idiomas.
Pero incluso si no lo escribes, el idioma escrito automáticamente será En US
<meta property="og:locale" content="en_GB" /> <meta property="og:locale:alternate" content="fr_FR" /> <meta property="og:locale:alternate" content="es_ES" />
Código 9: Twitter
Para obtener información sobre el código de la metaetiqueta de Twitter, simplemente siga la explicación de Twitter.
Cómo comprobar las etiquetas de Open Graph en un sitio web
Para comprobar si las etiquetas Open Graph de nuestra web son correctas o no, Facebook ha creado una sencilla herramienta en Abrir depurador de objetos de gráfico. ¡Todo lo que necesita hacer es copiar y pegar la URL de la página o del sitio web y luego presionar Scrape! También puedes raspar de nuevo para ver si hay algún cambio.
#SEO
