Antes de empezar de crear una estructura HTML optimizado, debemos de tener en cuenta que es la base principal para que tu sitio web tenga una buena estructura dividida, se enfoca en el esqueleto y desarrollo del sitio web, así que en esta oportunidad les quiero dejar algunas estructuras, etiquetas y elementos HTML5 que deben tener en cuenta antes de o al momento de empezar una campaña SEO.
Empecemos…
Lo primero que tenemos que aprender es realizar la base principal como lo mencioné arriba, ya que es el factor clave para que tu sitio web llegue tenga un mejor rendimiento y mejor usabilidad como parte de la programación del sitio web.
Vamos tener pero tampoco no a abusar de los comentarios html, ya que no es bueno a la hora de subir el sitio web al servidor. Antes debemos que asegurarnos eliminar todos los comentarios necesarios. Cuando ya seas un experto diseñando sitios web o maquetando, no necesitaras de las etiquetas de comentarios (<!–-comentario-–>) como ayuda.
Pero eso no quiero decir que
Necesitamos tener nuestra estructura Base.
Las etiquetas <h1>, <h2> …… <h6>; cumple con la función de definir los encabezados de manera gradual.
<h1>; ——–> Título Principal
<h2>; ——–> Subtítulos
<h3>; ——–> Letra tipo cuerpo
Así sucesivamente, entre más cercano se el numero al 6 la letra será más pequeña.
Ejemplo:
Otras etiquetas html más usuales y para una buena estructura de SEO, son aquellas que llevan a la mano toda la información que se plasma en el sitio web. Es por eso que les dejo algunas etiquetas esenciales que debes tomar en cuenta en tu estructura HTML para tus contenidos.
Etiquetas br
La etiqueta <br>; nos permite realizar un salto de linea.
<p>salto de linea</p><br>Etiqueta b
La etiqueta <b>; se usa para representar un texto con un estilo de fuente tipo negrita.
<p><b>texto en negrita sin relevancia</b></p>Etiqueta Strong
La etiqueta <strong> nos permite enfatizar un texto.
<p><strong>Resaltar texto en negrita</strong></p>Etiqueta Span
La etiqueta <span>; se utiliza para añadir estructura a una parte de un texto.
Esta etiqueta se usa comúnmente para añadir un estilo determinado dentro de una sección del texto.
Etiqueta i
La etiqueta <i>; se usa para representar un texto con un estilo de fuente itálica (cursiva).
<p><i>texto en curva</i></p>Etiqueta blockquote
La etiqueta <blockquote>; se utiliza para designar una cita de texto larga (en forma de bloque).
<blockquote>citar texto</blockquote>Generalmente los navegadores insertan espacios en blanco antes y después de cada cita.
Etiqueta cite
La etiqueta <cite>; contiene una cita o referencia a otro lugar.
<cite>Mencionar un lugar o destino</cite>Etiqueta hr
La etiqueta <hr>; representa una línea horizontal para separar diferentes secciones de un documento.
<hr>___________________________________________________________Estructura HTML5
Siempre recomiendo respetar el alineamiento de la estructura de las etiquetas html5 internas establecidas. Les dejo un esquema.
Ya que hemos hablado sobre las etiquetas HTML, ahora vamos a tocar el tema más importante de esta última fase y es de las “Metaetiquetas” donde juegan un papel muy importante para el SEO y se establecen mayormente en la parte superior de la cabecera (<header>) de la estructura base HTML,
Las metaetiquetas se utilizan para indicar información codificada y especificar los metadatos del sitio web. No aparecen de forma visual en el sitio web, sino sirven para que los agentes de usuario como los navegadores o los rastreadores web (bots) pueden leer metaetiquetas. La función de una metaetiqueta es transmitir información adicional a un sitio web, lo que facilita el análisis de archivos HTML y facilita el mantenimiento del contenido de los archivos.
¿Cuales son las metaetiquetas más usadas?
Las meta etiquetas más usadas y las que son recomendables crear, son aquellas que puedan ser útil para tu contenido de tu sitio web.
Metadescripción
Descripción o también conocida como meta-descripción, ofrece un espacio breve para un resumen del contenido de una página del sitio web. Dado que los motores de búsqueda presentan esta metaetiqueta como un fragmento en los SERPs, la edición cuidadosa es absolutamente imprescindible para cualquier contenido que se muestre aquí.
Debido a su influencia significativa en el comportamiento del clic de los usuarios web, la descripción es una de las metaetiquetas HTML más importantes para la optimización de motores de búsqueda.
<meta name="description" content="acá puedes agregar una breve descripción
de tu página web, solo tienes 160 carácteres para resumir tu contenidos"/>Sin embargo, es importante que los propietarios de sitios web recuerden limitar la descripción a 160 caracteres (incluidos los espacios). Cualquier texto después de este punto se corta y aparecerá una descripción incompleta en los resultados de búsqueda.
Título
Según Google, el título es solo uno de los cerca de 200 factores considerados en el cálculo de las clasificaciones de resultados orgánicos. Con respecto a la optimización en la página, es vital asegurarse de que el título no exceda la longitud máxima de 55 caracteres. También se recomienda colocar una palabra clave principal en la etiqueta del título de la página respectiva. Un ejemplo de título de página web tomaría esta forma.
<title>Título Principal de página web | Nombre Sitio Web</title>Las metaetiquetas también pueden definir instrucciones para controlar los robots de búsqueda (rastreadores web).
Codificación de caracteres
<meta charset="utf-8"/>Si la fuente aún no está definida en el encabezado HTTP, esta información debe proporcionarse en el código HTML. Esto asegurará, entre otras cosas, que cualquier carácter especial se muestre correctamente. Use la siguiente metaetiqueta para especificar la fuente o la codificación de caracteres.
Autor y copyright
Las metaetiquetas “Autor” y “Copyright” se pueden encontrar en el código fuente de una página HTML. Se utilizan para registrar información como quién creó el sitio web correspondiente y a quién pertenece la propiedad de los derechos de autor.
La etiqueta de autor se inserta automáticamente en algunos sistemas de administración de contenido (CMS) y siempre da el nombre de la última persona que editó la página. La ventaja de esto es que los administradores en el directorio de origen pueden determinar quién ha editado qué página. Sin embargo, el uso de estas metaetiquetas HTML es opcional.
<meta name="author" content="Author name" />
<meta name="copyright" content="Copyright owner" />Meta Robots
Una de las funciones principales de las metaetiquetas es transmitir instrucciones de índice a los rastreadores de motores de búsqueda. Estos se definen a nivel de página mediante metadatos de robots. Las siguientes metaetiquetas se utilizan para determinar si una página se agrega a un índice de motor de búsqueda y si está disponible para una búsqueda web. También pueden especificar si el rastreador debe seguir o ignorar los enlaces de páginas salientes. De esta manera, los datos del meta robot demuestran ser uno de los tipos más relevantes de metaetiquetas SEO.
Index
Permite que un rastreador de motores de búsqueda indexe un sitio HTML, usando la siguiente metaetiqueta:
<meta name="robots" content="follow"/>Sin embargo, dado que los rastreadores web (bots de búsqueda) indexan sitios web de forma predeterminada, generalmente no es necesario escribir este comando.
Noindex
Si no desea que aparezca una página HTML en el índice del motor de búsqueda, debe definirla explícitamente. Esta metaetiqueta permite que los programas de búsqueda pasen contenido HTML a la base de datos del motor de búsqueda:
<meta name="robots" content="noindex"/>El valor “robot” del atributo de nombre se ajusta a todos los rastreadores de motores de búsqueda. El valor del atributo de contenido “noindex” establece que la página actual no debe indexarse. También es posible evitar la indexación de robots específicos con un valor alternativo para el atributo de nombre, es decir, “googlebot” en lugar de “robots”.
Te puede interesar… Cómo utilizar correctamente las meta-etiquetas Robots
Follow
Los rastreadores web siguen los enlaces HTML salientes de forma predeterminada. Sin embargo, si lo desea, puede expresarse mediante los siguientes metadatos del robot:
<meta name="robots" content="follow"/>Esta metaetiqueta también es esencialmente redundante, ya que los rastreadores de todos los motores de búsqueda importantes deben seguir automáticamente los hipervínculos siempre que no se defina nada más.
No follow
La siguiente metaetiqueta se puede usar para evitar que los robots de búsqueda lleguen a las subpáginas a través de hipervínculos o los siguientes enlaces a otros dominios:
<meta name="robots" content="nofollow"/>Los rastreadores tratan la página como si no existieran enlaces. Ese metaelemento no impide que el contenido del archivo HTML correspondiente se transmita a la base de datos de búsqueda.
Las metaetiquetas index / noindex y follow / nofollow se pueden combinar o usar solas. Por ejemplo, se pueden usar para especificar que un sitio se registre en el index, pero se deben ignorar los hipervínculos. Alternativamente, ambas acciones pueden ser prohibidas o permitidas.
<meta name="robots" content="index,nofollow" />
<meta name="robots" content="index,follow" />
<meta name="robots" content="noindex,nofollow" />Metaetiqueta Expire
En lugar de evitar por completo el almacenamiento de datos en una memoria caché, puede establecer una fecha de caducidad para los datos HTML en cuestión con el atributo “http-equiv”. Para esto, se puede usar la siguiente metaetiqueta:
<meta http-equiv="expires" content="exercise date in seconds"/>Esta etiqueta permite establecer una fecha de ejercicio en cualquier momento. Cuando el período de tiempo definido ha expirado, un navegador web cargará el documento HTML correspondiente desde la dirección de origen. Si el contenido se carga desde la página original de todos modos, se elige una fecha de vencimiento de 0 segundos. Para una fecha de vencimiento de 12 horas, los propietarios de páginas web deben elegir 43.200 segundos.
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="43200"/>Otra alternativa, es establecer un intervalo de tiempo para la fecha y hora exactas. Esto se debe dar en Greenwich Mean Time (GMT).
<meta http-equiv="expires" content="Sat, 07 Feb 2016 00:00:00 GMT"/>Actualizar
Las metaetiquetas con el atributo “http-equiv” se pueden usar para configurar una forma simple de redireccionamiento. Al igual que la etiqueta de caducidad, una etiqueta de actualización puede definir una fecha de caducidad. Si esto se logra, los agentes de usuario, como los navegadores web y los rastreadores de motores de búsqueda, se redirigen a una URL predeterminada. Este ejemplo muestra una redirección a la página de inicio de IONOS que comienza 10 segundos después de la carga.
<meta http-equiv="refresh" content="10; url=http://www.ionos.com/"/>Dado que la etiqueta de actualización no funciona en algunas configuraciones del navegador web, el Consorcio World Wide Web (W3C) recomienda una realización del lado del servidor utilizando el código de estado HTML 301, en lugar de redirigir a través de metaetiquetas.
Espero que la estructura y etiquetas HTML de un sitio web establecido y optimizado haya sido de ayuda para tus futuras web o proyecto que tengan ejecución. Buena suerte a todos y hasta la próxima 👋…
Esta entrada tiene 0 comentarios