Programación del marcado para tiendas web

Los miembros de eMany estarán familiarizados con las estrellas amarillas de Google de las que se ha hablado anteriormente en este blog. Las imágenes de vídeos y el precio o el estado de las existencias de un producto son también ejemplos de complementos adicionales que se muestran en los resultados de búsqueda. Para beneficiarse de estos llamados "fragmentos enriquecidos", tendrá que echar una mano a los motores de búsqueda. Para ello, añada códigos adicionales (marcado de datos estructurados) a su sitio web. Esto permite a los motores de búsqueda no sólo leer lo que está escrito, sino también entender lo que se quiere decir.

Ejemplo de fragmentos enriquecidos

Los fragmentos enriquecidos son añadidos adicionales que Google muestra en los resultados de búsqueda. Estos pueden garantizar un mayor CTR (porcentaje de clics) y, por tanto, más visitantes a su tienda web.

Ejemplo de marcado Schema en los resultados de búsqueda

Los fragmentos enriquecidos existen en Google desde el 12 de mayo de 2009.

¿Qué son los datos estructurados?

Datos estructurados es el nombre colectivo para los datos de nombre-valor que usted añade como código adicional a su sitio web. Junto con el contenido de su sitio, ayudan a los motores de búsqueda a identificar, clasificar e indexar la información. Existen varios métodos para clarificar el contenido para los motores de búsqueda. Por ejemplo, la especificación HTML5 de datos estructurados se denomina " Microdatos ". Otros formatos de datos estructurados muy conocidos son RDFa y JSON-LD . Es aconsejable no incluir los mismos datos estructurados en diferentes formatos, ya que esto puede causar confusión a los motores de búsqueda.

Un ejemplo de datos estructurados

Imagine que vende aspiradoras en su tienda web. Ahora tiene una página sobre una aspiradora concreta con el nombre, el precio, una imagen, una breve descripción y algunas características del producto. Su código HTML entonces se parece a esto

<div> <h1>Philips FC8477 PowerPro Compact</h1> <div>Ahora por 1.150,99 €</div> <img src="/images/-FC8477-powerpro-compact.jpg" /> <div>El Philips FC8477 PowerPro Compact es un económico aspirador sin bolsa con una potencia de 750 vatios. Este aspirador es especialmente adecuado para alfombras de pelo bajo.</div> <div>Marca: Philips</div> <div>Color: Negro</div> </div> </div>

Cuando añadas microdatos a esto, el código fuente tendrá este aspecto:

<div itemscope itemtype="https://schema.org/Product" > < h1 itemprop="name ">Philips FC8477 PowerPro Compact</h1> <div itemprop="offers" itemscope itemtype="https://schema.org/Offer" > Ahora por <span itemprop= "priceCurrency" content="EUR ">€</span> <span itemprop="price" content="1150.99 ">1.150,99</span> </div> <img itemprop="image " src="/images/-FC8477-powerpro-compact.jpg" /> <div itemprop="description ">El Philips FC8477 PowerPro Compact es un económico aspirador sin bolsa con una potencia de 750 vatios. Esta aspiradora está especialmente indicada para alfombras de pelo bajo.</div> <div>Marca: <span itemprop="brand ">Philips</span></div> <div>Color: <span itemprop="color ">Negro</span></div> </div>

Si se fija en los códigos adicionales (resaltados en verde), verá item type=" schema .org/Producto " en la parte superior y item type="schema.org/Oferta " más adelante. Esto indica que esta página trata de una aspiradora que puede venderse a un precio determinado. De este modo, este ejemplo aclara el nombre, el precio, la moneda, la imagen del producto, la descripción, la marca y el color de la aspiradora.

¿Qué ocurre con el marcado Schema?

Schema.org es el principal estándar para el marcado de datos estructurados. Surge de una colaboración en 2011 entre Google, Bing y Yahoo. Yandex, de Rusia, también es compatible con schema.org. Se puede pensar en schema.org como una gran biblioteca de todas las posibles aclaraciones que se pueden añadir a un sitio web. El marcado de esquemas se puede implementar con todos los formatos populares de datos estructurados (Microdata, RDFa, JSON-LD). Existen diferentes "esquemas", cada uno con su propia finalidad. Por ejemplo, hay esquemas para productos , personas , empresas , opiniones , eventos , etc. Algunos de estos esquemas pueden definirse de forma más específica. Por ejemplo, si tiene una zapatería, puede indicarla como Local Business , pero también como Store o incluso ShoeStore . Es importante que defina un esquema de la forma más específica posible para que los motores de búsqueda puedan entender mejor de qué está hablando. Por lo tanto, revise siempre la lista completa de esquemas cuando añada el marcado de esquemas a su sitio web.

Las ventajas del marcado de esquemas

Como tienda en línea, naturalmente querrá saber qué ventajas le aportará la implementación del marcado de esquemas. La implementación tiene tres ventajas para el SEO:

1. Aumenta significativamente las posibilidades de que se muestren fragmentos enriquecidos para su sitio web. Esto puede resultar en un mayor CTR y por lo tanto más visitantes a su sitio web. Un estudio de caso de 2011 en Independer.nl midió un resultado de un 28% más de CTR al obtener fragmentos de reseñas en los resultados de búsqueda.
2. Los motores de búsqueda comprenden mejor el contenido de tu sitio web y pueden distinguir entre páginas cuyos temas se solapan. En un estudio de caso de 2015, esto incluso llevó a la recuperación del tráfico de búsqueda en un sitio web que había sido degradado debido a la implementación de algunas actualizaciones de Panda.
3. Como los motores de búsqueda comprenden mejor su contenido, su sitio web puede aparecer en búsquedas con las que antes no estaba asociado.

Utilizar el marcado schema es una práctica recomendada para presentar el contenido a los motores de búsqueda. Por lo tanto, aunque Google no lo utilice como factor de clasificación, sin duda puede beneficiarse de él.

Marcado de esquemas relevante para el comercio electrónico

Para los sitios web de comercio electrónico, hay mucho que etiquetar con el marcado de esquemas. A continuación se enumeran las posibilidades más importantes. Aunque esta lista es bastante exhaustiva, es muy posible que existan otras posibilidades de etiquetado para su sector específico.

Marcado de esquema básico para productos

• El nombre
• La marca
• Categoría del producto
• El modelo
• Color(es)
• La altura , la anchura , la profundidad y el peso
• El periodo de garantía y el contenido de la promesa de garantía
• La imagen del producto (puede ser más extensa, ver aquí )
• El precio
• Moneda en la que se muestra el precio
• Si está o no en stock y el estado del stock en números
• El número de serie
• El SKU , EAN (GTIN) y/o código de artículo

Recargo opcional para los productos

• El estado del producto
• El número de productos de esta oferta
• Oferta(s) adicional(es) junto con este producto
• La duración de la oferta o del precio
• Volumen del pedido para obtener un precio/precio específico
• Accesorios o piezas de repuesto
• Productos relacionados (por ejemplo, productos de la misma serie)
• Productos similares
• El producto es una variante de
• El producto es el sucesor de
• Fabricante del producto
• Zona de entrega
• Métodos de entrega
• Formas de pago aceptadas
• El tiempo de tramitación hasta el envío del producto
• Referencia a la fuente oficial o descripción ampliada (Wikipedia) del artículo

Marca de revisión

El marcado de reseña ayuda a obtener estrellas amarillas en Google.

• El artículo reseñado
• El número total de opiniones
• Puntuación total de las opiniones
• La puntuación media de las opiniones

Si utiliza un sistema de reseñas que no utiliza una escala de 5 puntos, indique también la puntuación más baja posible y la puntuación más alta posible .

Formato de las opiniones individuales

• El título de la opinión
• El texto de la valoración
• Puntuación de la opinión
• La persona que escribió la opinión
• Fecha en que se escribió la reseña
• Imágenes de las reseñas

Marcado de esquema relativo a la organización

Por lo general, este marcado sólo se añade en la página de contacto y/o en el pie de página. Aunque también se utiliza para los negocios locales (schema local business), nunca está de más añadirlo.

• El nombre de la organización
• El nombre legal de la organización
• El nombre de la empresa matriz
• El sitio web
• La dirección
  • Calle
  • Código postal
  • Ciudad
  • País
• La ubicación geográfica
  • Longitud de la ubicación de la empresa
  • Latitud de ubicación de la empresa
• Dirección de correo electrónico
• Número de teléfono
• Horario de apertura
• Logotipo de la empresa
• Número de IVA
• Otros recargos del sistema

Además de las posibilidades mencionadas anteriormente, hay una serie de situaciones en las que el marcado adicional puede ser interesante. Blog - esto es interesante cuando tiene un blog animado en su tienda web en el que hay una interacción real con su público objetivo y/o varias personas escriben en él. Medicina - cuando ofrece productos o información médica, se puede aplicar un formato adicional. Juegos , películas o música - Dentro de estas categorías hay disponible una gran cantidad de formato adicional. Libros o audiolibros - El formato adicional también está disponible para los productos que están disponibles en varios idiomas . Como ha visto, hay un gran número de posibilidades con el marcado Schema. Cuando empiece a implementarlo, es aconsejable determinar primero qué datos son los más importantes en su sitio web. Así evitará gastar tiempo, dinero o energía implementando un marcado innecesario.

Añadir marcado Schema

Hay dos formas de añadir datos estructurados a su sitio web. Una es añadiendo el marcado de esquema al código de su sitio web y la otra es utilizando el Resaltador de datos de Google .

Implementación en su sitio web

Como tienda web, a menudo tiene que depender de un programador externo para añadir datos estructurados directamente al código de su sitio web. A diferencia de muchas otras funciones, no suele haber plugins o módulos adicionales disponibles para ello. Sin embargo, existen herramientas que pueden ayudar a generar el código. En la práctica, sin embargo, el diseño adicional tendrá que ser añadido al software existente por alguien que entienda de programación en el sistema de su tienda.

Diferentes métodos de implementación

Como ya se ha indicado, el marcado de esquemas puede implementarse en tres formatos de datos estructurados. Se trata de Microformatos, RDFa y JSON-LD. Google prefiere JSON-LD . Dicho esto, la elección del formato depende principalmente de su sistema CMS o de las preferencias de su programador. El método que es técnicamente más fácil debe ser el principal aquí.

Ejemplos prácticos

Hemos implementado muchos de los esquemas de marcado tratados en este artículo en la tienda online premium-hookahs.com . El código fuente de las páginas de productos es un buen ejemplo. Aquí se hace hincapié en el marcado en torno al producto y el marcado en torno a las reseñas. Nuestro propio sitio web también puede servir de ejemplo. Aquí se puede ver cómo se implementan muchas cosas relativas a la organización con microdatos (nótese el elemento itemprop ). Especialmente el código fuente de la página de contacto lo muestra bien. Además, se puede ver que "SameAs" en el pie de página también se ha utilizado para indicar qué páginas son todas sobre el mismo objeto. Así que esto puede ser interno dentro de su sitio web o externo en Wikipedia, por ejemplo.

Implementación a través de Google Search Console

Google ofrece una alternativa a la (difícil) implementación técnica de los datos estructurados en su sitio web. Lo hace a través del Resaltador de datos que está disponible bajo el título "Formato de búsqueda" -> "Resaltar datos" en Google Search Console . Esta herramienta le permite resaltar secciones de su sitio web con el formato adecuado directamente en una interfaz visual. Google también es capaz de detectar patrones en esto, por lo que este método también se puede aplicar a tiendas web más grandes. Aunque esta es una gran alternativa, existen varias limitaciones que a menudo requieren de un programador para su completa implementación. Las limitaciones del Resaltador de Datos

1. El Resaltador de datos es una herramienta de Google. Otros motores de búsqueda no pueden utilizar estos datos.
2. La funcionalidad del Resaltador de datos es limitada. Como resultado, sólo se puede aplicar alrededor del 50% del formateo tratado en este blog.
3. Cuando la información del producto está oculta tras pestañas, esta información no puede formatearse utilizando el Resaltador de datos.
4. Cuando cambie la estructura HTML de su sitio web, es posible que tenga que restablecer el Resaltador de datos.

Prueba de datos estructurados

Para comprobar si la implementación se ha realizado correctamente en su sitio web, puede utilizar la herramienta de prueba de datos estructurados de Google. Aquí puede comprobar por URL qué datos estructurados reconoce o no el bot de Google. También puede utilizar esta herramienta para generar ejemplos de la disposición. Por último, a través de Search Console, Google le permite medir el estado actual de su sitio e identificar cualquier error en su marcado. Encontrará este panel en el apartado "Formato de búsqueda" -> "Formato estructurado". Si aún no dispone de un marcado de esquema en su sitio, encontrará aquí el mensaje "No detectamos ningún dato estructurado en su sitio" o "No detectamos ningún dato estructurado en su sitio". Tengo curiosidad por saber qué marcado de esquema tiene ya en su tienda web y cuál es su experiencia con él. Si tiene alguna pregunta u observación, ¡me encantaría escucharla en los comentarios!