HTML: Microformato
Hablando de semántica, se mencionó un formato de marcado llamado microformato, utilizado por los robots de búsqueda para analizar la información en una página. Un marcado adecuado de la página con microformato ayuda a mostrar en los resultados de búsqueda no solo el enlace al sitio web y la descripción, sino también información adicional:
- Nombre de la organización
- Horario de atención
- Dirección
- Número de teléfono
El microformato es una herramienta que se implementa mediante atributos adicionales en las etiquetas HTML.
Schema.org
Los desarrolladores han creado varios tipos de microformatos, siendo el más común Schema.org, que ofrece una amplia selección de "vocabularios" para describir la información en una página.
Un vocabulario es un conjunto de reglas que describen los bloques en una página. Sesiones de películas en un cine, información del departamento de ventas, precios de productos, reseñas de artículos, todo esto se presenta en pequeños vocabularios.
Pasos para crear un microformato:
- Selecciona un vocabulario. Puedes consultar la documentación para conocer los vocabularios compatibles con un motor de búsqueda en particular. Para el motor de búsqueda Yandex, los vocabularios disponibles se indican aquí.
- Define el bloque que se va a marcar. Puede ser un bloque o incluso toda la página del sitio web.
- Identifica la información relevante. En el caso de marcar información de contacto, esto incluye el nombre de la organización, el teléfono, el correo electrónico y la dirección.
- Especifica los atributos según el tipo de información y el vocabulario seleccionado.
No es posible proporcionar instrucciones completas sobre el microformato en una sola lección. Es un tema amplio con muchos matices diferentes. A medida que adquieras experiencia, aprenderás a identificar rápidamente la información necesaria y marcarla correctamente. Con un enfoque sencillo, el microformato ofrece grandes oportunidades tanto en términos de presentación visual de la información en los resultados de búsqueda como para la promoción en motores de búsqueda.
Microformato de contacto
Tomemos como ejemplo los datos de contacto de una empresa ficticia llamada "Proud" y marquemos los contactos utilizando Schema.org. Inicialmente, el bloque de contactos se ve así:
<section>
<h1>Empresa "Proud"</h1>
<p>Dirección: Motino, Calle de los Constructores, Número 6</p>
<p>Teléfono: 8 (8765) 333-00-00</p>
<p>Email: info@proud-company.test</p>
</section>
Primero, debemos seleccionar un vocabulario. Yandex ofrece varias opciones para esto. Utilizaremos el vocabulario "Organization". Puedes encontrar una descripción completa de este vocabulario en el sitio web https://schema.org/.
El objetivo de la lección no es enseñar cómo marcar completamente los datos. El objetivo de la lección es mostrar un ejemplo de microformato.
Para indicar al motor de búsqueda que los datos están marcados con un vocabulario, se deben especificar dos atributos:
itemscope- indica que el bloque es una entidad única y que los datos dentro de él están relacionados. Solo se especifica en el bloque principal y no tiene un valor propio.itemtype- indica qué vocabulario se utilizará. Por ejemplo, para describir los contactos, se selecciona el vocabulario Organization. El atributo completo se ve así:itemtype="http://schema.org/Organization"
<section itemscope itemtype="http://schema.org/Organization">
<h1>Empresa "Proud"</h1>
<p>Dirección: Motino, Calle de los Constructores, Número 6</p>
<p>Teléfono: 8 (8765) 333-00-00</p>
<p>Email: info@proud-company.test</p>
</section>
Ahora el motor de búsqueda sabrá que la información dentro de este bloque se refiere a una organización. Pasemos a marcar la dirección. Schema.org permite especificar la calle, el número, el edificio, etc., por separado, pero en este caso generalizaremos y utilizaremos solo un valor itemprop="address" para indicar la dirección de la empresa. Ten en cuenta que los elementos de marcado se especifican utilizando el atributo itemprop.
<section itemscope itemtype="http://schema.org/Organization">
<h1>Empresa "Proud"</h1>
<p>Dirección: <span itemprop="address">Motino, Calle de los Constructores, Número 6</span></p>
<p>Teléfono: 8 (8765) 333-00-00</p>
<p>Email: info@proud-company.test</p>
</section>
Siguiendo el mismo patrón, marquemos el resto de los datos: nombre, teléfono, correo electrónico. Cada uno de ellos tiene su propio valor para el atributo itemprop. Ten en cuenta que solo se marcan los datos, dejando fuera el nombre del campo. Para esto, los datos relevantes se envuelven en <span> y se les asigna el atributo correspondiente.
<section itemscope itemtype="http://schema.org/Organization">
<h1 itemprop="name">Empresa "Proud"</h1>
<p>Dirección: <span itemprop="address">Motino, Calle de los Constructores, Número 6</span></p>
<p>Teléfono: <span itemprop="telephone">8 (8765) 333-00-00</span></p>
<p>Email: <span itemprop="email">info@proud-company.test</span></p>
</section>
Puede utilizar las herramientas de las principales plataformas de búsqueda para verificar la corrección del microformato:
Intente insertar el ejemplo de prueba en estas herramientas y observe los resultados. También puede intentar "romper" el microformato y ver los errores que se muestran.
Tarea
Crea un marcado para una organización en la que se especifique:
- El nombre de la organización
- El correo electrónico de la organización
Puedes utilizar las etiquetas según su criterio. Toda la semántica se basa en el microformato. Utiliza el vocabulario http://schema.org/Organization.
¿El ejercicio no pasa la prueba, qué debo hacer? 😶
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Mi código funciona en mi entorno, pero no aquí 🤨
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Mi código es diferente a la solución del profesor 🤔
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Leí la lección, pero no entendí nada 🙄
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.