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:
El microformato es una herramienta que se implementa mediante atributos adicionales en las etiquetas HTML.
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:
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.
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.
Crea un marcado para una organización en la que se especifique:
Puedes utilizar las etiquetas según su criterio. Toda la semántica se basa en el microformato. Utiliza el vocabulario http://schema.org/Organization.
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.
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.
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.
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.