Etiquetado Semántico para SEO

¿Por qué usar las nuevas etiquetas en HTML5 ?

Básicamente para que Google pueda entender que contenido es importante y cuál no lo es.

• Article: contenido fundamental, independiente
• Aside: contenido accesorio, no fundamental
• Main: < main> especifica el contenido principal de un documento. El contenido dentro del elemento <main> debe ser exclusivo para el documento.
• Nav: barra de navegación
• Section: una sección o bloque (ex DIV)
• Header: introducción / orientación sobre sección
• Footer: final de una sección
• Hgroup: grupo de encabezados
• Figure: contenido relacionado (imagen, video, audio, canvas, gráficos, tablas estadísticas, etc.)
• Figcaption: leyenda de un elemento Figure
• Details: La etiqueta < details> especifica detalles adicionales que el usuario puede ver u ocultar bajo demanda.

Secciones Explícitas

1. Article: Es el contenido importante de cada página. Puede haber uno, o varios por página.

2. Aside: Es información secundaria, que podría no estar. Ej.: Barras laterales, banners.

3. Nav: Una barra de navegación. Puede haber una, o varias por página.

4. Section: Una sección explícita con contenido relacionado con la página o con el article. Puede haber una, o varios por página/article.

4a. Section=»Parte de»: Puede haber una o más sections dentro de un article:

< section>
< article>Noticia de hoy< /article>
< article>Noticia de ayer< /article>
< /section>

4.b Section = “contenedor de…”: Una section puede tener articles dentro (¡con sections dentro!).

< section>< article>Noticia de hoy< /article>< article>Noticia de ayer< /article>< /section>< /blockquote>

5. Headers & Footers: Pertenecen a secciones (article, aside, nav y section) además del body.

6. Figure: Todo aquello que excede el cuerpo principal del artículo pero sigue aportando valor al contenido del mismo. Es un refuerzo al contenido principal. Siempre dentro de un elemento al que se le aporta Valor.

< figure>< figcaption>Denominación< /figcaption>< img src=»logo.jpg» />< /figure>

Aportar valor semántico según etiquetado

Negritas

< b> estilo “diferente”, pero no más importante ni negrita.
< strong> es algo importante, aunque no se vea distinto.
Debe restringirse a palabras, expresiones o conceptos resumidos. (La idea más importante que prevalece sobre las demás.)
Señalar más de un grupo de cuatro o cinco palabras que formen esta idea rebaja la calidad de todo el conjunto.

Subrayado

< mark> sirve para destacar el fragmento de párrafo o frase que mejor resume la idea general del artículo.
Define el contenido resaltado como el más relevante de la unidad informativa.
Genera un fondo de color fosforito que se puede modificar mediante CSS.
Sólo puedo sólo puede haber un < mark> por cada < /p>. Más sería un error.

Cursivas

Los elementos, < i> y < em> se utilizan para escribir textos en cursiva. < i> se utiliza como un apoyo visual y < em> aporta un valor semántico al texto señalado.

< i> Usaremos la itálica para:

• Nombres científicos de uso académico o muy restringido: Níscalo (lactarius deliciosus)
• Expresiones en otro idioma que se utilizan tal cual en el nuestro. En este caso, se identifica el idioma con el atributo lang: < i lang=»fr»>déjà vu
• Neologismos de uso extendido: tablet
• Nombres propios de aeronaves: Titanic, Spirit of Saint Louis, Plus Ultra, Challenger.
• Cuando se refiere un modelo y no un nombre propio, se emplea redonda: “Airbus 380”.
• Nombres propios de animales, incluso de la ficción: Rocinante
• Latinajos, con la etiqueta lang correspondiente: carpe diem

La etiqueta < em> representa un cambio en la intensidad de la palabra señalada respecto del contexto en el que se expresa. Su colocación modifica el significado o sentido de la frase para aquél que la pronuncia o lee.

Se utiliza en otros casos en los que convencionalmente se compondría en cursivas la palabra o expresión:

• Para expresar un doble sentido en la expresión: Manuel tira con bala
• Para apuntar a un apodo coloquial , generado por la opinión pública, y aceptado para un grupo social. El apodo no deja de tener un retintín enfático: Las Celebrities
• En aquellas expresiones idiomáticas propias o no (pero infrecuentes o localismos) que se ponen de actualidad y sirven para identificar un fenómeno o suceso notable.: chapapote.

Citas y entrecomillado

< q> Para redactar una cita directa:
< p>El entrenador afirmó: El jugador no estará convocado.

Los navegadores escribirán antes y después de la cita la comilla correspondiente.
< q> se usa cuando se recogen fragmentos cortos de distintas fuentes como: libros, letras de canciones, documentos periodísticos.

< p> < p> Extracto de la fuente< /p>
< p>< cite title=“Título de la cita»>Título asignado a la Cita< /cite>, de Nombre del autor . En < cite title=“fuente»>Fuente< /cite>, 10 de diciembre de 2014< /p>

El autor o fuente de la cita debe escribirse fuera del elemento y, habitualmente, en el primer párrafo posterior.

El contenido de < blockquote> sirve como argumento externo para reforzar la opinión expresada.

Utilizar < blockquote> implica mejorar la valoración de la página ya que la araña del buscador entenderá que el autor ha invertido tiempo en apuntar los mejores argumentos para reforzar su tesis.

< cite> ahora es para “título” de la obra citada, no para “autor”.
Está relacionada con la capacidad de valorar la relevancia de un cuerpo de texto. A mayor número de citas mayor calidad.

< p>
< cite title=“Título de la obra»> Título de la obra < /cite>, de Jesús López. En EFE, 19 de Mayo de 2014
< /p>

< cite> se utiliza para títulos de libros, películas, canciones, cabeceras de periódicos, revistas y programas de televisión.

Listados

<ul y ol>: La lógica interna de los elementos ul y ol forma parte de su valor semántico y es interpretable por las máquinas.

< ul>

< li>Esto< /li>
< li>Otro< /li>
< li>Aquello< /li>

< /ul>

< ol>

< li>Esto< /li>
< li>Otro< /li>
< li>Aquello< /li>

< /ol>

< dl>: Este tipo de listas se utilizan para expresar conceptos y sus definiciones. Metadatos y sus valores, preguntas y respuestas, y cualquier tipo de término o expresión que se corresponda con su debida explicación.

< dl>
< dt>Concepto 1< /dt>
< dd>Explicación del concepto 1< /dd>
< dt>Concepto 2< /dt>
< dd>Explicación del concepto 2< /dd>
< /dl>

Usos más habituales: Listas de instrucciones, listas de consejos, listas de tendencias, listas de preguntas más frecuentes; listas de metadatos de archivos fotográficos, vídeos o MP3, listas estandarizadas de características de productos (dimensiones, peso, marca o colores); vocabularios técnicos.

Otros Elementos

Time: Hora, Fecha, o ambas cosas.

< time>2009-11-13
< time datetime=»2009-11-13″>13 Noviembre
< time datetime=»20:00″>Comienza a las 8pm
< time datetime=”1995″> Significa el año 1995
< time datetime=”1995-11″> Significa Noviembre 1995
< time datetime=”11-14″> Significa el 14 de Noviembre (cualquier año)
< time datetime=”1995-W21″> Significa semana 21 de 1995

Address:  pertenece a una sección, no solo a la página entera. Es el elemento que sirve para que los lectores identifiquen y contacten con la persona que ha redactado el contenido.

< address>El autor: < a href=»../miblog/»>Jesús López.< /address>

Small: Se convierte en un elemento que semántico que puntualiza el flujo de texto donde está insertado.

Texto normal y… < small>Texto pequeño< /small>

Se utilizar como aclaración, como guía de lectura o como nota legal o como referencia bibliográfica.

S: se utiliza para mantener contenido obsoleto. (Precios tachados) pero que semánticamente todavía tiene sentido.

< p> Texto normal y… < s>Texto tachado< /s> < /p>

Del: se utiliza para eliminar el valor semántico y definir contenido obsoleto.

< p> El agua es insípida < del>y húmeda.< /del>inodora e incolora.< /p>