El SEO en las SPA es imposible ?
En mi artículo podrás obtener una opinión sincera e información obtenida con una síntesis de todas las fuentes de información consultadas.
Mucho he leído sobre SEO, sobre SEO ORGANICO, sobre SEO DE PAGO, sobre BACKLINKS, LINKS internos. En Youtube puedes obtener abundante información de gurús, youtubers que desean atraer más atención hacia sus proyectos, información que una y otra vez te repiten muchas recetas casi iguales, con matices y actualizaciones según la evolución de los buscadores.
Las buenas prácticas siempre tienen su recompensa pero la prisa por obtener buenos resultados es el gran problema de muchos proyectos. No confíes en agencias o responsables de SEO que te aseguren un resultado inmediato y todavía no hemos entrado a clasificar los distintos nichos, no es igual un ecommerce que una web de un artista, fotógrafo, artesano,...etc.
El SEO DE PAGO habitualmente se produce a través de la prisa, pagar por anuncios, comprar BACKLINS (muy mala práctica), la idea del fracaso nos lleva a acelerar el proceso. Pero esto lleva aparejado cometer muchos errores como invertir un gran presupuesto en promoción, confiar en plataformas que no puedes controlar y que en un momento pueden bloquear todo tu esfuerzo.
El SEO ORGANICO se produce a partir del esfuerzo y la paciencia, aplicando recetas, mejorando los ajustes y sobre todo armándose de paciencia. Es fundamental no perder el objetivo final y aprender cada día, no me considero un experto en SEO pero estudiar toda la información que cae en mis manos, me indica que este es el camino correcto.
Cuando contratas una plataforma para configurar tu página web, habitualmente ya incorporan una serie de utilidades o plugins, o es posible incorporarlas para mejorar tu visibilidad en internet. La comercialización de plugins permiten monetizar los desarrollos alrededor de plataformas y este aspecto facilita acelerar y limitar el presupuesto en implantación de un proyecto. Habitualmente las actualizaciones de estos plugins son constantes, pueden realizarse de forma automática sin nuestra atención y pueden provocar alguna incidencia.
Cuando contratas el desarrollo de una página web te enfrentas a varias tecnologías, pero fundamentalmente hablaremos de SSR ( Server-Side Rendering ) o SPA ( Single Page Application ).
SSR crea dinámicamente la página web desde el servidor web y solo mostrará el resultado, lo que es muy útil para los buscadores, aunque cada nueva página se debe solicitar al servidor. Ha sido la tecnología más habitual y todavía hoy día es la más extendida.
SPA también crea la página web dinámicamente pero en el cliente, este tipo de tecnología no solicita nuevas páginas al servidor, solo descargará los módulos que necesita para recrear la página web en el cliente y solicitará los datos necesarios a partir del servidor o una API. Los buscadores pueden tener alguna dificultad en leer este tipo de páginas, sobre todo si no se renderizan en un tiempo mínimo, ya que los robots tienen un tiempo limitado para realizar las lecturas.
En todos los casos es importante configurar adecuadamente los ficheros ROBOTS.TXT y SITEMAP.XML y facilitar la lectura por los robots, pero son mucho más importantes en el caso de SPA. Las SPA son el objeto de este artículo ya que la mayoría de las referencias indican que son inadecuadas para realizar un buen SEO.
Las webs desarrolladas como SPA facilitan la impresión del usuario de responder de forma inmediata además de limitar las solicitudes al servidor y mejorar la respuesta en dispositivos móviles. La combinación de una SPA ligera y una API eficiente garantiza una experiencia de usuario rápida y fluida.
Otras ventajas :
- Escalabilidad Horizontal: La arquitectura desacoplada permite escalar tanto el frontend (añadiendo más servidores para servir la aplicación) como el backend (escalando la API y la base de datos) de forma independiente según la demanda.
- Adaptabilidad y Flexibilidad: La modularidad tanto en el frontend como en el backend facilita la incorporación de nuevas funcionalidades y la adaptación a diferentes tipos de productos y servicios sin afectar la estabilidad del núcleo de la aplicación.
- Mantenimiento Simplificado: La separación de capas facilita la identificación y resolución de problemas, así como la implementación de actualizaciones.
El framework seleccionado para este proyecto ha sido QUASAR v2 que dispone de recursos como 'useMeta' que facilita :
- Gestión Dinámica de Metadatos: Actualización de títulos, descripciones y etiquetas meta en función del contenido dinámico de la página implementando fecha de actualización de datos.
- Generación de Sitemap XML Dinámico: Para asegurar la correcta indexación de todas las URLs se genera varios ficheros xml desde la API, ya que la SPA solo se sirve como frontend. También se generan de forma automática ficheros markdown LLMS.TXT una estrategia centrada en la Generación y Extracción Óptima de información para los modelos de lenguaje grandes (LLMs) y otros crawlers de IA.
- Implementación de Schema Markup: Para proporcionar información estructurada a los motores de búsqueda sobre los productos y la empresa.
- Url's combinadas con códigos y slugs: Se muestran dinámicamente o bien crean una dirección desde sitemap.xml.
Si tienes la precaución de explorar las páginas creadas dinámicamente desde este apartado de código :
const metaData = computed(() => ({title: `${config.value.TITLE.slice(0, 69)}`,meta: {description: {name: 'description',content: `${config.value.META_DESCRIPTION.slice(0, 150)}`,},keywords: {name: 'keywords',content: `${config.value.META_KEYWORDS}`,},twitterTitle: {name: 'twitter:title',content: `${config.value.META_KEYWORDS}`,},twitterDescription: {name: 'twitter:description',content: `${config.value.META_DESCRIPTION.slice(0, 150)}`,},twitterCard: { name: 'twitter:card', content: 'product' },ogLocale: {property: 'og:locale',content: import.meta.env.VITE_DEFAULT_LOCALE,},ogTitle: {property: 'og:title',content: `${config.value.TITLE.slice(0, 69)}`,},ogDescription: {property: 'og:description',content: `${config.value.META_DESCRIPTION.slice(0, 150)}`,},robots: {name: 'robots',content: 'index, follow',},},link: {canonical: {rel: 'canonical',href: `${window.location.origin}${isHashMode ? '/#' : ''}${route.fullPath}`,},},}));
const generateJsonLd = computed(() => {const existingScripts = document.head.querySelectorAll('script[type="application/ld+json"]');existingScripts.forEach((s) => s.remove());return jsonLd.value;});let jsonLdScript: HTMLScriptElement | null = null;jsonLdScript = document.createElement('script');jsonLdScript.setAttribute('type', 'application/ld+json');jsonLdScript.textContent = JSON.stringify(generateJsonLd.value);document.head.appendChild(jsonLdScript);
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Product","description":"CAJONERA 3 SOBREMESA CAJONES VERDE 441 F18 JAR 8414926593577","name":"CAJONERA 3 SOBREMESA CAJONES VERDE 441 F18 JAR","image":"https://dacartoys.es/product/view/16214","url":"https://dacartoys.es/product/view/16214","offers":{"@type":"Offer","availability":"https://schema.org/InStock","price":0,"priceCurrency":"EUR","priceValidUntil":"2025-05-22"},"aggregateRating":{"@type":"AggregateRating","ratingValue":4.5,"reviewCount":89}}</script>
Comentarios
Publicar un comentario