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.
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. |
| 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):
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
ChatGPT Gratis
Realiza preguntas sobre cualquier tema
¡Participa!
¡Compártelo en tus Redes Sociales!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 13 de December, 2024, de
https://disenowebakus.net/metaetiquetas.php
CONTINÚA APRENDIENDO
TAMBIÉN MERECE LA PENA VISITAR:
Los comentarios HTML son visibles en el código fuente de la página para explicar código, pero no...
World Wide Web conocida como la Web, es un sistema de documentos de hipertexto vinculados entre si...
Este tutorial de Adobe Dreamweaver para principiantes le enseña cómo utilizar Dreamweaver para...
Tutorial para transferir su sitio Web con un cliente FTP, desde su computadora local a un servidor...
¿Todavía no encuentras lo que necesitas?
Usa nuestro buscador interno para descubrir más informaciónContenido relacionado:
1 Comentario en "Metaetiquetas Google SEO - Title, description, keywords"
Deja tu Comentario
PATROCINADOR
Tu negocio también puede aparecer aquí. Más información
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!