Índice
Validación de las páginas
Aunque que el código HTML esté escrito correctamente no va posicionar bien una página, el hecho de que tenga errores podría hacer que los robots no sean capaces de rastrear su contenido correctamente.
El W3C, consorcia que regula la norma HTML, nos permite validad nuestro código con la siguiente herramienta online:
Dicho herramienta comprueba que las web cumplen las especificaciones de HTML o XHTML.
Dreamweaver tiene una utilidad que permite validar las páginas conectándose con el W3C:
Archivo > Validar > Validar documento actual (W3C).
Buscadores y metabuscadores
Buscadores más importantes
Metabuscadores
Son buscadores sin base de datos propia, que utilizan otros buscadores para proporcionar sus propios resultados de búsqueda.
Ejemplos:
Metabuscadores de empleo:
Más información
El titulo
Es quizá la etiqueta más importante si pensamos en términos de un buscador. Nos referimos aquí al title del head. El h1 también sería importante, pero estaría principalmente destinado a la lectura por los humanos. Más o menos coinciden. Hay que tener en cuenta que cuando, tras una búsqueda de Internet, aparecen los resultados, el contenido del title será lo que vean los usuarios.
De cara a Google y otros buscadores, es importante que especifiquemos el título en cada una de las páginas del sitio. Por ejemplo, para la página principal de un sitio:
<title>veteporlasombra | Diseño gráfico y multimedia</title>
Como se ve, en la página principal de un sitio web se suele poner primero el nombre de la marca seguido por una pequeña frase que describa la misión principal o lema del sitio. En las demás páginas, la misión se sustituye por el título del contenido (h1) seguido por la marca. En ambos casos, como separador se suele utilizar el guión (-) o la barra (|).
Hay que tratar el título como si se tratase el de un libro o el de uno de sus capítulos. Cuando la página aparezca como resultado de una búsqueda, el título invitará o no al usuario a visitar la página.
El título debe contenter algunas palabras clave interesantes que ayuden a los motores de búsqueda en la clasificación de nuestro sitio. Debemos pensar en un título que seduzca a las personas, pero darle forma pensando en los motores de búsqueda.
Aspectos a tener en cuenta
- Longitud: debería ser de un máximo de 70 caracteres, espacios incluidos.
- Situación de las palabras claves: las más importantes deben ser las primeras que aparecen en orden de lectura.
- Separación de las palabras claves: normalmente usa la barra de separación (|) o el guión (-) para separar las frases o palabras importantes (ni comas, puntos, u otros caracteres).
- Frases: deben ser cortas y simples (evita si, pero, entonces, y...)
- Nombre de la empresa: si el nombre de la empresa no supone una palabra clave importante, quitalo o ponlo al final del título. En ocasiones la propia marca invita a hacer clic en el resultado de la búsqueda; entonces se pone al principio.
- Títulos duplicados en las páginas: cada página debe tener su propio título (como hemos dicho, se suele añadir, al final, el nombre de la marca).
- Destacar lo relevante: las palabras elegidas en el título deben describir el contenido de la página. Por ejemplo, en la página de "Quiénes somos", podríamos poner "Quiénes somos | Palabras importantes | Nombre de la empresa" (o poner primero las palabras importantes).
Una herramienta útil para comprobar cómo queda el title y el meta description es el previsualizador de snippets de SEOmofo. Otra sería el previsulizador de la etiqueta title de Moz, que trabaja en pixels (Google recorta el título en pixels).
Fuente:
Más información
Etiquetas meta
Los buscadores leen estas etiquetas, y les ayudan a indexar las páginas. Por ejemplo, Google entiende algunas de estas etiquetas.
Sintaxis
La etiquetas <meta> que aportan una inforamción clave característica son las que utilizan los atributos name y content. Por ejemplo, si queremos hacer una pequeña descripción de la página:
<meta name="description" content="Todo sobre diseño gráfico">
Si utilizamos el atributo lang, podemos especificar valores distintos para cada idioma. Por ejemplo, para las palabras claves:
<META name="keywords" lang="en" content="holiday, Greece, sunshine">
<META name="keywords" lang="fr" content="vacances, Gréce, soleil">
Algunos valores de los atributos name y content
| name | content | ejemplo de content |
|---|---|---|
| description | descripción breve de la página | Todo sobre diseño web en Madrid |
| robots | indexación y seguimiento de enlaces | noindex,nofollow |
| lang | idioma en que está la página | es |
| keywords | palabras clave, separadas por comas | multimedia, diseño web, JavaScript, diseño gráfico |
| author | autor de la página | Pepito Grillo |
meta description
Aunque no mejora el posicionamiento es muy importante, porque su contenido aparece en los resultados de los buscadores. Así, la descripción, que será distinta en cada página del sitio, influirá en la decisión de los usuarios.
No debe ser mayor de 156 caracteres, ya que, al visualizarse en las búsquedas, el texto quedaría recortado.
meta robots
Esta meta etiqueta es interesante, por ejemplo, para webs en pruebas o páginas que no queramos que los buscadores rastreen (por defecto las rastrearán). Utilizaremos noindex para que no las indexen, y nofollow para que no rastreen los enlaces:
<meta content="robots" content="noindex, nofollow">
El valor contrario no haría falta ponerlo, ya que ocurre por defecto:
<meta content="robots" content="index, follow">
En alguna ocasión puede interesar que se rastree sólo la página y no los enlaces, o viceversa.
meta charset
Se utiliza para especificar el conjunto de caracteres que utiliza la página. Se recomienda poner utf-8:
<meta charset="utf-8">
meta lang
Para especificar el idioma de la página. Generalmente ya se indica, con el atributo lang, en la etiqueta html.
<meta name="lang" content="es">
meta viewport
Algunos dispositivos, como por ejemplo algunos móviles, tienen una densidad de pixeles superior a 1, por lo que hace falta esta meta etiqueta para que las páginas se visualicen a la escala correcta:
<meta name=viewport content="width=device-width, initial-scale=1">
meta keywords
Se utiliza para poner las palabras claves que identifican la página. Ya hace bastante tiempo que los buscadores no las utilizan para establecer la relevancia, debido al abuso que se hacía de ellas. No obstante, aún se suelen encontrar en muchas páginas.
<meta name="keywords" content="diario deportivo, fútbol, baloncesto">
Plugins y módulos para gestores de contenidos
Por ejemplo, para algún CMS:
- En Wordpress podemos utilizar Yoast SEO (escribe también las meta tags para redes sociales).
- En Drupal podemos usar Metatag
Más información
- https://moz.com/blog/seo-meta-tags
- http://deteresa.com/etiquetas-meta/
- https://support.google.com/webmasters/answer/79812?hl=es
Meta tags para redes sociales
Convendría añadir algunas etiquetas meta para que las redes sociales (Facebook, Twitter, Pinterest, Google+) sepan cuál es el título, la descripción o la imagen principal que ilustra el contenido.
El protocolo de Open Graph define unos metadatos básicos:
og:title- El título de la página.og:type- El tipo de objeto, para una web "website".og:image- La URL a la imagen más representativa.og:url- La URL de la página.
De entre los metadatos opcionales estaría bien añadir el og:description (por ejemplo, Facebook lo utiliza).
El par de atributos utilizados serían property (nótese que no es name) y content. Por ejemplo:
<meta property="og:title" content="Tortilla de patatas"> <meta property="og:type" content="website"> <meta property="og:url" content="http:www.recetasabuela.com/tortilla_patatas.html"> <meta property="og:image" content="http:www.recetasabuela.com/tortilla_patatas.jpg">
<meta property="og:description" content="Delicioso primer plato a base de huevos, patatas, sal y opcionalmente cebolla">
Más información
Dentro del body
Aspectos a tener en cuenta en la redacción de los contenidos del body:
- Encabezados: especialmente es importante el h1, aunque también los h2 y demás, que guardarán relación con sus correspondientes párrafos.
- Primeros párrafos de texto: aumentaremos el SEO si al redactarlos aparecen palabras claves que también están en el h1. Conviene por eso, en los CMS, rellenar las descripciones de las categorías y etiquetas, porque aparecen como párrafo inicial cuando se filtra por dichas taxonomías.
- Textos de los enlaces: guardarán relación con el contenido al que vinculan (mejor que "pinchar aquí" y textos similares).
- Atributo alt de las imágenes: muy importante para la accesibilidad de los invidentes, pero también para que los buscadores puedan adivinar el contenido de la imagen.
- Atributo title: habrá que rellenarlo sobre todo en las imágenes que son enlace, hablando de qué vamos a encontar al otro lado del vínculo.
- Textos destacados: utlizaremos la etiqueta strong para destacar los contenidos más importantes.
Más información
Microdatos y microformatos
Son atributos que se añaden a las etiquetas HTML, con el fin de informar a los buscadores acerca del contenido de la página web. Por ejemplo, en una página de recetas, no sólo se le informaría al buscador del título, sino también de que el contenido es de tipo recetas, del tiempo que tardan en hacerse, los ingredientes, etc.
Para más información acerca de este tema ver Microdatos en HTML5.
Mapa del sitio
Aunque los robots de los principales buscadores rastrean los sitios web, no está de más añadir un mapa del sitio dentro de nuestro sitio web.
Un mapa del sitio suele ser un archivo xml, en el que figuran todas las páginas de nuestro sitio web. Los buscadores lo tendrán más fácil si les indicamos cómo se organizan las distintas páginas y cuántas son, porque podrían no saber cómo se enlazan entre ellas.
Más información
Herramientas y plugins para gestores de contenido
Aunque se puede hacer un archivo de mapa del sitio manulamente, conviene utilizar alguna aplicación que nos facilite esta tarea.
En Internet podemos encontrar algunas herramientas externas para elaborar mapas del sitio.
Por ejemplo, podemos utilizar alguna herramienta online como http://www.xml-sitemaps.com/, o utilizar algún software como https://code.google.com/p/sitemap-generators/wiki/SitemapGenerators
Si vamos a utilizar algún CMS, conviene revisar los módulos o plugins que permiten realizar mapas del sitio:
- plugins para Wordpress: Google XML Sitemaps
- módulos para Drupal: xmlsitemap
Consejo sobre las URL
Si utilizamos algún CMS como Wordpress o Drupal, conviene que las URL o rutas tengan un nombre amigable, ya que por defecto las páginas suelen tener rutas del tipo "www.mistio.com/?p=123" o similares.
Para ello podemos configurar el gestor de contenidos o instalar algún módulo o plugin que convierta las rutas con nombres similares a los del título de la página:
- en Wordpress: Ajustes > Enlaces permanentes > opción "Nombre entrada"
- en Drupal: podemos instarlar el módulo Pathauto