NorfiPC
NorfiPC » Diseño Web » Elementos del codigo HTML

Como usar las etiquetas o metatags en el código HTML de las páginas web

Elementos que se encuentran en el área del HEAD o encabezado de las páginas, papel e importancia de cada uno para su correcto funcionamiento. Listado de todos los que se pueden utilizar.
Usar las etiquetas o metatags en el código HTML de las páginas web En las páginas web, los elementos incluidos en el área del encabezado o HEAD (área entre las etiquetas <head> y </head>) no se muestran al usuario, contienen toda la información necesaria para la correcta representación de dicha página por el navegador web.
En esta área se encuentran los meta tags o etiquetas, contienen datos para cualquier tipo de aplicación o de clientes que accedan al archivo.
Cada sistema procesa únicamente aquellas que entiende e ignora el resto.
Algunos de estos elementos son determinantes en el posicionamiento de dicha página en los motores de búsquedas.
En este encabezado también se encuentran vínculos que hacen referencia a archivos externos necesarios para su correcto funcionamiento y representación.
Además, ocasionalmente se sitúan scripts necesarios de cargar por el navegador, antes que el resto del contenido de la página.

La información que contiene este artículo fue escrita originalmente refiriéndose solo a la especificación XHTML. Posteriormente, debido al auge y el uso de HTML5 en las páginas web, se hizo necesario actualizarlo, para eso se respetó el artículo original y se incluyó una sección que contiene la información necesaria.
Puedes acceder directamente a dicha sección en el siguiente vínculo.
Como usar los elementos y etiquetas o metatags en HTML5

Elementos en el área del encabezado o HEAD de una página web


» Declaración del tipo de documento
» Elemento raiz html
» Título.
» Meta tags o etiquetas
» Enlaces a archivos externos
» Scripts online o integrados en el codigo html



DOCTYPE, declaración del tipo de documento


El primer elemento que se encuentra en la estructura del código html, es el DOCTYPE o la declaración del tipo de documento, le indica al navegador la versión y tipo de HTML empleado en el documento. De esta forma, el navegador usará el modelo de renderización adecuado al tipo de documento.
En el actual estándar XHTML utilizado ampliamente, es posible establecer tres tipos diferentes de documento, es muy recomendado el Transitional para proporcionar adecuada compatibilidad.
Strict: establece que el documento debe tener estar conformado de acuerdo con las reglas del estándar de una forma estricta.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional: Además de incluir los elementos y atributos del HTML permite algunos elementos y atributos antiguos que están en desuso, de esta forma se le brinda apoyo a navegadores que soportan mal las CSS y se dispone de más flexibilidad a la hora de escribir el código.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset: Es una variación del Transitional para aquellos documentos que utilicen frames o marcos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
La lista completa con las otras especificaciones léelo en: Recommended list of Doctype declarations



Elemento raíz HTML


A continuación se encuentra el elemento raíz del documento, que tiene que ser la etiqueta html.
Delimita el documento HTML, indicando al navegador el comienzo y fin de la página html. En una página sencilla solo se necesitará encerrar el contenido entre los tags
<html></html>.
Para validar la página en el formato xhtml es necesario que tenga un formato similar al siguiente:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
CONTENIDO PAGINA
</html>

Elemento Título de la página


<title>Título de la página</title>
Lógicamente el título de la página es el primero y más importante de los elementos que proveen información sobre el contenido y permiten identificar la misma, aparece en la parte superior del navegador y en los resultados de cualquier búsqueda efectuada se muestra como el título.
Es el primer factor a tener en cuenta a la hora de optimizar la página web para su posicionamiento en los motores de búsquedas o buscadores, método conocido como SEO, siglas en inglés de "optimización de motores de búsqueda" (Search Engine Optimization).
Se deben usar en el titulo palabras escogidas que representen exactamente el contenido de la página. Debe contener un máximo de 70 caracteres, incluyendo los espacios, en caso de sobrepasarse esta cantidad se mostrará incompleto en los resultados de búsquedas, no se deben usar caracteres especiales como acentos, letras ñ u otros en nuestro idioma.
A la hora de escoger el título de una página utiliza un snippet como el siguiente, que indica la cantidad exacta de caracteres a medida que se vayan introduciendo y facilita aprovechar ese reducido intervalo disponible y al mismo tiempo no rebasar el límite establecido.

Snippet para optimizar el título de una pagina web


70
El máximo número de caracteres en el título es 70




Meta tags o etiquetas


Meta etiqueta Description

<meta name="description" content="Descripción de la página" />
La etiqueta "description" como su nombre indica contiene una descripción breve del contenido de la página. Generalmente esta descripción se muestra en los resultados de búsqueda a continuación del título, por lo que debe contener en pocas palabras un breve resumen del contenido de la página, bien redactado puede incitar y convencer al usuario a dar clic en el vínculo.
El máximo de caracteres que se pueden emplear en la descripción es de 156.
De la misma forma que en el título, utiliza el snippet a continuación para optimizar el contenido de la etiqueta description.

156
El máximo número de caracteres en la descripción es 156

Puedes usar el snippet Google SERP Snippet Optimization Tool que permite opciones más avanzadas, disponible en: www.seomofo.com


Meta etiqueta Content-Type

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Esta etiqueta define el tipo de contenido de la página y la codificación de caracteres a utilizar en la misma. La anteriormente indicada es la necesaria a utilizar en páginas que se encuentren en idioma español, ya que permite utilizar caracteres especiales de nuestro idioma como por ejemplo, acentos, letras ñ, ü, signos ¿, ¡, etc.

Meta etiqueta content-language

<meta http-equiv="content-language" content="es" />
Idioma empleado en la página.

Meta etiqueta Robots

<meta name="robots" content="..., ..." />
Esta etiqueta controla y define como es indexada de la página por los buscadores o motores de busquedas.
Los valores predeterminados son "index, follow" (igual que "all"), significan indexar el contenido de la página y seguir todos los enlaces que se encuentran en la misma, no es necesario especificarlos si vas a utilizar esos parámetros en tu página, en caso de que no sea así utiliza:
noindex: impide que la página se indexe.
nofollow: impide que los buscadores sigan los enlaces de esta página.
En el caso de Google entiende los siguientes valores, si se especifican varios valores, deben estar separados con una coma, utiliza para ellos la etiqueta:
<meta name="googlebot" content="...">  
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]: le permite especificar la hora y la fecha exactas en que desea detener el rastreo y la indexación de la página.
noimageindex: le permite especificar que no desea 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.


Uso del valor nofollow en vínculos u enlaces de la página

El valor nofollow es posible utilizarlo de forma selectiva en enlaces o vínculos aislados que se encuentren en toda la estructura de la página mediante la etiqueta rel=nofollow, este método es usado para impedir que fluya el Pagerank de determinada página a la que apunta el enlace.
Ha sido introducido su uso por Google y solo tiene efecto con ese buscador, su objetivo original es bloquear el spam en los comentarios en los blogs.
Además puedes emplearlo para bloquear link o vínculos, ya sea que apunten a otras páginas en el mismo sitio o al exterior, en el caso que consideres que afectan la fluidez del Pagerank actual de tu pagina en otros links que si son de tu conveniencia. Úsalo de la siguiente forma:
<a href="pagina.html" rel="nofollow" >Vínculo</a>
Mas información sobre el empleo del atributo rel="nofollow", se puede encontrar en la siguiente página:

Meta etiqueta notranslate

<meta name="google" content="notranslate" />
Esta etiqueta indica a Google que no proporcione un vínculo a la traducción automática de esta página.

Meta etiqueta google-site-verification

<meta name="google-site-verification" content="..." />
Se utiliza solo en los casos que es necesario demostrar la propiedad de autor la página en las "Herramientas para webmasters de Google".

Meta etiqueta Refresh

<meta http-equiv="refresh" content="20;URL=indice.htm" />
Esta etiqueta dirige al usuario a una nueva URL después de un cierto período de tiempo, a veces, se utiliza como una forma sencilla de re direccionamiento. En el ejemplo anterior se direcciona al usuario después de 20 segundos a la página indice.htm.
Este método no es compatible con todos los navegadores y puede generar confusión e incertidumbre en el usuario.
No se recomienda el uso de esta etiqueta. Google sugiere en su lugar utilizar el re direccionamiento 301 en el servidor.
Para realizarlos en sitios web alojados en servidores que utilicen Apache, será necesario tener acceso al archivo .htaccess del servidor.

Meta etiqueta Canonical

<link rel="canonical" href="http://norfipc.com/web/usar-metatags-importancia.html" />
Etiqueta usada para evitar que seamos sancionados por contenido duplicado e indicarle a Google y los otros buscadores la dirección URL de la página principal.
Es necesario utilizarla cuando el mismo contenido es servido desde direcciones URL diferentes ya sea debido a páginas diseñadas para imprimir, que estén en otro subdominio u otra razón.
También si nuestro sitio es servido usando una red CDN, en esos casos una misma página aparece con direcciones diferentes y trae como consecuencia una pérdida del posicionamiento.

Meta etiqueta Viewport

Ajusta el contenido de la página a la pantalla de un teléfono celular Smartphone o de una tableta.
Es importantísima para lograr que nuestras páginas se vean correctamente en cualquier tipo de dispositivo que use el usuario, para acceder a nuestros sitios web.
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
Hasta aquí las etiquetas que Google entiende y toma en consideración, existen otras factibles de utilizar que Google simplemente ignorará, pero otros buscadores aun reconocen y permiten optimizar el contenido de la página.

Las principales etiquetas o metatags usadas en HTML5


En la siguiente imagen se muestra el código usado en el área del HEAD de una página de nuestro sitio.
Se pueden ver las principales etiquetas y el uso de cada una de ellas.
La página de ejemplo usa HTML 5, la principal diferencia está en la declaración más corta y que no es necesario cerrar las etiquetas al final.
Las principales etiquetas o metatags usadas en HTML


Otras etiquetas que aun se pueden emplear


Meta etiqueta Keywords


Esta etiqueta hasta hace poco era de las determinantes para posicionar una página en un buscador, actualmente es ignorada completamente por Google, otros motores de búsquedas con algoritmos no tan sofisticados puede ser que la utilicen aun.
Especifica las keywords o palabras claves presentes en la página, que describen el contenido de la misma. Se deben utilizar las más importantes separadas por comas.
Ejemplo:
<meta name="keywords" content="internet, paginas web, apache, google"/>

Meta etiqueta Author

El autor de la página:
<meta name ="author" content ="Norfi Carrodeguas"/>

Meta etiqueta Date

La fecha de creación:
<meta name ="date" content ="July 30, 2010"/>

Meta etiqueta Expires

La fecha en la que expira una página:
<meta http-equiv ="expires" content= "thu, 31 DEC 2010 00:04:00 EST"/>

Meta etiqueta Cache-Control

Evita que la página web sea cargada al cache por el servidor o el navegador:
<meta http-equiv ="Cache-Control" content ="no-cache"/>

Meta etiqueta Generator

Indica el programa que se utilizó para generar la página web:
<meta name="generator" content="programa, nombre y version"/>

Meta etiqueta Window-target

Se usa para mantener la página web fuera del marco (frame).
<meta http-equiv ="Window-target" content="_top"/>
Para evitar que una página se muestre dentro de un frame, en content podemos usar: _top para indicar que se muestre en la página completa, no dentro de un frame,
_blank para que se muestre en una nueva ventana
<meta http-equiv="Window-target" content="_top"/>

Etiquetas SEO que permite Bing


Bing recientemente ha introducido dos etiquetas extras para usar por los webmaster, que permiten sugerir en qué lugar de los resultados de las búsquedas debe aparecer una página y por encima de que sitios web.
Son llamadas etiquetas SEO y solo son aceptadas por el buscador Bing y Yahoo.
Son las siguientes:
<link rel="SEO" query="trucos" set_to_position="1" />
<link rel="SEO" must_be_before="*.mi.competidor.com/*" />
Mas informacion en: http://ie.microsoft.com/


Enlaces a archivos externos


Permiten referenciar archivos externos necesarios de ser cargados antes que el resto del contenido de la página para su correcto funcionamiento y representación.

Enlaces o vínculos a hojas de estilo CCS
<link rel="stylesheet" media="all" type="text/css" href="ruta al archivo.css" />

Enlaces o vínculos a librerias de codigo Javascript externo.
<script type="text/javascript" src=" ruta al archivo.js" ></script>

Enlaces o vínculos a un icono o favicon.
<link rel="shortcut icon" href="ruta al favicon.ico" />

Enlaces o vínculos al archivo que contiene las fuentes rss.
<link rel="alternate" title="RSS" href=" ruta al archivo.rss" type="application/rss+xml" />



Scripts online o integrados en el código HTML


Scripts impregnados en el contenido del código html de la página, solo se deben de usar en casos imprescindibles ya que el navegador no continuará con la carga del contenido de la página hasta que no se termine de cargar completamente el script.
Son utilizados los siguientes:
<style type="text/css" media="screen">
...estilo css que establece como se mostrará la página en el navegador....
</style>

<style type="text/css" media="print">
...estilo css que establece como se mostrará la página al imprimirse....
</style>

<script type="text/vbscript">
...CONTENIDO CODIGO VBSCRIPT...
</script>

<script type="text/javascript">
...CONTENIDO CODIGO JAVASCRIPT...
</script>

En caso de que existan caracteres en el código javascript sin escapar por ejemplo: " &, <, > " y otros que impidan que la página se valide correctamente, es necesario encerrar el código de la siguiente forma:
<script type="text/javascript">
<![CDATA[
....CONTENIDO CODIGO JAVASCRIPT....
]]>
</script>


Como usar los elementos y etiquetas o metatags en HTML5


Usar HTML5 en las páginas web El uso de HTML5 supone cambios en la sintaxis a emplear, pero pocos, simplificando y facilitando el código.
Los cambios son los siguientes:

DOCTYPE, declaración del tipo de documento.


Solo es necesario utilizar el siguiente Doctype para declarar el documento:
<!DOCTYPE html>

La raíz html, el tipo de contenido de la página, la codificación a emplear y el lenguaje se pueden definir todos de la siguiente forma:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

El resto de las etiquetas o meta-tags que se incluyen en el área del HEAD son casi los mismos, pero con la diferencia de que no se pueden cerrar al final.
Se usan de la forma siguiente:
<meta name="Description" content="Descripción de la página">
<meta name ="author" content ="Nombre de autor">
<meta name="Robots" content="index, follow">
<link rel="shortcut icon" href="ruta-favicon.ico">
<link rel="alternate" title="RSS" href="ruta-RSS" type="application/rss+xml">
➔ La Meta etiqueta "Date" ya no se admite.
➔ La Meta etiqueta "Refresh" no es bien vista por los buscadores y no se debe emplear.

Adicionalmente a los cambios anteriores, HTML5 introduce nuevos elementos y algunos quedan totalmente obsoletos.
Más información en la siguiente página.
Cómo y por qué usar HTML5 en las páginas web

Como validar y detectar errores en el código de una página web


Es necesario evitar en lo posible cualquier error en el código empleado en las páginas web, de no ser así las consecuencias pueden ser varias, desde que la pagina no se muestre de forma adecuada en algunos navegadores, hasta que Google u otros buscadores la eliminen completamente de los resultados de búsquedas.
La mejor opción y más exacta a la hora de validar el código de una página web, es utilizar el servicio que ofrece en la red de forma gratuita W3C, accede a la herramienta Markup Validation Service en el siguiente vínculo Servicio de validación del W3C.
Es posible utilizarla de dos formas:

1- Introduciendo la dirección URL de la página web a validar.
2- Indicando la ruta a un archivo en el equipo local.


En los dos casos de forma automática se detectará el formato y codificación utilizado en la página y se mostrarán los errores en caso de que existan con todos sus detalles para su correcta subsanación.

Utilizar un Bookmarklet para validar el código de páginas web


Puedes utilizar uno de los siguientes Bookmarklets en el navegador web, para validar la página web en que te encuentres actualmente.
Para usarlo arrástralo a la barra de Bookmarks, marcadores o de Favoritos de tu navegador.

ValidarHTML Accede al servicio del W3C para validar la página actual, para eso abre una nueva ventana por lo que no funciona en el navegador Internet Explorer.

ValidarHTML Accede al servicio del W3C para validar la página actual, se abre en la misma ventana, funciona y es compatible con todos los navegadores web.

Páginas relacionadas