Optimizando la Información de Contacto en tu Sitio Web con <address> y Microformatos
Introducción
Cuando se trata de diseñar y desarrollar un sitio web, la semántica es fundamental para garantizar que la información se interprete correctamente tanto por los usuarios como por los motores de búsqueda. En este artículo, exploraremos cómo la etiqueta <address>, los microformatos y la metodología BEM (Block Element Modifier) pueden mejorar la semántica de la información de contacto en tu sitio web.
La Etiqueta <address> en HTML:
Se utiliza para marcar información de contacto. Sin embargo, existe cierta confusión sobre su uso adecuado. Según la especificación de HTML5, esta etiqueta debe utilizarse para la información de contacto relacionada con el contenido de la página o el sitio web en su conjunto. Esto incluye direcciones físicas, direcciones de correo electrónico y números de teléfono que estén relacionados con el propósito principal del sitio.
Ejemplo de Uso de <address>:
<address>
<p>John Doe</p>
<p><a href=”mailto:john@example.com”>john@example.com</a></p>
<p><a href=”tel:+123456789">123–456–789</a></p>
<p>123 Main Street, City, Country</p>
</address>Microformatos para Información de Contacto:
Los microformatos desempeñan un papel esencial para mejorar la semántica de la información de contacto en tu sitio web y, al mismo tiempo, brindar beneficios significativos en términos de visibilidad en los motores de búsqueda. Estos microformatos permiten que los motores de búsqueda comprendan y procesen la información de contacto de manera más precisa.
Por ejemplo, puedes utilizar clases específicas, como class=”vcard” para marcar una tarjeta de visita virtual, lo que facilita la identificación de elementos clave como el nombre (class=”fn”), el correo electrónico (class=”email”) y el número de teléfono (class=”tel”). Esta estructura semántica enriquecida mejora la capacidad de los motores de búsqueda para indexar y presentar información relevante a los usuarios, lo que puede tener un impacto positivo en la visibilidad de tu sitio web en los resultados de búsqueda.
Ejemplo de Uso de Microformatos:
<address class=”vcard”>
<p class=”fn”>John Doe</p>
<p class=”email”><a href=”mailto:john@example.com”>john@example.com</a></p>
<p class=”tel”><a href=”tel:+123456789">123–456–789</a></p>
<p class=”adr”>123 Main Street, City, Country</p>
</address>¿Puedo usar BEM y Microformatos juntos?:
Es importante destacar que el uso de la metodología BEM para estructurar y nombrar clases en CSS no afecta la implementación de microformatos. Puedes seguir utilizando BEM para gestionar tus estilos y, al mismo tiempo, incorporar microformatos en tu HTML para mejorar la semántica de la información de contacto.
Ejemplo de Uso de BEM con Microformatos:
<address class="address vcard">
<p class="address__name fn">John Doe</p>
<p class="address__email email"><a href="john@example.com">john@example.com</a></p>
<p class="address__tel tel"><a href="tel:+123456789">123-456-789</a></p>
<p class="address__adr adr">123 Main Street, City, Country</p>
</address>Bibliografía
Por: Gabriel Burgos