Saltar al contenido
  • Agencia Digital
    ¿Qué buscas?
    Agencia
    Digital
    • Ver más
    Agencia de Marketing
    B2C
    • Ver más
    Agencia de Marketing
    B2B
    • Ver más
  • INBOUND MARKETING
    INBOUND MARKETING
    ATRACCIÓN
    • Posicionamiento SEO
    • Google ADS PPC SEM
    • RRSS Social Ads
    CONVERSIÓN
    • Conversión y Analítica
    • Diseño Gráfico y Web
    CRM
    • Infórmate
  • MARKETING CORPORATIVO
    • Branding
    • Learning
    • Lanzamiento Digital Pyme
    • Videos corporativos
  • Portfolio
    BRANDING
    • Ver más
    DISEÑO WEB
    • Ver más
  • Casos de éxito
  • Blog
  • Quienes somos
  • Contacto
CONTACTO

Cómo adaptar tu web a las Redes Sociales

Siguiendo con nuestra tendencia de Consejos para el desarrollo web, hoy nos centramos en un aspecto más técnico del desarrollo, y os traemos las claves para la optimización de una página web y su adaptación a las redes sociales de cara a la compartición de contenido, ya que no debemos olvidar que éstas constituyen una pieza fundamental de nuestra Estrategia de Comunicación Digital y nuestro Marketing de contenidos.

Cuando desarrollamos y ejecutamos el diseño de una web, si somos meticulosos y cuidadosos o incluso, maniáticamente perfeccionistas intentamos que el aspecto visual sea exactamente igual al diseñado en nuestra imaginación, sin tener en cuenta dónde se visualizará el contenido final. La adaptación responsive para dispositivos móviles, las distintas hojas de estilo para visualización panorámica, vertical o según resolución, y un sinfín de parámetros más, son elementos que no podemos dejar al azar.

Es por ello que también es importante qué y cómo se visualiza el sitio web que hemos diseñado cuando alguien lo comparte en sus redes sociales. Para ello existen etiquetas específicas que nos permitirán personalizar la información que será visible cuando se comparta el contenido en alguna ellas como Facebook, Twitter, Google+ o Pinterest.

Vamos a repasar cuáles son las meta etiquetas sociales más utilizadas y qué finalidad tienen.

<html itemscope itemtype=»http://schema.org/Tipo»>

No es una etiqueta social, pero sí que debemos actualizar la etiqueta html del documento para el correcto funcionamiento definiendo el tipo de documento que será compartido.

El documento puede ser de los siguientes tipos:

  • Article, si es un artículo de redacción.
  • Blog, si el documento es un blog.
  • Book, si se tratase de un libro.
  • Event, para un evento o acontecimiento.
  • LocalBusiness, para un negocio local.
  • Organization, si es la página de una organización.
  • Person, si es un perfil o una página personal.
  • Product, si se trata de la descripción de un producto.
  • Review, para la revision de un producto o servicio.
  • Other, si no está enmarcado en ninguno de los anteriores.

El marcado social define qué información se muestra al compartir contenido a través de una red social. Vamos a revisar los distintos marcados sociales existentes y repasaremos brevemente cada uno de ellos:

Marcado social para Google+

<meta itemprop=»name» content=»Título»>

<meta itemprop=»description» content=»Descripción»>

<meta itemprop=»image» content=»https://bilnea.com/imagen.jpg»>

Es el marcado social utilizado por Google+ y basado en los microdatos de schema.org. En él se define el título que se utilizará al compartir, la descripción y la imagen que se compartirán. La imagen debe tener una altura no menor a 120px.

Podemos utilizar la herramienta que nos facilita Google si queremos realizar la tarea de una forma más sencilla y más tarde comprobar que el marcado es el correcto.

Marcado social para Twitter

<meta name=»twitter:card» content=»summary_large_image»>

<meta name=»twitter:site» content=»@bilnea»>

<meta name=»twitter:creator» content=»@samuelcerezo»>

<meta name=»twitter:title» content=»Título»>

<meta name=»twitter:description» content=»Descripción»>

<meta name=»twitter:image:src» content=» https://bilnea.com/imagen.jpg»>

Este marcado define la descripción que se compartirá en Twitter. En primer lugar:

  • twitter:card define el tipo de tarjeta que se compartirá. Podemos revisar todas las existentes y ver las distintas posibilidades que nos ofrecen en la web de Twitter.
  • twitter:site define el sitio al que pertenece el contenido.
  • twitter:creator el autor del mismo.

A continuación se definen las etiquetas de título y descripción y por último el enlace a la imagen que servirá de previsualización. En el tipo de tarjeta utilizada, esta imagen será como mínimo de 280x150px.

Una vez realizado el marcado social de Twitter, podemos comprobar que funciona correctamente.

Marcado social para Facebook (OpenGraph)

OpenGraph es un protocol que nace con el fin de crear un marcado que facilite la compartición de enlaces. Las posibilidades de metadatos que ofrece son casi infinitas. Basta visitar la web de OpenGraph para salir de dudas sobre qué etiquetas utilizar.

<meta property=»og:title» content=»Título» />

<meta property=»og:type» content=»article» />

<meta property=»og:url» content=»https://bilnea.com/» />

<meta property=»og:image» content=»https://bilnea.com/imagen.jpg» />

<meta property=»og:description» content=»Descripción» />

<meta property=»og:site_name» content=»bilnea» />

<meta property=»article:published_time» content=»2015-03-23T11:30:00+01:00″ />

<meta property=»article:author» content=»100002546172237″ />

<meta property=»article:tag» content=»marcado social» />

En el marcado de ejemplo, procedemos a definir:

  1. El título que se compartirá, tipo de contenido (el cual puede ser music, video, article, book, profile o website), la dirección al contenido compartido y la imagen usada en la previsualización.
  2. La descripción del contenido, el nombre de la web a la que pertenece el contenido y fecha de publicación.
  3. Etiqueta exclusiva de Facebook, donde se detalla la ID o el nombre de usuario de Facebook del autor (también podemos vincular con él o los administradores utilizando la etiqueta fb:admins). Estas etiquetas pueden ser más de un perfil, para ello separaremos los distintos perfiles con comas.
  4. Por último y no menos importante se definen las palabras claves que describen el contenido.

Al igual que en los puntos anteriores, Facebook también nos ofrece una herramienta para comprobar el contenido compartido.

Y esto es sólo una pequeña muestras de las posibilidades del marcado social. Un uso más avanzado del mismo nos permite vincular sitios webs con aplicaciones móviles, e incluso obtener un mayor detalle del contenido como por ejemplo el director de una película o el precio de un artículo.

Mediante la implementación de estas meta etiquetas, nos aseguraremos de dotar a nuestro contenido de toda la información necesaria con el objetivo de que sea 100% entendible para las redes sociales y se visualice tal y como pretendemos que así sea.

Artículos relacionados

ENAE DM 23

Nos vemos en ENAEDM 23

Nuestro mundo avanza muy rápido. Actualizarse constantemente es fundamental para no quedarse atrás y evitar perder oportunidades que pueden generar mucho valor. El entorno digital

Leer post

¿Cómo saber que ha llegado el momento de hacer rebranding?

¿Qué es el branding? Me preguntas mientras clavas en mi pupila tu pupila azul… El branding está formado por un conjunto de acciones relacionadas con

Leer post

Murcia

Carril Condomina, nº3, 10ºC. 30006, Murcia.
(+34) 968 168 456 – 722 645 868

info@bilnea.com

Valencia

Gran vía Marqués del Turia, 49 (of. 801). 46005, Valencia.

(+34) 961 155 808 – 722 398 628

info@bilnea.com

  • Blog
  • Clientes
  • Recursos de Marketing
  • Trabaja con nosotros
  • Quiénes somos
  • Plan de contingencia digital
Linkedin Instagram Facebook

© 2022 bilnea | Aviso Legal | Política de Privacidad | Política de Cookies | Ayudas Recibidas | Hecho con ❤️

Gestionar el consentimiento de las cookies
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar proveedores Leer más sobre estos propósitos
Ver preferencias
{title} {title} {title}