Print Friendly and PDF

Metaetiquetas para Blogger SEO

Metaetiquetas para Blogger - Meta tag Twitter y FacebookCómo poner las Metaetiquetas para Facebook y Twitter en Blogger

Agrega la metaetiqueta de Twitter para que al compartir la URL de una entrada se cargue con la imagen, y las metaetiquetas og para la imagen de la página principal.

La metaetiqueta Description es la que verán las personas en los resultados de búsqueda que muestre nuestro blog o URL principal. La metaetiqueta Description la pueden agregar desde la parte de Configuración / Preferencias para motores de búsqueda / Etiquetas meta / Descripción. Al agregar la descripción del blog desde configuración se habilitará en las entradas la parte donde se agrega la descripción para cada una de ellas. Esta descripción que se puede hacer para cada entrada es algo muy útil.

Descripción de búsqueda Blogger

Para agregar las Metaetiquetas o meta tags la ruta es: Tema / Editar HTML, y se agregan a la sección <head> de la plantilla, es decir, debajo de esa etiqueta (videotutorial al final del tema). Esto está al inicio de la plantilla. Allí visualizarán la metaetiqueta description si la agregaron desde configuración. Pero debemos colocar unas metaetiquetas dentro de un código condicional b:if /b:if para que esa información solo la tomen los buscadores para la página principal y no para las entradas. Las metaetiquetas que van dentro del condicional son: description, keywords (palabras clave o destacadas), y las de la imagen de la página principal, property='og:image', property='og:image:alt', y property='og:image:type'. Después del condicional agregamos la metaetiqueta para el idioma (es), el autor, y las de Twitter, una para que tome la imagen de la entrada, y la otra que muestra la cuenta de Twitter. Las metaetiquetas og para la imagen son para que cuando se comparta la página principal se cargue la imagen .jpg que hayamos especificado en esa metaetiqueta y no cualquier imagen que esté en la página principal, es muy útil para facebook y las demás redes sociales. A continuación un ejemplo -corten y peguen en sus plantillas-. Si ya agregaron la metaetiqueta Description desde configuración, córtenla y péguenla en lugar de la que está en el ejemplo:

-----------------

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Descripción que leen las personas y usa Google' name='description' />
 <meta content='Palabra 1, Palabra 2, Palabra 3, Palabra 4,' name='keywords' />
<meta content='URL de imagen.JPG para la página principal' property='og:image'/>
<meta content='image/jpeg' property='og:image:type'/>
<meta content='Descripción de la imagen, puede ser la misma que la description' property='og:image:alt'/>
</b:if>
<meta content='es' name='language'/>
<meta content='Nombre del Autor del Blog' name='author'/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@TuUsuarioDeTWITTER"/>

-----------------

Reemplacen los que está en color amarillo.

Luego de agregar las metaetiquetas para Twitter pueden comprobar que esté funcionando en la siguiente página Card Validator Twitter.

Sin la metaetiqueta de Twitter 
Twittercard - Metatag o metaetiqueta para twitter en blogger

Con la metaetiqueta de Twitter
Twittercard - Metatag o metaetiqueta para twitter en blogger

La metaetiqueta og para la imagen hace que las redes sociales muestren la imagen que hayamos especificado para la página principal.

Charkleons.com compartido en Twitter


Charkleons.com compartido en Facebook


Hay una metaetiqueta para el título, pero como verás en tu plantilla, ya se incluye la etiqueta <title> que cumple aún mejor esa función y es la que toma Google. Si no estás usando una plantilla dinámica o responsive de blogger visita este TEMA para configurar el título de las entradas que sale en las pestañas.

TIPS / Consejos

Twitter toma la primera imagen de la entrada, Facebook toma la más grande que esté al inicio.

Si ustedes por el diseño de su blog dejan como primera imagen en sus entradas un ícono, por ejemplo de 128px X 128px, pueden hacer que twitter y facebook tomen una imagen más grande. Pueden agregar una imagen de mayor tamaño con un width="0" y un height="0" en modo HTML, para que esa imagen la tome facebook y Twitter, y la dejan antes de la imagen pequeña. Ejemplo con el código de la imagen grande agregado antes de la imagen pequeña:

<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="0" src="https://3.bp.blogspot.com/-Rp8SWGnHHL8/WvHWuiSx3gI/AAAAAAAAdss/wKyXpkFA0g0Bo0gmAF8DpbNlf6PJA5XCQCLcBGAs/s1600/blogger%2Bcharkleons%2Bbanner.jpg" width="0" /><img border="0" height="128" width="128" r6="true" src="https://4.bp.blogspot.com/-afhK2_7mP0c/TZPGi1xkZYI/AAAAAAAAAJU/A3mdKr16OGE/s1600/blogger1.png" /></div>

Un ejemplo de lo anterior, visiten esta entrada y compártanla en Twitter o Facebook, verán que tomará una imagen que ustedes no ven porque tiene un width y height de 0.

La imagen grande la pueden subir en modo Redactar, le dejan tamaño original, y pasan a modo HTML y solo usen la parte del img, o retiren la parte <a href> </a> que es la parte que redirecciona a un enlace, dejan el width y el height en 0 y la ubican antes de la primera imagen dentro del código div de alineación que ya tiene esa imagen. Como se muestra en el código de arriba.

Un consejo muy importante, luego de publicar una entrada depúrenla en la página debug de facebook Esto sirve para asegurarse que facebook cargue la imagen y la información que se dejó en la descripción de la entrada. En esa página -teniendo una cuenta abierta de usuario-, agregan la url de la entrada, la depuran, y luego la extraen hasta que vean que se carga la imagen y la descripción correctamente. Esto es muy útil ya que si no se hace, las primeras veces que se comparta la entrada en facebook solo tomará el enlace y una descripción sin la imagen.


Videotutorial antiguo del año 2013. Próximamente se actualizará.

Espero que esta información les sea de muy útil.

Gracias.

No hay comentarios:

Publicar un comentario

Gracias por comentar.

Charkleons.com