Etiquetas en la cabecera.
Todos los suguientes ejemplos se contempla que estaran dentro de la etiqueta head
<head>
/* aqui viene el código de ejemplo */
</head>Inserción de código javascript
Básicamente hay 2 formas de insertar código javascript en nuestros documentos Html, la primera es la inserción en linea:
<script type="text/javascript">
//Código javascript
</script>
La segunda forma es definir el código en otro archivo y mandarlo a llamar, esto lo hacemos de la siguiente forma:
<!-- Insertando /js/miScript.js -->
Insercción de código CSS.
De forma analoga hay 2 formas de insertar código CSS en nuestras páginas web, la primera inserción en linea:
<style type="text/css" media="all">
/* código css */
</style>
La segunda mandando a llamar archivo remoto:
<link rel="stylesheet" type="text/css" media="all" href="/ruta/estilo.css" />Tipo de carácteres.
Es util decir el tipo de carácteres que tendra la página, por ejemplo para carácteres acentuados como es el caso de la lengua hispana:
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
Descripción de la página.
Existen una serie de etiquetas y metadatos que sirven para describir la información de la página esta información es utilizada por los nevagadores para indexas. La información siguiente fue extraida del artículo google metaetiquetas.
Title.
<title>título de la página</title>Se suele utilizar en junto con la "descripción"(description). 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). Más información.
Descripción (Descriptión)
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. Más información.
<meta name="description" content="Descripción de la página" />
Robots.
Nos ayudan a 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. 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 los buscadores sigan los 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. Más información sobre el archivo robots.txt.
<!-- quitando indexación y no explorar -->
<meta name="robots" content="noindex, nofollow">
Parabras clave Keywords:
Pese a que esta meta-etiqueta no es utilizada por google para indexar busquedas, es recomendable utilizarla ya que otros buscadores como Yahoo si lo hace, la sintaxis es la siguiente:
<meta name="Keywords" content="jquery,manual,ejemplos,metaetiquetas,keywords">Como podemos ver podemos definir multiples parabras clave separadas por coma (,).
Enlaces recomendados:
- Google
metaetiquetas: http://support.google.com/webmasters/bin/answer.py?hl=es&hlrm=en&answer=79812 - Robots bloqueando seguimiento: http://searchengineland.com/meta-robots-tag-101-blocking-spiders-cached-pages-more-10665
- Yahoo como agregar metatags: http://help.yahoo.com/l/us/yahoo/smallbusiness/webhosting/promote/promote-03.html
- Yahoo metatags por defecto: http://help.yahoo.com/l/us/yahoo/smallbusiness/webhosting/yss/promote/promote-04.html
- Google Microdatos HTML5: http://support.google.com/webmasters/bin/answer.py?hl=es&hlrm=en&answer=176035
- W3C Microdatos HTML5: http://www.w3.org/TR/html5/microdata.html
- *Fragmentos enriquecidos _(microdatos, microformatos y RDFa)_ *: http://support.google.com/webmasters/bin/answer.py?hl=es&answer=99170
- http://www.data-vocabulary.org/