SEO On Page: Maquetación y diseño

1) 1. Introducción

Cuando desarrollamos una aplicación utilizando cualquier lenguaje de programación se acepta que el código debe estar bien estructurado y organizado, así como aplicar una serie de buenas prácticas de programación para conseguir un código de calidad, óptimo y fácilmente mantenible.

Sin embargo, según mi experiencia, cuando se llega a la parte de desarrollo con lenguajes de marcado, estas pautas pasan a un segundo plano. Semeja que no existe ninguna diferencia entre el hecho de utilizar etiquetas <span>para introducir una data en lugar de utilizar la etiqueta <time>o de encerrar el título principal de la página entre etiquetas <p>en vez de etiquetas <h1>.

Nada más lejos de la realidad, toda esta mala praxis baja el nivel semántico de la web influyendo directamente en el posicionamiento orgánico de nuestra página, cosa que no le hará gracia al product owner. Por consiguiente, se hace preciso aplicar una serie de buenas técnicas para acrecentar la calidad semántica de la página web, lo que se conoce como SEO On-Page, mejoras que se efectúan en la propia página para conseguir un mejor posicionamiento orgánico en los resultados de los motores de búsqueda.

Lo que se consigue con un buen SEO On-Pagees facilitar a los motores de búsqueda el proceso de indexación y posicionamiento de la página, o sea, mejora el SERPde nuestro sitio, aumentando el tráfico orgánico hacia nuestra página web. Es preciso aclarar que para conseguir un buen posicionamiento se tienen que tener en consideración otros géneros de factores, como, por servirnos de un ejemplo, el SEO Off-Page, que serían aquellas técnicas realizadas desde fuera de nuestro sitio, como la divulgación de contenido o bien el link building, si bien este tema queda fuera del presente post.

2) 2. ¿Cómo marcha la indexación de páginas en Google?

Antes de avanzar exponiendo las técnicas SEO, vamos a intentar explicar cómo trabajan los motores de búsquedas, en este caso específicamente, nos centraremos en Google. Este motor ejecuta unos botsllamados spiderso GoogleBotslos cuales recorren la red en pos de nuevas páginas o cambios en las ya existentes. Una vez detectada una nueva web, estos robots la analizan y archivan su contenido para más tarde clasificarlas en el índice de Google.

De esta forma, las nuevas búsquedas no se efectúan en internet en sí, sino que se efectúan en el índice que Google ha elaborado tras haber examinado con los botstoda la red. Al empezar el proceso de búsqueda, Googleselecciona del índice todas y cada una de las páginas que estén relacionadas con los términos buscados.

Probablemente existirán miles y miles de páginas que contengan los términos detallados en la búsqueda, así que Googledecide qué páginas son más relevantes y las clasifica según ciertos procedimientos, como, por ejemplo, contando cuantas veces aparecen las palabras claves en el sitio, en qué sitio de las páginas aparecen, si aparecen juntas o bien separadas, si son coincidencia exacta o son sinónimos, si el contenido es de calidad y ha sido enlazado desde otras webs importantes, las veces que se actualiza, el número de visitas anteriores, etc.

Una vez que Google ha considerado todos estos factores (son más de doscientos) se crea una puntuación global de cada página que es la que se emplea para calcular su posición en la lista de resultados. Por eso, si nuestro sitio está bien estructurado y tiene una semántica correcta, aumentará la posición en el rankingde resultados de Google.

3) 3. SEO On-Page

Como hemos dicho anteriormente, las técnicas de optimización On-Pageson aquellas que se efectúan en el código de la misma página web, afectando a su contenido, estructura, calidad y velocidad. Existen abundantes factores que influyen en el SEO, y que es bueno tenerlos presentes durante el desarrollo de la página. A continuación, mostramos los más importantes:

3.1) 3.1 Diseño y maquetación

A la hora de diseñar la estructura de nuestro sitio, es mucho más recomendable crearlo con una arquitectura horizontal, en el que existan pocos niveles desde la página principal cara las páginas internas, que con una arquitectura vertical.

Si se emplea una estructura vertical, para llegar a una de las páginas internas habrá que efectuar muchos clics, y esto penalizará nuestro SERP.

El título es la primera información acerca de nuestra página que va a mirar el bot. En él, debemos introducir, de forma natural y lo más a la izquierda posible de la oración, palabras claves que definen nuestro sitio.

Este título es el que Googlemostrará en los resultados de búsqueda:

Es el texto que viene abajo de la etiqueta Titley contendrá el resumen general de nuestro sitio, en consecuencia, en pocos caracteres, menos de 160, se deberá convencer al usuario para que entre en nuestra página web.

El texto comprendido entre los caracteres ciento sesenta y trescientos veinte no es seguro que se muestre en la descripción en el resultado, por lo tanto, en ese rango se debe añadir información auxiliar.

Esta descripción aparecerá en el anuncio de nuestra página:

Atrás quedaron aquellas URLsque contenían directamente los nombres de ficheros y códigos, haciendo poco inteligible la URL. Hay que habilitar la opción de crear URLscon nombres más próximos al lenguaje natural.

Es mucho mejor tener una web que se llame /nuestros-expertos-opinanque /exp-op-dos.html. También es recomendable esconder la extensión de la página, no añadir caracteres especiales ni acentos.

La carga de una web se transforma en un factor negativo cuando es demasiado lenta, provocando una mala experiencia de usuario, siendo la principal razón del abandono de nuestro lugar por la parte del visitante.

Gran una parte de la velocidad de carga dependerá del hosting, así que deberemos asegurarnos que sea de calidad y esté todo apropiadamente configurado.

En nuestra mano sí está el efectuar pequeñas funciones que calmen la carga de la página web, como por ejemplo:

• Optimización de imágenes y vídeos.
• Establecer su ancho y alto.
• Minificación de código.
• Minimizar el acceso a archivos.
• Código limpio y libre de ruido.
• Usar AMP, Accelerated Mobile Pages.
• Habilitar la función de caché.
• Evitar carga de contenido externo.
• Añadir atributo rel="canonical"para evitar que se indexe páginas duplicadas.

Existen varias herramientas para medir la velocidad de carga, aconsejamos. Hay que medir todas y cada una de las páginas y no solo la home.

Los links deben estar insertados de forma natural en la página web, si queremos enlazar un documento o una web externa es recomendable hacerlo enlazando palabras o bien oraciones del mismo contenido. No debemos sobrecargar la página con numerosos enlaces que no aporten valor al lugar. También es útil usar el atributo titlede las etiquetas <a>.

Debemos ofrecer al buscador la mayor información acerca de nuestro sitio. Para esto se crea un scriptcon formato JSONconteniendo diferentes atributos y valores acordes a nuestro sitio web, que colocaremos al principio de nuestra página:

<script type=“application/ld+json”>

“@context”: “,
“@type”: “Consultoria IT”,
“name”: “atSistemas”,
“telephone”: “(+34) ",
“url”: “

</script>

Existen páginas webs que nos asisten a crear estos códigos, como.

Sin duda este es otro de los factores más esenciales en lo que se refiere a SEO. Sirven tanto para estructurar la página para informar a los motores de búsqueda de su contenido. Existen 6 niveles de encabezados, desde el <h1>hasta el <h6>, siendo los tres primeros los más esenciales a nivel de SEO.

En cada página únicamente debe existir una única etiqueta <h1>, que contendrá el encabezado principal y es donde deberíamos introducir nuestras keywords, siempre y en toda circunstancia de forma natural y en lo más alto posible de la web. Las etiquetas <h2>vienen bien para los encabezados de las diferentes secciones y el <h3>para encabezados de otros bloques internos.

Es fundamental respetar la jerarquía de los encabezados, esto es, no debe existir una etiqueta <h2dentro de un bloque que tenga un encabezado <h3>.

Para Chromeexiste un complemento llamado Web Developerque nos muestra, entre otras muchas funciones, la estructura de los encabezados de la página, ayudando a identificar rápidamente errores.

Pulsando la opción View Document Outlinenos mostrará la jerarquía de los encabezados:

El empleo adecuado de las etiquetas que da HTML5dotan a la página web de una buena semántica que facilita el análisis a los motores de búsqueda. Tal y como comentaba al comienzo del post, no se suele sacar partido de todo el potencial de HTML5, empleando código que deriva en HTMLbásico.

Las etiquetas primordiales para estructurar la página son:

• header: Parte superior de la página, donde estaría el menú de navegación, logotipos, etc.

• nav: Representa al menú de navegación de la web.

• main: Con esta etiqueta decimos a Googleque dentro de ella estará el contenido principal, donde más foco tiene que hacer. Si existe alguna incompatibilidad de esta etiqueta con el navegador, se puede escribir de esta forma: <main role="main">

• section: Encierra a un bloque de contenido que se puede poner en cualquier parte de la página. Debe llevar una etiqueta de encabezado.

• article: Bloque de contenido independiente y reutilizable. Tiene semántica por sí solo.

• footer: Hace referencia al pie de la página, donde se añadirán derechos de copia, certificaciones, datos de contacto, etc.

• aside: Define contenido que aparecerá en un lateral de la página.

header: Parte superior de la página, donde estaría el menú de navegación, logotipos, etc.

nav: Representa al menú de navegación de la web.

main: Con esta etiqueta decimos a Googleque dentro de ella estará el contenido primordial, donde más foco debe hacer. Si hay alguna incompatibilidad de esta etiqueta con el navegador, se puede redactar de esta forma: <main role="main">

section: Encierra a un bloque de contenido que se puede poner en cualquier una parte de la página. Debe llevar una etiqueta de encabezado.

article: Bloque de contenido independiente y reutilizable. Tiene semántica por sí solo.

footer: Hace referencia al pie de la página, donde se añadirán derechos de copia, certificaciones, datos de contacto, etc.

aside: Define contenido que aparecerá en un lateral de la página.

Añado ciertas etiquetas semánticas importantes:

• time: Para apuntar datas.

• mark: Para señalar textos destacados.

• dialog: Para apuntar un popup.

• detail: Para señalar un bloque de datos que el usuario puede enseñar u ocultar.

• summary: Señala el encabezado del bloque <detail>.

time: Para indicar datas.

mark: Para indicar textos señalados.

dialog: Para indicar un popup.

detail: Para señalarse un bloque de datos que el usuario puede mostrar o bien esconder.

summary: Indica el encabezado del bloque <detail>.

Enpodemos ver la.

El tratamiento de imágenes es un tema muy delicado, ya hemos comentado previamente que hay que optimar el peso y tamaño para aumentar la velocidad de carga de la página web. Una página lenta proporciona una mala experiencia de usuarioprovocando que abandonen nuestro sitio. Es imprescindible añadir sus etiquetas <alt>y <title>, en tanto que son las que le proporcionan al motor de búsqueda información sobre la imagen.

Otra técnica esencial sería cambiar el nombre de los archivos por un texto más natural, de este modo el motor de búsqueda entenderá mejor la semántica de una imagen cuyo nombre de archivo es infografía-seo.jpg  que si se llama info2348-new.jgp. Por último, la imagen debe tener una descripción que contenga la keywordde nuestra página.

Se puede utilizar este pequeño código CSSpara que nos detalle aquellas imágenes a las que no le hemos añadido los atributos alto title:

Hay que descartar la realización de páginas distintas para que se muestren según el género de dispositivo en el que se visualice. Se debe realizar una única página que sea capaz de adaptarse al dispositivo, navegador y resolución que tenga el usuario.

Tanto la usabilidad como la experiencia de usuario son factores determinantes para valorar la calidad de un lugar. Este género de diseño agiliza la carga de la web además de ofrecer una mejor experiencia de usuario. Además, Googleha incorporado etiquetas específicas para los resultados de búsqueda orientadas a la versión adaptable del sitio.

Tiene como finalidad indicarle al motor de búsqueda qué páginas queremos que se incorporen a su índice y cuáles no. Este archivo deberá estar en el directorio raíz del dominio. Si existen varios subdominios, deberá existir un archivo robots.txt en cada uno de ellos.

Las funciones primordiales de este fichero son:

• Denegar el acceso a páginas.
• No indexar diferentes contenidos.
• Evitar la indexación de contenido duplicado.
• Mostrar el sitemap.xml(Este archivo también es esencial en tanto que ayuda al motor de búsqueda a descubrir más fácilmente la estructura de nuestro sitio).

Podemos ver cómo crear adecuadamente el archivo robots.txty como sería su sintaxis en.

3.2) 3.2 Marketing

Cuando se desarrolla un sitio es importante saber qué palabras claves son a las que precisamos dar más importancia a fin de que los usuarios reparen en nuestro sito. Para ello se deberá efectuar una investigación de las keywordsque más nos resulta conveniente, equiparar las de la competencia y ponerlas estratégicamente en nuestro lugar.

Por ejemplo, si nuestro sitio es nuevo, deberá utilizar palabras claves más detalladas y con menos competencia, en tanto que la autoridad de nuestro lugar estará por debajo de webs que están bien posicionadas en el índice de Google.

Existen bastantes páginas gratis que asisten a localizar las mejores keywordspara nuestro lugar, y nos dan información acerca de la frecuencia de búsqueda de esas palabras. Algunos sitios son:

Sin duda, por mucho que la web esté con perfección diseñada y estructurada, que tenga una velocidad de carga envidiable, con el uso adecuado de HTML5, etc., si el contenido que ofrece nuestro lugar no es relevante, actual y destacado, acabaremos perdiendo situaciones en el ranking.

Hay que ofrecer contenido original, y no duplicado de otros sitios, puesto que Googlepenaliza mucho esta práctica. Si el contenido es propio, único y responde a una necesidad del usuario, ganaremos posiciones en el resultado de los motores de búsqueda.

Un buen redactado es de vital importancia, como, por ejemplo: el empleo de sinónimos y variaciones semánticas, que el contenido resuelva las posibles dudas del cliente del servicio, que sea fácil de comprender, etc.

El contenido debe ir actualizándose frecuentemente, si nuestro sitio deja la participación de usuarios preguntando dudas hay que contestar lo más rápido posible, para no dar sensación de abandono del sitio.

Son aquellos linksque enlazan con otros artículos de nuestro lugar. Con esto se gana tráfico en las distintas páginas del lugar aumentando el tiempo que el usuario continúa conectado con nosotros. Debemos añadir estos links de forma natural y que estén relacionados con el contenido actual que está viendo el usuario.

4) 4. Conclusiones

En el presente post, he querido enseñar la repercusión que tiene un buen diseño y una adecuada maquetación web en el posicionamiento orgánico de los motores de búsqueda, centrándome en Google.

Son pequeños factores que acostumbran a pasarse por alto mas que su correcta implementación ayuda a escalar unos puestos en el ranking de resultados, cosa que agradecerá el product owner.

También he detallado ciertos factores que los compañeros de marketing tienen que tener en consideración en el momento de crear y mantener los contenidos, porque al fin y a la postre, son el valor clave de la página.

Espero que el artículo haya sido interesante y te haya sido útil. Si te ha gustado, ¡síguenos en!

¡Saludos!

Back to top