Desarrollo de paginas web, paginas web económicas, paginas web autogestionables, paginas web con responsive design

Como colocar las etiquetas tags de facebook en tu pagina web

Cuando un usuario publica un sitio web en el facebook, habrá notado que en su muro se muestra de esta manera.

Se muestra la imagen de la noticia, el titulo y una breve descripción. A eso se llama meta tags de facebook o Facebook Open Graph META Tags.

Si inspeccionas el código fuente de una página web, notaras que se muestran estas etiquetas.

Ya sea en una página web auto gestionable o una página web estática.

Para ir directo al tema, en este articulo indicare como debes colocar los meta tags de facebook en tu pagina web. Eso ayudara también si estas realizando SEO. Si conoces el tema, a buena hora, sino, este tip te servirá de utilidad.

1. Abre un editor de texto como sublime text o el que estés usando.

2. Coloca esto después de la etiqueta

3. Una vez modificado tu archivo html, subirlo a un servidor ftp o a tu panel de hosting.

Te preguntaras que significa estas etiquetas y para qué sirven. Aquí te los muestro.

Etiqueta	Descripción
og:url	URL canónica de tu página. Debe ser la URL no representativa, sin variables de sesión, parámetros que representen al usuario ni contadores. Por ejemplo. http://www.tupaginaweb.com
og:title	Título del artículo. Por ejemplo, Como crear una página web con responsive.
og:description	Breve descripción del contenido (normalmente entre dos y cuatro oraciones). Se mostrará debajo del título de la publicación de Facebook.
og:site_name	Nombre de tu sitio web, por ejemplo, Conciertos perú (no conciertosperu.com).
og:image	URL de la imagen que aparece cuando alguien comparte el contenido en Facebook.

Como resultado se vera de esta manera.

En el caso de la etiqueta og:image, tienes que utilizar imágenes de al menos 1200 × 630 píxeles para optimizar la visualización en dispositivos de mayor resolución. Como mínimo, utiliza imágenes de 600 × 315 píxeles, con el fin de mostrar publicaciones de página con enlace que incluyan imágenes de mayor tamaño.

Espero que este tutorial te haya sido útil. Para cualquier consulta o sugerencia, dejas tu comentario en la parte debajo.