Mejorar tu SEO con metaetiquetas HTML

York0x · 9 Nov 2023

Las metaetiquetas, etiquetas meta o elementos meta (también conocidas por su nombre en inglés, meta tags) son etiquetas HTML que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información.

Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc.

Fuente: https://es.wikipedia.org/wiki/Etiqueta_meta

No utilizar metaetiquetas en sus páginas web o utilizarlas incorrectamente puede tener un impacto negativo en el rendimiento y la visibilidad de su sitio web.

Estas son algunas desventajas comunes de no usar o usar metaetiquetas incorrectamente:

1- Menor visibilidad en los resultados de búsqueda: Si una página web no usa metaetiquetas o las usa incorrectamente, es posible que los motores de búsqueda no tengan la información que necesitan para indexar y categorizar adecuadamente el contenido de la página. Esto puede provocar una visibilidad reducida en los resultados de búsqueda, lo que puede afectar el tráfico y la visibilidad del sitio web.

2- Información inexacta o poco clara: Si las metaetiquetas no proporcionan información clara y precisa sobre el contenido de la página, los usuarios pueden tener dificultades para comprender el propósito de la página. Esto puede generar tasas de rebote más altas y reducir el tiempo de permanencia en la página.

3- Problemas de compatibilidad: Es posible que algunos navegadores o motores de búsqueda no admitan ciertos tipos de metaetiquetas o que las interpreten de manera diferente. El uso de metaetiquetas que no son compatibles con algunos navegadores o motores de búsqueda puede afectar la experiencia del usuario y la visibilidad del sitio.

Tipos de metaetiquetas

Metaetiquetas de descripción: Estas metaetiquetas proporcionan una breve descripción del contenido de la página y su propósito. Los motores de búsqueda utilizan esta información para mostrar descripciones en los resultados de búsqueda.

Metaetiquetas de palabras clave: Estas etiquetas contienen una lista de palabras clave relacionadas con el contenido del sitio web. Aunque los motores de búsqueda ya no lo utilizan tanto como antes, algunos todavía lo utilizan para indexar contenido.

Metaetiquetas de autor: Estas metaetiquetas muestran el nombre del autor de la página.

Metaetiquetas Robots: Estas metaetiquetas indican a los motores de búsqueda si deben indexar enlaces en la página.

Metaetiquetas de página de vista previa: Estas metaetiquetas contienen información sobre cómo se mostrará la página en los resultados. Esto puede incluir información sobre imágenes de vista previa y títulos de páginas.

Metaetiquetas de idioma: Estas metaetiquetas indican el idioma en el que está escrita la página.

Metaetiquetas de redirección: Estas metaetiquetas redirigen a los usuarios a una nueva página después de un período de tiempo.

Metaetiquetas más utilizadas

PHP:

<meta charset=»utf-8″>

Especifica la codificación de caracteres utilizada en la página.
Es importante utilizarlo para mostrar correctamente los caracteres especiales y las letras acentuadas en su página.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Puedes adaptar la página a diferentes dispositivos y tamaños de pantalla. Es importante que su sitio web se vea bien en dispositivos móviles y tablets.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»description» content=»Texto de descripción de la página.»>

Una breve descripción del contenido del sitio web. Es importante utilizarlo para que los motores de búsqueda muestren la descripción correcta de la web.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»keywords» content=»palabra clave 1, palabra clave 2, palabra clave 3, …»>

También contiene una lista de palabras clave relacionadas con el contenido del sitio web. Aunque los motores de búsqueda ya no lo utilizan tanto como antes, algunos todavía lo utilizan para indexar contenido.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»robots» content=»index, follow»>

Con la meta robots damos directrices para que indexen o no una página, o para que sigan o no los enlaces hacia otras páginas, impidiendo su rastreo.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»author» content=»Nombre del autor»>

Indica el nombre del autor de la página web.

Código PHP:

Insertar CODE, HTML o PHP:

<meta http-equiv=»refresh» content=»5; URL=https://www.ejemplo.com/»>

Redirigir al usuario a una nueva página después de un período de tiempo.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»theme-color» content=»#111111»>

Le permite especificar un color para la barra de herramientas del navegador y la barra de estado en dispositivos móviles.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»apple-mobile-web-app-capable» content=»yes»>

El sitio web se puede abrir en pantalla completa en los dispositivos iOS.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»apple-mobile-web-app-status-bar-style» content=»black»>

Describe el estilo de la barra de estado en dispositivos iOS cuando se muestra la página web en modo de pantalla completa.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»msapplication-TileImage» content=»path/to/tile-image.png»>

Especifica la imagen que se utilizará como icono de la aplicación en la pantalla de inicio de Windows.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»msapplication-TileColor» content=»#777777»>

Especifica el color de fondo del icono de la aplicación en la pantalla de inicio de Windows.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»og:title» content=»Título de la página»>

Defina el título que se utilizará al compartir la página en sitios de redes sociales como Facebook.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»og:description» content=»Descripción de la página»>

Descripción del contenido de la página que se utilizará cuando se comparta en redes sociales como Facebook.

Código PHP:

Insertar CODE, HTML o PHP:

<meta name=»og:image» content=»path/to/image.jpg»>

Imagen que se debe utilizar cuando se comparte la página en redes sociales como Facebook.

Ejemplo:

Código PHP:

Insertar CODE, HTML o PHP:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Esta es una descripción de mi página web">
<meta name="keywords" content="palabra clave 1, palabra clave 2, palabra clave 3, palabra clave 3">
<meta name="author" content="Mi nombre">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#000000">
<meta property="og:title" content="Título página web">
<meta property="og:description" content="Descripción de mi página web para redes sociales">
<meta property="og:image" content="path/to/image.jpg">
<title>Mi página web</title>
</head>
<body>
<!-- Contenido de la página  -->
</body>
</html>

Más información
https://developers.google.com/search/doc...tags?hl=es

Mejorar tu SEO con metaetiquetas HTML

York0x

Temas similares