Cómo optimizar mi sitio web para los motores de búsqueda (SEO)?
Última actualización: 28 septiembre, 2023
Para que tu sitio web ocupe un buen lugar dentro de las búsquedas de Google, no basta con que pongas texto relacionado con tus productos ni que tengas el dominio perfecto.
Es necesario que optimices tu sitio web antes de indexarlo en Google o cualquier otro motor de búsqueda, para que tu pagina web no sea penalizada, entregues una excelente experiencia al usuario y tu sitio web se posicione correctamente.
Uso de certificado SSL
Los certificados SSL son usados para proteger información confidencial enviada a través de Internet.
Esta información se encripta de tal forma que solo el destinatario pueda verla.
El uso de un certificado SSL es muy importante para el posicionamiento en Google y otros motores de búsqueda, ya que le indica al usuario final que tu sitio web es seguro, y los motores de búsqueda prefieren un sitio web seguro sobre uno inseguro.
Para comprar tu certificado SSL con ClickPanda, visita https://www.clickpanda.com/ssl/
Agregar una etiqueta de título (Meta Title)
El título de tu sitio web es muy importante en la búsqueda de Google, ya que define el tema principal de la pagina visitada, además de indicar al usuario en que página se encuentra.
Así es como se ve el título de un sitio web en el navegador:
Y así es como aparece el titulo de un sitio web en la búsqueda de Google:
El tamaño del titulo de tu sitio web también es importante, ya que la mayoría de buscadores cortará el titulo a los 70 caracteres.
Los Keywords en el titulo son vitales para que tu sitio web sea encontrado, por lo cual se recomienda incluir el nombre de tu compañía y el producto principal en el titulo.
El formato de la etiqueta de título en HTML se ve así:<head>
<title>Example Title</title>
</head>
Agregar una etiqueta de descripción (Description metatag)
La etiqueta de descripción define a profundidad el tema o producto de tu sitio web.
Así es como se ve la etiqueta de descripción en un motor de búsqueda:
La mayoría de motores de búsqueda corta la descripción a los 160 caracteres.
Importante incluir palabras o frases que definan tu sitio web, y que sean fáciles de leer para los usuarios.
La etiqueta de descripción en HTML tiene la siguiente sintaxis:<meta name=”description” content= ”Descripción de prueba, este es el producto que se esta buscando“>
Densidad de palabras (Keywords)
Es importante que las palabras o frases que definen tu sitio web tengan una densidad y redacción natural, deben ser fáciles de leer y tener una excelente redacción. Se recomienda que los párrafos estén dentro de la etiqueta HTML <p></p>
Uso de etiquetas <h1> y <h2>
Las etiquetas H1(encabezado HTML que se utiliza para marcar el tema principal de una página) deben reforzar el tema de tu pagina a la búsqueda en Google, muchas etiquetas pueden volver el tema poco claro, o interpretarse como tácticas de spam. Considera usar menos de 5 etiquetas H1
Las etiquetas H2(Esta etiqueta es utilizada para los subtítulos y permite separar el contenido, además ofrecer más información a Google) son subtemas de los temas principales, muchas etiquetas H2 pueden confundir a los motores de búsqueda. Considera usar menos de 10 etiquetas H2
El archivo Robots.txt
El estándar de exclusión de robots, también conocido como el protocolo de la exclusión de robots o protocolo de robots.txt es un método para evitar que ciertos bots los cuales analizan los sitios Web u otros robots que investigan todo o una parte del acceso de un sitio Web, público o privado, agreguen información innecesaria a los resultados de búsqueda. Los Robots son de uso frecuente por los motores de búsqueda para categorizar archivos de los sitios Web, o por los webmasters para corregir o filtrar el código fuente.
En el archivo robots debes excluir los links internos de tu compañía, o lugares de tu pagina que no todos los usuarios deberían ver.
Este es un ejemplo de la sintaxis del archivo robots.txt:
User-agent: *
Disallow: /cgi-bin/
Disallow: /tmp/
Disallow: /admin/
Es muy importante proteger el archivo robots del publico, ya que puedes estar mostrando carpetas importantes de tu sitio web. Usando el archivo .htaccess, puedes bloquear el acceso al publico excepto a Googlebot, usando el siguiente código:
<Files robots.txt>
Order Deny,Allow
Deny from All
Allow from googlebot.com google.com google-analytics.com
</Files>
El archivo sitemap.xml
Los Sitemaps son una forma fácil que tienen los webmasters para informar a los motores de búsqueda de las páginas que se pueden rastrear en sus sitios web. Un Sitemap, en su forma más sencilla, 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.
Los rastreadores web suelen encontrar páginas a partir de vínculos del sitio y a partir de otros sitios. Sitemaps ofrece estos datos para que los rastreadores compatibles puedan seleccionar todas las URL del Sitemap y obtengan información de ellas mediante los metadatos asociados. El uso del protocolo Sitemaps no garantiza que las páginas web se incluyan en los motores de búsqueda, pero proporciona sugerencias para mejorar el trabajo de los rastreadores web al rastrear su sitio.
- Este es un ejemplo de un sitemap:
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- www.check-domains.com sitemap generator -->
<url>
<loc>https://www.clickpanda.com/</loc>
</url>
<url>
<loc>https://www.clickpanda.com/hosting/</loc>
</url>
<url>
<loc>https://www.clickpanda.com/email/</loc>
</url>
<url>
<loc>https://www.clickpanda.com/domains/</loc>
</url>
<url>
<loc>https://www.clickpanda.com/dominios/</loc>
</url>
<url>
<loc>https://www.clickpanda.com/ssl/</loc>
</url>
</urlset>
Links rotos (broken links)
Cuando Google rastrea tu sitio web, cada link existente dentro del contenido de tu sitio web se envía al índice, pero debes asegurarte que todos los links resuelvan correctamente.
Si hay algún link que dirige a una pagina que no existe, o que genera algún error, pueden aparecer errores en la indexación.
Es recomendable no usar redirecciones, ya que esto afecta el posicionamiento, en caso de que sea obligatorio el uso de redirecciones, es preferible que redirijan con el código de respuesta 301.
Links amigables con SEO (SEO-friendly URLs)
Verifica que las URLs de tu sitio web son amigables con los motores de búsqueda, para esto, deben contener palabras relevantes al contenido de la página, y no contener espacios, guiones bajos u otros caracteres. Debes evitar el uso de URLs con parámetros cuando sea posible, ya que estos no son tan confiables para ser compartidos o clickados. La sugerencia de Google para separar palabras en una frase es usar guiones, ya que estos son tratados como separadores, a diferencia de los guiones bajos.
El uso de atributo “alt” en las imágenes
Es un atributo de HTML que se utiliza en las etiquetas de imágenes para proporcionar una descripción alternativa de la imagen en caso de que no se pueda mostrar o cargar correctamente.
Para agregar el atributo “Alt” dentro de una imagen se debe usar la siguiente sintaxis:<img src="foto.gif" alt="descripción de la foto">
Estilos CSS en línea
Los estilos CSS en línea (inline CSS styles en inglés) son una forma de aplicar estilos a un elemento HTML directamente en su etiqueta.
En ocasiones, los desarrolladores web definen los estilos de algunos elementos dentro de la misma etiqueta del elemento, esto puede generar mayor tiempo de carga del sitio web, lo cual afecta negativamente el posicionamiento web.
Es recomendable definir los estilos CSS en archivos externos, o dentro de la etiqueta <style>, por ejemplo:
<!--esto es HTML con reglas CSS en linea:-->
<p style="color:red; font-size: 12px">some text here</p>
<!--deberia ser:-->
<p>some text here</p>
<!--y la regla dentro del archivo CSS:-->
p{color:red; font-size: 12px}
Para incluir un archivo CSS externo, debes usar la siguiente sintaxis:<link rel="stylesheet" href="/carpeta/archivo.css">
Uso de favicon
El favicon es el icono que se muestra en el navegador al lado del titulo, es muy importante el uso del favicon para diferenciar tu sitio web cuando el usuario tiene varios sitios web abiertos.
Así se ve el favicon en la pestaña del navegador:
Errores de Javascript
Cuando ejecutas código javascript en tu sitio web, ya sea dentro del mismo archivo o en archivos externos, debes asegurarte que no haya ningún error en la ejecución, ya que esto puede aumentar el tiempo de carga de tu sitio web, afectando negativamente tu posicionamiento.
Para verificar los errores, puedes usar las herramientas de desarrollador del navegador, por ejemplo, en Google chrome, puedes presionar la tecla F12 mientras que carga tu sitio web y seleccionar Consola, esto mostrará los errores generales, asi se ve un error de javascript dentro de las herramientas de desarrollador:
Links a tus redes sociales
Es muy importante que haya links dentro de tu sitio web a las redes sociales activas, ya que esto mejora la reputación de tu pagina.
El tamaño del código HTML
El promedio ideal es 33kb, esto no incluye imágenes, archivos javascript o CSS externos.
Tener un código HTML muy pesado aumenta considerablemente el tiempo de carga de tu sitio web, afectando la experiencia de usuario.
Para habilitar la compresión de tu sitio web, puedes usar el método DEFLATE en el archivo .htacess.
Los archivos htaccess tienen siempre el nombre “.htaccess”. En Linux los archivos cuyo nombre comienza con punto “.” están ocultos. El htaccess es un archivo que resulta oculto dentro de Linux, pero no en Windows. En los .htaccess colocamos cualquier configuración para el servidor Apache, no sólo las configuraciones para comprimir los archivos, también para hacer redirecciones, bloquear acceso a ficheros, etc.
Existe un comando que se inserta en el código de los htaccess que sirve para definir la compresión GZIP / DEFLATE. El comando se llama AddOutputFilterByType y tenemos que indicarle luego el tipo de compresión y el tipo de medio que deseamos comprimir.
Por ejemplo, con esta línea de código comprimiríamos todos los archivos de texto plano:
AddOutputFilterByType DEFLATE text/plain
Si deseamos, podemos comprimir todos los archivos HTML con esta línea de código en el htaccess.
AddOutputFilterByType DEFLATE text/html
A continuación podemos ver una serie de líneas con distintos tipos de medios que se están indicando para comprimir:
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
Objetos en la página
Es muy importante reducir el llamado de objetos a través de HTTP, ya que esto aumenta el tiempo de carga de tu sitio web.
Un objeto llamado a través de una URL absoluta ejecuta una conexión al servidor, por lo cual es recomendable usar URL relativas dentro del mismo servidor, a continuación un ejemplo del uso de URL absoluta vs URI relativa:
Uso de URL absoluta:
<img alt=”clickpanda” id=”logo” src=”https://www.clickpanda.com/logo-horizontal-s-w.png”/>
Uso de URL relativa:<img alt="clickpanda" id="logo" src="/logo-horizontal-s-w.png"/>
También puedes reemplazar el uso de imágenes por Data URI, lo cual es una versión en texto base64 de la imagen, reduciendo el tiempo de carga del sitio web, algunos ejemplos a continuación:
En CSS:li{background:url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) no-repeat left center;padding:5px 05px 25px;}
En HTML:
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
En PHP:
<?php echo base64_encode(file_get_contents("../images/folder16.gif"))?>
Tambien, para reducir el uso de solicitudes HTTP, puedes usar el encabezado de expiracion HTTP para configurar un tiempo de expiracion de tus imagenes o contenido de cualquier otro tipo. Puedes agregar las siguientes líneas a tu archivo .htaccess
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
</IfModule>
Evita las redirecciones
Asegúrate de que tu sitio web principal no redirige a ningún lado, y que la respuesta al servidor es 200, ya que esto es vital para el posicionamiento web.
Haz una versión para dispositivos móviles
Es muy importante que tu sitio web se visualice correctamente en todos los dispositivos, y que este optimizada para consumir pocos datos en móviles, de lo contrario, tu posicionamiento puede ser afectado.
Envía tu sitio web al Índice de Google
Para más información, visita nuestro articulo de soporte.
