Mucha gente cree que el trabajo relacionado con HTML debería ser realizado exclusivamente por desarrolladores de software, ingenieros y programadores. Sin embargo, existe un debate sobre si los SEO, especialistas en marketing y diseñadores también deben conocer los conceptos básicos de programación.
Saber un poco de programación no significa que los diseñadores deban convertirse en programadores expertos, sino que simplemente entiendan la perspectiva del desarrollador. Por ejemplo, a la hora de construir edificios, es de gran ayuda saber no solo cómo construir la fachada, sino también la estructura interna. Lo mismo ocurre con los diseñadores que conocen la tecnología que ofrece su diseño. Este conocimiento expande sus opciones profesionales.
Entonces, la pregunta principal es ¿qué conocimiento técnico deben poseer los diseñadores? ¿Cuánto sobre HTML deberían saber?
El Lenguaje de Marcado de Hipertexto o HTML es el lenguaje de marcado que se utiliza en la documentación de las páginas web para que los navegadores sepan qué elementos contiene y cuáles deben aparecer en la pantalla.
Pero, ¿qué parte del HTML es importante para el diseño y el SEO?
Explora una lista de etiquetas HTML que te ayudarán a comprender todo lo que pasa detrás del diseño de una página web.
1º. Estructura el texto en secciones con las etiquetas heading (h1-h6)
El contenido digital está elaborado de tal manera que facilita la comprensión tanto a las personas como a los motores de búsqueda. Esto da como resultado que el texto tenga un título y se divida en bloques semánticos con una lógica similar, con cada bloque obteniendo su propio título. En HTML, estas etiquetas especiales se conocen como “encabezados”. Mira el encabezado en la siguiente imagen de texto:
El HTML utiliza 6 niveles de encabezado, que van de h1 hasta h6. El nivel de encabezado principal es el <h1> y con mayor frecuencia se puede encontrar encima del cuerpo del texto. Todos los demás encabezados, de h2 a h6, deben respetar el principio de jerarquía. Ten en cuenta que la etiqueta <h1> solo debe ser usada una vez en una página en la mayoría de los casos.
A continuación, se muestra un ejemplo del código HTML de la etiqueta de encabezado:
<h1>Los tipos de carácter y sus características</h1>
<p>Si bien hoy en día el carácter se analiza menos puesto que se engloba en la personalidad, la cual tiende a ser más sencilla de estudiar. Realmente es complicado descartarlo ya que son dos cosas diferentes: el carácter es la base de la personalidad.</p>
<h2>Tipos de carácter y sus características</h2>
<p>Con el fin de reconocer con más facilidad los tipos de carácter que existen actualmente, se hace uso de la combinación de la emotividad, la actividad y la primariedad/secundariedad, los cuales conforman los factores del carácter.</p>
Importancia de las etiquetas heading para el SEO
Para fines de SEO, asegúrate de usar solo una etiqueta de encabezado h1 en una página y asegúrate de ceñirte al principio de jerarquía. También hay que señalar que los encabezados y los títulos de las páginas no son lo mismo. Mientras que los títulos aparecen en los fragmentos del navegador, los encabezados solo se muestran en las páginas web. El objetivo principal de las etiquetas de encabezado es describir las secciones del texto que vienen después de ellas.
Importancia de las etiquetas heading para el diseño
Los encabezados hacen que el texto se pueda escanear y sea más fácil de entender para los lectores humanos. De lo contrario, la gente simplemente vería largas hojas de texto en páginas lo que haría extremadamente difícil leerlas sin interrupciones lógicas.
Describe el contenido de la página con la etiqueta title
La etiqueta <title> se diseñó para ayudar a las personas y a los motores de búsqueda a comprender de qué se trata una página web. Puedes verla en los resultados de búsqueda como encabezados en los que se puede hacer clic.
La función de esta etiqueta es describir el contenido de la página de una manera breve y clara para que las personas sientan curiosidad por hacer clic y obtener más información. En una página de resultados de búsqueda (de Google, por ejemplo) el título asignado por la etiqueta <title> se vería como ves en los recuadros verdes de la siguiente imagen:
A continuación, se muestra un ejemplo del código HTML de la etiqueta <title>:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
</body>
</html>
Importancia de las etiquetas title para el SEO
Para los motores de búsqueda, las etiquetas de título ayudan a comprender mejor el tema de la página. Debe verse como una de las formas más importantes en que puedes informar a los motores de búsqueda sobre lo que se trata tu página. Escribir un título atractivo junto con una descripción te ayudará a generar más tráfico a tus páginas. Ten en cuenta que la etiqueta title no se muestra en la página en sí, sino que solo aparece en los fragmentos de las SERP.
Importancia de las etiquetas title para el diseño
Además de aparecer en los fragmentos de la página, las etiquetas de título también se muestran en las pestañas del navegador para informar rápidamente a los usuarios qué páginas están abiertas. Además de eso, las etiquetas de título se utilizan como texto de anclaje cuando publicas enlaces en las redes sociales, a menos que se utilice el marcado Open Graph.
Para evitar el truncamiento de la etiqueta title, limítate a una longitud de entre 60 y 70 caracteres. Los motores de búsqueda cortan cualquier texto que supere los 600 píxeles de longitud.
Proporciona información adicional sobre la página con la etiqueta meta descripción
Técnicamente, la etiqueta meta descripción es un atributo que se utiliza junto con la etiqueta <meta>. Similar a la etiqueta title, brinda una descripción textual más detallada del contenido de la página y también se muestra en los resultados de búsqueda justo debajo de la etiqueta del título:
A continuación, se muestra un ejemplo del código HTML de la meta descripción:
<meta name="description" content="Caracterología criminal: clasificación de caracteres · 2. Carácter apasionado (emotivo, activo, secundario)">
Importancia de la meta descripción para el SEO
Aunque el texto de la etiqueta de descripción no tiene un impacto directo en el aumento del ranking, puede, sin embargo, impulsar tu tasa de clics (CTR), que en gran medida es considerada por los motores de búsqueda como una señal de posicionamiento positiva.
Importancia de la meta descripción para el diseño
Además de brindar información adicional sobre la página a los motores de búsqueda, las etiquetas de descripción brindan a los redactores de contenido la posibilidad de crear textos que capten la atención de los internautas para que hagan clic en el fragmento de tu página en los resultados de búsqueda. Ten en cuenta que la descripción debe tener cualidades para hacer clic y así despertar interés. Sin embargo, debe señalarse que los motores de búsqueda reemplazarán el texto que proporciones con partes del contenido que ellos consideren más relevantes para la consulta del buscador.
Comprueba tus encabezados, títulos y descripciones
De vez en cuando, te encontrarás con situaciones en las que tus páginas tendrán inconsistencias con los datos de tu meta descripción. Por ejemplo, es posible que te falte un título, una descripción o un encabezado, que sean demasiado cortos o largos, que tengas más de una meta descripción en una página o duplicados en tu sitio web, o que te hayas olvidado de incluir la palabra clave.
Afortunadamente, hay una serie de herramientas especializadas en el mercado que puedes utilizar para mantenerte al tanto de los títulos, descripciones, encabezados y otros metadatos de tu página. Por ejemplo, con la ayuda de la herramienta de Auditoría SEO On-page de SE Ranking, puedes profundizar en páginas específicas y descubrir qué tan bien están optimizadas para tus palabras clave objetivo. Además de eso, obtendrás un desglose detallado de todo lo que está mal en tus páginas desde una perspectiva técnica y podrás solucionar los problemas que impiden que tus páginas obtengan mejores rankings.
Crea enlaces con la etiqueta <a>
Para definir hipervínculos que enlacen de una página a otra, usa la etiqueta <a>. En otras palabras, siempre que veas un hipervínculo estándar en una página, contiene la etiqueta <a>.
A continuación, se muestra un ejemplo del código HTML de la etiqueta <a>:
<a href=”www.website.com”> texto de anclaje del enlace </a>
Y una vez que este código esté activo y colocado dentro del contenido, verás un hipervínculo que tiene un aspecto similar a este (no hay enlace en esta ocasión):
Ten en cuenta que en el código, podemos ver que también está el atributo href=. Este atributo define a qué página se enlaza el hipervínculo.
Importancia de la etiqueta <a> para el SEO
La importancia de esta etiqueta para el SEO es bastante sencilla: le dice a los motores de búsqueda a qué página(s) se enlaza tu contenido y explica brevemente de qué se trata esa página o páginas usando el texto de anclaje.
A su vez, los textos de anclaje permiten que los motores de búsqueda sepan de qué se trata la página vinculada. Por lo tanto, siempre que te enlaces a cualquier otra página web, puedes aprovechar esta oportunidad para compartir información adicional con los motores de búsqueda sobre el tema de la página enlazada.
Importancia de la etiqueta <a> para el diseño
En términos de diseño, la etiqueta <a> simplemente resalta los enlaces en la página, lo que les permite a los usuarios saber que pueden hacer clic en un fragmento de texto en el contenido de la página y serán redirigidos a otra página que contenga más información. Asegúrate de utilizar un texto de anclaje claro y conciso en tus hipervínculos para dejar claro a las personas y a los motores de búsqueda de qué se trata la página vinculada.
Define la versión de la página principal usando la etiqueta canonical
La etiqueta canonical es en realidad un atributo de la etiqueta <link> que indica qué página web debe considerarse como la versión principal de la página; sin embargo, pueden existir copias online.
A continuación, se muestra un ejemplo del código HTML del atributo canonical:
<link rel="canonical" href="https://www.website.com/" />
Aquí podemos ver que el sitio web de ejemplo se indica como la versión principal de la página vinculada y se muestra después del atributo href =.
Importancia de la etiqueta canonical para el SEO
Desde el punto de vista del SEO, las etiquetas canónicas ayudan a impulsar y promover páginas web específicas en la búsqueda orgánica. En el proceso, también evitas que las copias de la página se posicionen en la búsqueda. Lee lo que Google tiene que decir sobre los enlaces canónicos.
Importancia de la etiqueta canónica para el diseño
Esta etiqueta no tiene ningún aspecto de diseño aparte del hecho de que los usuarios no verán páginas web que no sean para ellos. Desde la perspectiva de la experiencia de usuario, evita que los buscadores se distraigan y se desvíen del curso.
Comprueba tus etiquetas <a> y canonical
Ten en cuenta que hay una serie de herramientas y extensiones para el navegador en el mercado, como SEO Minion, que puede ayudarte a mantenerte al tanto de tus etiquetas <a>, canonical y cualquier otro tipo. La extensión está disponible en Chrome Web Store y te mostrará información sobre todos los enlaces en la página web necesaria, así como si tienes una etiqueta canónica adecuada.
Incluye datos estructurados en el diseño del sitio web
Los datos estructurados, a menudo denominados schema markup, son un vocabulario semántico de etiquetas que utilizan los motores de búsqueda. Se pueden agregar al código HTML para que sea más fácil para los motores de búsqueda leer y mostrar tu página web en los resultados de búsqueda.
A continuación, se muestra un ejemplo de cómo se ven los datos estructurados:
<div itemscope itemtype = "https://schema.org/Book">
<span itemprop="name"> Todo lo Que Necesitas Saber Sobre el Schema Markup</span>
<span itemprop="autor">John Appleseed</span> </div>
Los datos estructurados surgieron como resultado del trabajo mutuo entre Google, Bing, Yahoo! y Yandex. Estos grandes motores de búsqueda tenían como objetivo ayudar a los creadores de sitios web a proporcionar información que les permitiera comprender mejor el contenido y relacionar las páginas web con las consultas correctas de los usuarios.
Importancia de los datos estructurados para el SEO
Por el momento, no hay pruebas claras de que los datos estructurados mejoren el posicionamiento. Sin embargo, hay indicios de que los resultados de búsqueda que tienen fragmentos enriquecidos muy largos y utilizan schema tienen una tasa de clics más alta en las SERP. Lo ideal es querer jugar con el schema markup para ver cómo responde tu público objetivo a cada pequeño ajuste.
Otro beneficio es que los motores de búsqueda pueden indexar el contenido estructurado con mayor precisión y, si el schema markup está en su lugar, mostrar mejores resultados en la búsqueda.
Importancia de los datos estructurados para el diseño
Antes de comenzar a trabajar en una nueva página web, asegúrate de tener en cuenta el schema markup. Después de todo, es mucho trabajo y sería una pena si tus desarrolladores o SEO te dicen que comiences tu trabajo de diseño desde cero.
La importancia de aumentar el CTR no solo trae beneficios al SEO, sino que atrae a las personas a interactuar más con tus resultados en la búsqueda. Además, los resultados enriquecidos se destacan en las SERP.
Para asegurarte de que los datos estructurados estén configurados correctamente en tu sitio web, puedes probarlos de forma gratuita utilizando Schema Markup Validator.
Controla las áreas visibles de la página con la meta etiqueta viewport
Esta meta etiqueta te brinda la libertad de controlar la ventana gráfica (área visible de la página), el ancho y la escala con el objetivo de mostrarla con precisión en todas las pantallas.
A continuación, se muestra un ejemplo del código HTML de la meta etiqueta viewport:
<meta name="viewport" content="width = device-width, initial-scale=1.0">
Estos datos ayudan a los navegadores de los motores de búsqueda a obtener la información que necesitan para controlar las dimensiones y la escala de la página. El código asegura que el ancho de la página siempre coincidirá con el ancho de la pantalla en el dispositivo del usuario.
A continuación, se muestra un ejemplo de cómo se ve en la práctica:
Importancia de la meta etiqueta viewport para el SEO y el diseño
Hoy en día, la usabilidad de un sitio web juega un papel determinante en el ranking de búsqueda. Si una persona visita un sitio web que no está optimizado, definitivamente lo abandonará de inmediato. Esto no solo representa una mala experiencia de usuario, sino que también aumenta la tasa de rebote, lo que envía una señal negativa a los motores de búsqueda.
Proporciona más información y enlaces en la página utilizando la etiqueta footer
Por lo general, el footer se encuentra en la parte inferior de todas las páginas de un sitio web y proporciona a los visitantes enlaces a todas las áreas del sitio que necesitan.
A continuación, se muestra un ejemplo sencillo del código HTML de la etiqueta footer:
<!DOCTYPE html>
<html>
<body>
<h1>El elemento del footer</h1>
<footer>
<p>Autor: John Appleseed <br>
<a href="mailto:john@example.com"> john@example.com </a> </p>
</footer>
</body>
</html>
En general, la etiqueta footer contiene datos sobre derechos de autor, autoría, información de contacto, enlaces a documentación y páginas web relacionadas, enlace de regreso al principio y, a veces, un mapa del sitio.
Importancia de la etiqueta footer para el SEO
La etiqueta footer brinda una mejor navegación por el sitio web, así como una estructura más ordenada de los enlaces internos. Para los motores de búsqueda, su objetivo principal es definir la sección del footer en un sitio web. El footer también contiene muchos enlaces que te brindan la oportunidad de que los motores de búsqueda sepan cuáles son tus páginas más importantes.
Importancia de la etiqueta footer para el diseño
El footer ayuda a las personas a obtener rápidamente la información que necesitan porque muchos de nosotros nos hemos acostumbrado a ver el footer y sabemos cómo funciona. Por eso, cuando las personas se pierden en un sitio web, a menudo se desplazan hasta el footer para encontrar lo que buscan. Los usuarios de hoy en día lo ven como una forma de saber que han llegado al final de la página.
Crea barras laterales con la etiqueta aside
Para definir un bloque separado en el costado de una página web que contenga encabezados, enlaces y otros datos, usa la etiqueta <aside>. A menudo denominadas como barras laterales, las secciones marcadas con la etiqueta <aside> pueden contener notas, anuncios, etc.
El manual de mejores prácticas sugiere que el elemento aside no contenga información que esté directamente vinculada al contenido de la página en la que se encuentra.
A continuación, se muestra un ejemplo del código HTML de la etiqueta aside que se utiliza en una página:
Importancia de la etiqueta aside para el SEO
Esta etiqueta proporciona a los motores de búsqueda ayuda para obtener rápidamente en sus manos virtuales información valiosa de la página, como el autor, las vistas y la fecha. Además, te da la oportunidad de presentar contenido adicional adjunto en una página que no sólo es relevante para un artículo, sino para todo el sitio web. Con estos datos, los motores de búsqueda pueden estudiar el entorno de la página para comprender el tema general y específico y hacer coincidir la página con las consultas de los usuarios.
Importancia de la etiqueta aside para el diseño
La etiqueta aside simplemente crea una barra lateral. Desafortunadamente, no muestra nada en la pantalla que los usuarios puedan ver. La buena noticia es que se puede diseñar con CSS.
Ingresa al Cuadro de Respuestas de Google usando las etiquetas <table>, <ul>, <ol>
Además de organizar la información de la página, las listas y tablas también te ayudan a ingresar al cuadro de respuestas de Google. Por ejemplo, cuando buscamos en Google "comparación de tarjetas de video", obtenemos el siguiente Cuadro de Respuesta con una tabla:
Aquí está el código HTML de la tabla que obtenemos cuando miramos lo que hay detrás de esa página:
Analicemos todas las abreviaturas y códigos para descubrir cómo usar las etiquetas <table>, <caption>, <tr>, <td> y <th> correctamente:
- <table> define el contenido y la estructura. Todos los demás elementos deben usarse dentro de la etiqueta <table>.
- <caption> es el título de la descripción de la tabla.
- <tr> es la fila de la tabla.
- <td> es la celda estándar de la tabla.
- <th> es la celda del encabezado.
Ahora veamos las listas. Son concisas, claras y brindan instrucciones paso a paso que también pueden ayudar a que la página ingrese al Cuadro de Respuestas.
A continuación, se muestra un ejemplo de códigos HTML de lista desordenados (<ul>) y ordenados (<ol>):
<ul>
<li> Elemento desordenado </li>
<li> Un elemento más de la lista </li>
</ul>
<ol>
<li> Elemento ordenado </li>
<li> Un elemento más de la lista </li>
</ol>
Nuevamente, veamos qué significa el código y cómo usarlo de la manera correcta:
- <ul> es una lista desordenada (con viñetas).
- <ol> es una lista ordenada.
- <li> es el valor de un elemento de la lista.
Importancia de las tablas y listas para el SEO
Para ingresar al Cuadro de Respuestas, es mejor usar tablas y no listas debido al hecho de que el primero permite que los motores de búsqueda obtengan datos de la tabla y, en última instancia, posicionen mejor al contenido.
Importancia de las tablas y listas para el diseño
Con la ayuda de atributos, puedes personalizar las tablas. Al igual que con cualquier elemento de la página que proporciona estructura al contenido, las tablas y listas hacen que el contenido sea más escaneable y más fácil de leer no solo para los motores de búsqueda, sino también para las personas.
Familiarízate con la programación para impulsar tu carrera de diseñador
Los diseñadores que quieren aprender más sobre el mundo de la programación se abren a sí mismos muchas puertas. El conocimiento técnico que es la fuerza impulsora detrás de las soluciones modernas es una gran ventaja para cualquier diseñador.
Por eso, la conclusión es que los diseñadores no tienen que saber de programación, pero definitivamente ayuda y los convierte en un gran activo para cualquier equipo involucrado en el desarrollo tecnológico. Con todo definitivamente avanzando hacia la tecnología, conocer los conceptos básicos del código HTML ayudará a los diseñadores a recorrer un largo camino.
Photo by Andy Holmes on Unsplash
