Metaetiquetas Google SEO - Title, description, keywords

Las metaetiquetas sirve para definir metadatos en el documento HTML, estos datos no son visualizados por el navegador, sino que tiene otro propósito.

Metaetiquetas Google SEO - Title, description, keywords | Aprender HTML | Las metaetiquetas sirve para definir metadatos en el documento HTML, estos datos no son visualizados por el navegador, sino que tiene otro propósito
COMPÁRTELO:

Las metaetiquetas son un modo perfecto para que los webmasters faciliten a los motores de búsqueda información sobre sus sitios. Estas pueden utilizarse para ofrecer información a todo tipo de clientes. Cada sistema procesa únicamente aquellas que entiende e ignora el resto. Las metaetiquetas se añaden a la sección <head> de su página HTML y normalmente tienen el aspecto siguiente:

La etiqueta <meta> sirve para definir datos ("metadatos") sobre el documento web o html, estos datos no son visualizados por el navegador, ya que se encuentran incluidos en la sección de encabezado y se suelen utilizar para establecer valores como palabras claves ("keywords"), descripción de la página, autor de la misma, última fecha de modificación, etc.

Estos datos son utilizados por los navegadores por ejemplo, para recargar la página o establecer valores de visualización de la misma.

Los buscadores suelen utilizar las keywords para establecer valores de búsqueda para la página, mientras que otros tipos de datos podrían ser utilizados por otros tipos de servicio web.

El formato de la etiqueta es el siguiente:


<meta atributo="valor" />

Entre los atributos a destacar podemos encontrar los siguientes:

Charset

Este atributo permite establecer el conjunto de caracteres que ha de utilizar el navegador para visualizar la información del documento HTML que se está representando.

La sintaxis para definir esta etiqueta con el atributo charset es la siguiente:


<meta charset="conjunto de caracteres" />

Los conjuntos de caracteres que más se suelen utilizar son UTF-8 y ISO- 8859-1, que se corresponden con la codificación Unicode y el juego de caracteres para el alfabeto Latín.

El siguiente ejemplo establece un juego de caracteres Unicode para el documento.


<!DOCTYPE HTML5>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
	</body>
</html>

name, content

Estos atributos permiten definir pares de datos, es decir un nombre de valor con su respectivo valor o contenido.

El atributo name sirve para establecer el nombre del dato que se quiere definir, mientras que content sirve para establecer el valor o contenido que se le quiere dar al dato.

Entre los datos que se suelen utilizar están application-name, author, description, generator y keywords.

name (“Nombre”) Descripción
application-name Se utiliza para definir el nombre de la aplicación de la
cual forma parte el documento web.
author Se utilizar para definir el nombre del autor del
documento web.
description Se utiliza para definir una descripción del documento
web, es utilizada por los motores de búsqueda, para
establecer resultados.
generator Se utiliza para especificar el nombre del programa con
el que se ha creado el documento web.
keywords Se utiliza para indicar una serie de términos o palabras
que sirven para establecer categorías en la cual el
documento web puede ser incluido. Suele ser utilizada
por los motores de búsqueda para establecer
búsquedas y categorías de los documentos.

El siguiente ejemplo muestra el uso de la etiqueta <meta> en conjunto con los atributos comentados anteriormente:


<!DOCTYPE HTML5>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="application-name" content="Ejercicios y prácticas 1.0">
		<meta name="author" content="Hugo Delgado">
		<meta name="description" content="Prácticas y ejercicios de HTML">
		<meta name="generator" content="disenowebakus.net">
		<meta name="keywords" content="ejercicios, practicas, programación, html, etc.">
	</head>
	<body>
	</body>
</html>

http-equiv

Este atributo se suele utilizar para especificar y simular atributos de cabecera del protocolo HTTP. Se utiliza estableciendo un valor para el atributo, al igual que el atributo anterior, entre los atributos se pueden destacar los siguientes: contenttype, default-style y refresh.

http-equiv Descripción
content-type Se utiliza para especificar el juego de caracteres de
codificación del documento.
default-style Se utiliza para especificar la hoja de estilos
preferida.
refresh Se utiliza para establecer un intervalo de refresco
del documento web, el cual será actualizado por el
navegador transcurrido el tiempo especificado.

El siguiente ejemplo muestra el uso de la etiqueta <meta> en conjunto con los atributos comentados anteriormente:


<!DOCTYPE HTML5>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="application-name" content="Ejercicios y prácticas 1.0">
		<meta name="author" content="Hugo Delgado">
		<meta name="description" content="Prácticas y ejercicios de HTML">
		<meta name="generator" content="disenowebakus.net">
		<meta name="keywords" content="ejercicios, practicas, programación, html, etc.">
		<meta http-equiv="refresh" content="400">
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	</head>
	<body>
	</body>
</html>

Etiqueta <BASE>

La etiqueta <base>, permite especificar una URL2 por defecto y un destino por defecto para todos los enlaces relativos del documento web. Es una etiqueta englobada dentro de la categoría de Contenido de Metadatos.

La etiqueta solo puede aparecer una única vez dentro del documento web y ha de situarse a continuación de la etiqueta de encabezado de documento <head>, siendo así la primera etiqueta del encabezado.

Se ha de tener en cuenta también, que es una etiqueta sin cierre, es decir no existe etiqueta de cierre de la misma y por tanto se utiliza el formato abreviado para cerrar la misma.

El formato de la etiqueta es el siguiente:


<base href="valor" target="valor" />

Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes:

href

Este atributo permite establecer la URL base para todas las URL’s relativas que existen en el documento web

La sintaxis para definir esta etiqueta con el atributo href es la siguiente:


<base href="valor URL" />

target

El atributo permite especificar el destino por defecto para todos los enlaces y formularios del documento web.

La sintaxis para definir la etiqueta con el atributo target es la siguiente:


<base href="valor" target="valor" />

Entre los posibles valores que se le pueden aplicar al atributo target, encontramos los siguientes:

Target Descripción
_blank Especifica que el destino sea una nueva ventana
del navegador, o una nueva pestaña.
_self Por defecto. Abre el destino en el mismo lugar
donde se haya realizado el clic.
_parent Abre el destino en un marco asociado.
_top Abre el destino ocupando todo el cuerpo de la
ventana.
Framename Abre el destino en el marco del cual se
especifica el nombre

El siguiente ejemplo muestra el uso de la etiqueta <base> en conjunto con los atributos especificados anteriormente:


<!DOCTYPE HTML5>
<html>
	<head>
		<base href="http://www.dominio.com/images/" target="_blank" />
	</head>
	<body>
	<img src="imagen.gif" width="24" height="39" alt="Stickman" />
	<a href="http://www.dominio.com">Enlace</a>
	</body>
</html>

Etiqueta <LINK>

La etiqueta <link>, permite realizar la carga y establecer la relación existente entre el documento web actual y un recurso externo. Esta etiqueta es normalmente muy utilizada para realizar la carga de hojas de estilo para el documento web.

Esta etiqueta comprendida en la categoría de Contenido de Metadatos, es una etiqueta de las denominadas “vacías”, es decir normalmente solo se especifica su etiqueta de inicio y no tiene ningún tipo de contenido, limitándose la información y configuración de la misma a los atributos de los cuales dispone.

La etiqueta se suele insertar en la sección de encabezado del documento web, aunque es posible encontrarla en otros sitios, al final del documento por ejemplo, lo más adecuado es situarla donde se ha indicado.

El formato de la etiqueta con todos sus atributos es el siguiente:


<link href="valor" hreflang="valor" media="valor" rel="valor" sizes="valor" types="valor" />

Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes:

href

Este atributo permite establecer la URL en la que se encuentra el documento el cual se quiere enlazar, con el documento web.

La sintaxis para definir esta etiqueta con el atributo href es la siguiente:


<link href="valor URL" />

hreflang

Este atributo permite establecer el lenguaje del documento que se está enlazando, aunque no realiza ninguna función especial en los navegadores, puede ser utilizado por los motores de búsqueda para establecer el idioma.

La sintaxis para definir esta etiqueta con el atributo hreflang es la siguiente:


<link href="URL" hreflang="Codigodelenguaje" />

El código de lenguaje se puede consultar utilizando la siguiente dirección de internet:

rel

El atributo sirve para especificar la relación existente entre el documento web y el documento con el que se está realizando el enlace. El atributo es obligatorio y se ha de incluir.

La sintaxis para definir esta etiqueta con el atributo rel es la siguiente:


<link href="URL" hreflang="CodigoLenguaje" rel="valor" />

Entre los posibles valores que se pueden aplicar al atributo rel se encuentran los siguientes:

Rel Descripción
alternate Especifica la relación del documento con una
versión alternativa del mismo. (Impresora,
Espejo, Traducida, Etc.)
author Especifica la relación del enlace con el autor del
documento con el que se enlaza.
help Especifica relación con el documento de ayuda.
icon Se utiliza normalmente para asociar un pequeño
icono con el documento web. Este icono suele
ser visible en la barra de dirección del
navegador.
license Especifica la información de copyright sobre el
documento web.
next Especifica que el documento web, es parte de
una serie de documentos, e indica que el
documento que enlaza es el siguiente en la
serie.
prefetch (prerender) Sirve para especificar desde el documento web
que se está cargando, cual es el próximo
documento web que se ha de cargar, de esta
forma el navegador solicita una petición de
cache, cargándose posteriormente la página
más rápidamente.
prev Especifica que el documento web, es parte de
una serie de documentos, e indica que el
documento que enlaza es el anterior en la serie
search Especifica que el enlace es a la utilidad de búsqueda en el documento
stylesheet El más utilizado, especifica que el documento con el cual se enlaza es una hoja de estilos a importar, que aplicara formato al documento web

Sizes

El atributo se utiliza solo en caso de haber especificado anteriormente en el atributo rel el valor icon, y permite especificar el tamaño del atributo con el cual se está enlazando, aunque es soportada por el lenguaje html5, los navegadores a fecha actual no la implementan.

La sintaxis para definir esta etiqueta con el atributo sizes es la siguiente:


<link rel="icon" href="demo_icono.gif" type="image/gif" sizes="16x16" />

Entre sus posibles atributos se pueden encontrar los siguientes:

Sizes Descripción
AnchoxAlto Se ha de especificar los valores de ancho y alto
insertando entre ellos el símbolo “x”, por
ejemplo 16x16, 32x32, se pueden insertar varios
tamaños separados por espacios en blanco.
“16x16 32x32”.
any Indica que el icono con el cual se enlaza es
escalable, como si de una imagen svg se tratara.

type

La sintaxis para definir esta etiqueta con el atributo types es la siguiente:


<link type="ValorMime" />

Entre los tipos se puede encontrar el de hoja de estilos como es “text/css”, o el de texto plano “text/plain”, etc.

media

Este atributo se ha modificado bastante en esta última versión del lenguaje, y aunque nos centraremos posteriormente más en el mismo, inicialmente servirá para indicar el tipo de dispositivo para el cual se está realizando el enlace.

La sintaxis para definir esta etiqueta con el atributo media es la siguiente:


<link rel="Valor" type="Valor" href="URL" media="valor" />

Entre los posibles valores de dispositivos que encontramos para el atributo media, se encuentran los siguientes:

Media Descripción
all Valor por defecto, especifica todo tipo de dispositivos.
aural Sirve para especificar que el dispositivo para el que se enlaza
es un sintetizador de voz.
braille Especifica un dispositivo de tipo braille.
handhelp Especifica un dispositivo de mano, de pantalla pequeña o
ancho de banda limitado.
projection Especifica un dispositivo de tipo proyector.
print Especifica un dispositivo de impresión.
screen Especifica un dispositivo de pantalla de pc.
tty Especifica un dispositivo de tipo teletipo, que utiliza
caracteres de tamaño fijo.
tv Especifica un dispositivo de tipo televisión.

Como se ha indicado anteriormente el atributo tiene muchas más opciones que se profundizaran en las mismas a lo largo del desarrollo del temario.

El siguiente ejemplo muestra el uso de la etiqueta <link> en conjunto con los atributos comentados anteriormente:


<!DOCTYPE HTML5>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="theme.css" hreflang="es" />
		<link rel="shortcut icon" href="/favicon.ico" />
	</head>
	<body>
	</body>
</html>

Google entiende las siguientes metaetiquetas (y elementos relacionados):

Metaetiqueta Descripción
<meta name="description" content="Descripción de la página" /> Esta etiqueta proporciona una descripción breve de la página. En algunos casos esta descripción se utiliza como parte del fragmento que se muestra en los resultados de búsqueda. 
<title>Título de la página</title> Aunque técnicamente no se trata de una metaetiqueta, se suele utilizar junto con la "descripción". El contenido de esta etiqueta suele mostrarse como el título de los resultados de búsqueda (y, por supuesto, en el navegador del usuario). 
<meta name="robots" content="..., ..." />
<meta name="googlebot" content="..., ..." />
Estas metaetiquetas pueden controlar el comportamiento del rastreo y la indexación del motor de búsqueda. La metaetiqueta robots se aplica a todos los motores de búsqueda, mientras que "googlebot" es específica de Google. Los valores predeterminados son "index, follow" (igual que "all") y no es necesario especificarlos. Google entiende los siguientes valores (si especificas varios valores, sepáralos con una coma):
  • noindex: impide que la página se indexe.
  • nofollow: impide que Googlebot siga enlaces de esta página.
  • nosnippet: impide que un fragmento se muestre en los resultados de búsqueda.
  • noodp: impide que se utilice la descripción alternativa de ODP/DMOZ.
  • noarchive: impide que Google muestre el enlace En caché de una página.
  • unavailable_after:[date]: te permite especificar la hora y la fecha exactas en que quieres detener el rastreo y la indexación de la página.
  • noimageindex: te permite especificar que no quieres que la página aparezca como la página de referencia de una imagen que se muestra en los resultados de la búsqueda de Google.

Ahora también se puede especificar esta información en la cabecera de las páginas mediante la directiva de cabecera HTTP "X-Robots-Tag". Esto resulta especialmente útil para limitar la indexación de archivos que no sean HTML, como archivos gráficos y otro tipo de documentos.

<meta name="google" content="notranslate" /> Cuando reconocemos que el contenido de una página no está en el idioma que el usuario podría querer encontrar, solemos proporcionar un enlace a una traducción en los resultados de búsqueda. En general, esto permite ofrecer un contenido único y convincente a un grupo de usuarios mucho mayor. Sin embargo, es posible que haya casos en los que no quieras utilizar esta opción. Esta metaetiqueta indica a Google que no proporcione traducción de esta página.
<meta name="google-site-verification" content="..." /> Puedes utilizar esta etiqueta en la página de nivel superior de tu sitio para demostrar la propiedad del mismo en las Herramientas para webmasters de Google. Recuerda que, aunque los valores de los atributos "name" y "content" deben coincidir exactamente con los datos que se te proporcionen (incluidas mayúsculas y minúsculas), no importa que cambies la etiqueta de XHTML a HTML ni que el formato de la etiqueta coincida con el de tu página. 
<meta http-equiv="Content-Type" content="...; charset=..." /> Esta metaetiqueta define el tipo de contenido de la página y el conjunto de caracteres. Asegúrate de delimitar el valor del atributo de contenido con comillas; de lo contrario, el atributo del conjunto de caracteres podría interpretarse de manera incorrecta. 
<meta http-equiv="refresh" content="...;url=..." /> Esta metaetiqueta dirige al usuario a una nueva URL después de un cierto período de tiempo y, a veces, se utiliza como una forma sencilla de redireccionamiento. Sin embargo, no es compatible con todos los navegadores y puede resultar confuso para el usuario. El W3C no recomienda el uso de esta etiqueta. En su lugar, Google sugiere el redireccionamiento 301 por parte del servidor.

Otras cuestiones destacadas:

  • Google puede leer metaetiquetas similares a HTML y XHTM, independientemente del código utilizado en la página.
  • Salvo en el caso de "verify", el uso de mayúsculas o minúsculas no suele importar en las metaetiquetas.

Metaetiquetas Google SEO - Title, description, keywords

Agregar metatgas en el encabezado head de HTML

Las metaetiquetas sirve para definir metadatos en el documento HTML, estos datos no son visualizados por el navegador, sino que tiene otro propósito.
🤖

ChatGPT Gratis
Realiza preguntas sobre cualquier tema

¡Participa!

¡Compártelo en tus Redes Sociales!
Compartir en:

CITAR ARTÍCULO


Para tareas, investigaciones, tesis, libros, revistas, blogs ó artículos académicos

Referencia en Formato APA:

Delgado, Hugo. (2018).
Metaetiquetas Google SEO - Title, description, keywords.
Recuperado 28 de marzo, 2024, de
https://disenowebakus.net/metaetiquetas.php

Profesor en la Universidad de Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Profesional en Desarrollo Web y Posicionamiento SEO desde hace más de 15 años continuos.
Contamos con más de 200 constancias y reconocimientos en la trayectoria Académica y Profesional, incluidos diplomados certificados por Google.

CONTINÚA APRENDIENDO

Menú categoría


Aprender HTML

TAMBIÉN MERECE LA PENA VISITAR:

¿Te gustaría aprender más sobre Diseño Web?

Conoce todos los cursos y tutoriales que tenemos para ti completamente gratis
Aprender Diseño Web

¿Todavía no encuentras lo que necesitas?

Usa nuestro buscador interno para descubrir más información
Contenido relacionado:

1 Comentario en "Metaetiquetas Google SEO - Title, description, keywords"

  1. Avatar usuario
    Sauftdev

    Que gran contenido! Aunque seria bueno comentar que la etiqueta keywords esta obsoleta por el abuso del uso de palabras claves en la mayoria de buscadores, también que el meta application-name es para aplicaciones y no para páginas web estáticas, y el meta generator se usa cuando el codigo es creado por un software como WordPress. Gracias por este gran aporte!

 

Deja tu Comentario

PATROCINADOR

Tu negocio también puede aparecer aquí. Más información
Anunciate aquí

Tu navegador ha bloqueado la publicidad.
Por favor 🙏 permite visualizar los anuncios para poder acceder, gracias.