No podemos hablar de la estructura básica de un página web sin hablaros de los meta tags. Los meta tags se insertan en la cabecera de la página, entre las etiquetas <head></head>. La función de estos tags varía.
Pueden ser informativos, para los buscadores y usuarios, indicándoles el tipo de contenido de la web, sus palabras claves, etc. o pueden predefinir una actuación a la página.
Los meta tags no se pueden ver a no ser que sea a través del código fuente. Es decir, un meta tag no hace variar la apariencia de una página web, pero son imprescindibles e importantísimos para los buscadores webs.
El esquema de un meta tag es el siguiente: <meta name=» » content=» «/>. El “name” muestra el nombre de la etiqueta y el “content” el contenido de esa etiqueta. Los meta tags pueden cerrarse de dos formas: > o /> . La segunda es más correcta aunque los navegadores no muestran diferencia con una u otra.
Estas etiquetas juegan un papel importante en el posicionamiento web, especialmente la etiqueta meta description. Si te interesa el posicionamiento SEO, puedes ampliar la información en este curso gratuito de SEO.
Puede que todo esto te suene a chino, no te preocupes. Ahora vamos a pasar a explicarte los meta tags más importantes que debes conocer.
Meta tag “Description”
Este meta es también destinado para los buscadores. En la “description” escribiremos la descripción de la página, de sus contenidos. Esto lo haremos a través de frases cortas y separadas entre ellas por puntos. En nuestra página este meta quedaría de la siguiente manera:
<meta name=»Description» content=»Tutorial html. Meta tags» />
Meta tag “language”
Este meta tag le indica al buscador el idioma en el que está escrita la página. En el caso de español en content se pone “es”, en inglés “en”, en francés “fr”… Nuestra página es española así que su meta será el siguiente:
<meta http-equiv=»Content-Language» content=»es»/>
Meta tag “Distribution”
Este meta es importante. Marca la distribución que queremos que se haga de nuestra web en Internet. Si queremos que se distribuya por todo el mundo en “content” indicaremos “global”. Escribir este meta en global es lo más recomendable. Así pues nuestra página incluirá…
<meta name=»distribution» content=»global»/>
Meta tag “Robots”
Puede que no queramos que nuestra página sea indexada por los robots de los buscadores Web. En ese caso debemos indicárselo con el meta “Robots”. En content variará la respuesta dependiendo del valor que escribamos.
Los valores “all” e “index” indicarán que queremos que se indexe toda la página. Los valores “none” y “noindex” indicarán que no queremos que se indexe nada. El valor “follow” indica que queremos que el robot siga los vínculos externos de nuestra web y “nofollow” indicará lo contrario.
Como resumen, y siguiendo el ejemplo del apartado «introducción al html» aunque cambiando el «title», nuestros meta tags serían los siguientes:
<html>
<head>
<title>Meta tags básicos.</title>
<meta http-equiv="Content-Language" content="es"/>
<meta name="Keywords" content="tutorial,html"/>
<meta name="Description" content="Tutorial html. Meta tags"/>
<meta name="Distribution" content="global"/>
<meta name="Robots" content="all"/>
</head>
<body>
Hola mundo!<br>
<b>Esto es negrita.</b><br>
<i>Y esto itálica.</i><br>
</body>
</html>
Me gusta mucho su definición, gracias por todo.
Recien empiezo con este curso, pero hasta ahora es muy facil de entender, porque esta bien explicado. Gracias
Gracias me sirvió mucho.
Nos encanta tu curso, nos sirve para las personas que pasan por aquí un montón, es una guía muy bien explicada, para iniciarse en el mundo.
Gracias por la explicación, buen trabajo!
Muchísimas gracias! Meta-tang global no la tenia en cuenta. Ahora si!
Muchas gracias, excelente trabajo. Simple para quienes iniciamos.
Gracias por el curso, estoy aprendiendo más que en otros sitios.
gracias por la explicación me ayudo de mucho
Directo y bien explicado. ¿Tan difícil es? He buscado mucho antes de dar con tu post.
El código !!!!!! que tanto mieda da, pero tan necesario. Este post me ha vendido muy bien para refrescar, gracias!!
Muy buen post, muy bien explicado! Me encanta, le doy un 10+
Tengo una duda, ¿si queremos que sea multilenguaje debemos poner tantas líneas como idiomas?
PD: ¡Me encanta este curso!
que bien usadas las palabras para hacer de esto algo tan simple…!!! Genios..!!