eines web

Guía SEO básico y accesibilidad

SEO (Search Engine Optimization)

El posicionamiento en buscadores u optimización de motores de búsqueda es el proceso de mejorar la visibilidad de un sitio web en los resultados orgánicos de los diferentes buscadores.

Accesibilidad

La accesibilidad es el grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio, independientemente de sus capacidades técnicas, cognitivas o físicas. Es muy importante hacer nuestras webs pensando en la accesibilidad, no todas las personas acceden a nuestra web de manera visual y aunque creáis que son la excepción, el ciego más importante del mundo se llama Google.

Cómo nos ve Google

Si nuestra página esta cacheada, escribe la palabra “cache” delante de la url, en la barra de direcciones del navegador.

Ejemplo:

cache:microsiervos.com
y despues le dais clic en “versión sólo texto”

Estructura web

4 niveles de profundidad como máximo (incluyendo la página index)

Nombres de archivos (html, imágenes, PDF, etc.)

URL amigable, no usar ñ, ç, ni tildes, ni caracteres especiales, ni espacios (cambia por guiones normales). La primera página dentro de cualquier directorio suele ser index.html (definida en el servidor)

Usar palabra/s clave

Ejemplo:

index.html
quienes-somos.html
servicios.html
contacto.html
receta-de-tiramisu-de-la-abuela.html

Head / Lang

Se utiliza para indicar el idioma de una página. El atributo lang se puede utilizar en cualquier elemento html que contenga texto para especificar un idioma diferente del ancestro.

Es importante para la accesibilidad ya que lo usan los asistentes de navegación. Google no determina el idioma por este atributo, lo determina por el texto real de la página.

Se puede especificar solo el idioma:
lang=”en”

Se puede especificar el idioma y el país
lang=”en-GB”

link rel=”canonical”

Si en nuestra web hay diferentes idiomas, Google lo puede  interpretar como contenido duplicado. El atributo rel=”canonical” indica que versión de los enlaces es la principal. Se usa en los idiomas secundarios. Todas las webs tiene un idioma principal.

Title

Título de la página descriptivo y con palabra clave + Nombre de la web.  En la página de inicio solo aparece el nombre de la web, aparece en las búsquedas.

Máximo 70 caracteres

El título debe ser único.

Meta Description

Describe el contenido de la página.
Aparece en las búsquedas.
Se debe incluir la palabra clave.
Máximo 155 caracteres
Descripción única, no se debe repetir en otras páginas.

Meta Keywords

Conjunto de palabras clave separadas por comas.
Irrelevante, los buscadores no le dan ninguna importancia debido a su abuso.

Body

La organización y jerarquía debe ser correctamente semántica: Header, Nav, Main, Article, Aside, Footer, H1, h2, h3, p, etc. deben tener un orden correcto dentro del html. Con CSS podemos cambiar el orden visual, pero el que realmente importa es el del HTML.

Debemos incluir la palabra clave en el H1 y dentro de algunos párrafos lo más arriba posible. La palabra clave debe estar integrada en los textos de manera natural.

Link

El texto del enlace debe ser descriptivo, no es una buena práctica hacerlo de manera genérica. Es importante para accesibilidad.

Ejemplo:

Mal <a …>Seguir leyendo…</a>
Bien <a …>Lee la Receta de tiramisú de la abuela</a>

Los enlaces se dividen en:

Externos. Enlaces de una página web que se dirigen a un destino de enlace que está en otro sitio web.

Internos. Enlaces de una página web que se dirigen a un destino de enlace que está en la misma web.

Title
Atributo de los links que nos permite añadir un texto descriptivo del enlace, lo podemos ver al poner el cursor sobre el enlace en cuestión. Ayuda a completar el significado del link. Es importante para accesibilidad.

rel
Se utiliza para decir a los buscadores si debe seguir el enlace (rel=”follow”) o no lo debe seguir (rel=”nofollow”) en función de la calidad del enlace.

target

El atributo target se emplea para abrir un enlace en un destino distinto a la ventana actual. Se debe evitar el uso de este atributo ya que dificulta la navegación de algunos grupos de usuarios. Es malo para accesibilidad.

Se puede utilizar con moderación si se indica en el texto del enlace.

<a href=”ayuda.html” target=”_blank”>Ayuda (se abre en ventana nueva) </a>

hreflang
Define un enlace en un idioma diferente. Es importante para accesibilidad. Si nuestra web es multi idioma debemos definir el enlace a la misma página en otro idioma así:

<link rel=”alternate” hreflang=”en-GB”   href=””>

Imagen / img

Debemos incluir la palabra clave en alguna imagen dentro de nuestra página, siempre que sea de manera natural, nunca forzada. También es importante el peso de la imagen, ya que eso ralentiza la velocidad de carga de la web y penaliza el SEO.

Nombre del archivo de imagen
URL amigable, no usar ñ, ç, ni tildes, ni caracteres especiales, ni espacios (cambia por guiones normales) y poner siempre la terminación: JPG, GIF, PNG, etc…

alt
El texto más importante de la imagen. Esta etiqueta tiene que ser descriptiva con respecto a la imagen y su contenido. Muy importante para SEO y para accesibilidad, ya que es el texto que describe la imagen cuando no es posible verla.

title
Suele ser el mismo texto que el nombre del documento, pero de manera natural (sin guiones de separación). No está claro que tenga importancia actualmente.

Ejemplo:

src=”receta-de-tiramisu-de-la-abuela.png”
alt=”Mi abuela cocinando un tiramisú”
title=” Receta de tiramisú de la abuela”

robots.txt

Es un documento en formato texto que indica a los robots las páginas y directorios que deben o no leer.

Ejemplo:

User-agent: *
Disallow: /admin/
Disallow: /otra-pagina/

xml.sitemap

Es un archivo XML que enumera las URL de un sitio junto con metadatos adicionales acerca de cada una de ellas: la última actualización, frecuencia de modificación, importancia, en relación con las demás URL del sitio; así, los motores de búsqueda pueden llevar a cabo rastreos del sitio de una forma más inteligente.

https://www.sitemaps.org/es/

Generador de sitemaps

https://www.xml-sitemaps.com/

Palabra/s clave

La palabra clave es una palabra que aparece en sitios concretos de nuestra página de manera repetida, pero sin abusar y colocada de manera natural. Se utiliza para posicionar nuestra página por una palabra concreta. Se deben escribir lo más más arriba posible.

Página de Error 404

Es una página especial donde aterrizan todas las URLS fallidas de nuestro dominio, ya sea porque se escriban de manera incorrecta o porque algún enlace ha dejado de funcionar.

Si alguien pone un enlace a una página de nuestra web que no existe, el servidor dará un error 404.

Para solucionarlo debemos redirigir este error desde la configuración del servidor o crear un fichero .htaccess y añadirlo en el directorio que queramos modificar para que redirija a nuestra página de error.

.htaccess (el punto indica que es invisible)

Un fichero .htaccess (hypertext access) es un tipo de archivo especial que se utiliza dentro de un servidor Apache (Servidor web HTTP de código abierto). El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor o en un directorio específico.

Dentro del documento debemos añadir la siguiente línea de código:

ErrorDocument 404 / mi-pagina-de-error-404.html

Recuerda que la página de error es una página de ayuda para alguien que está en el sitio equivocado. Debes aprovecharlo en tu favor:

Utiliza el humor
Coloca un buscador o pon enlaces a las páginas más importantes de tu web.
Conviertela en una página de aterrizaje colocando un artículo o proyecto destacado.

Desplaça cap amunt