Arreglar problemes de SSR angulars: la raó de les etiquetes no es mostra a la font de la pàgina

Comprendre els reptes angulars SSR i SEO

Optimització d'una aplicació angular per a Seo pot ser complicat, sobretot quan s’utilitza Relació del servidor (SSR). Molts desenvolupadors esperen que s’inclouran a l’origen de la pàgina que sovint apareixen a l’inspector del navegador s’inclouran que els desenvolupadors, com ara descripcions i paraules clau, però sovint només apareixen a l’inspector del navegador. 🧐

Aquest tema persisteix fins i tot amb Universal angular A les versions 16, 17 i fins i tot els darrers 19. Tot i activar Hidratació del client, Els desenvolupadors noten que, mentre que el títol de la pàgina s'actualitza correctament, les etiquetes meta continuen absents en la sortida protagonitzada pel servidor. La implementació del servei SEO sembla correcta, però les etiquetes meta previstes no apareixen a la font de la pàgina.

Imagineu -vos llançar una nova pàgina de productes i adonar -vos -ho Motors de cerca No puc veure les vostres descripcions de meta dissenyades amb cura. Això podria afectar dràsticament els vostres rànquings. Una situació similar va passar a una startup que va lluitar per classificar les seves pàgines dinàmiques perquè el rastrejador de Google no detectava les seves descripcions. 😨

En aquest article, desglossarem per què passa això, analitzarem el codi proporcionat i explorarem solucions efectives per garantir -ho SSR angular Les pàgines estan completament optimitzades per a SEO. Anem a endinsar -nos! 🚀

Millora de SEO en SSR angular: Comprensió de la implementació

Assegurant -ho SSR angular Les meta etiquetes són crucials per a Seo. Els scripts proporcionats tenen com a objectiu abordar el problema on apareixen Meta descripcions a l’inspector del navegador, però no a la font de la pàgina. El primer guió aprofita Angular Meta i Títol Els serveis per actualitzar dinàmicament les etiquetes meta, però com que aquests canvis es produeixen al costat del client, no persisteixen en la font inicial de HTML que el servidor. Això explica per què els motors de cerca poden no indexar correctament el contingut.

Per solucionar -ho, el segon guió introdueix Transformat, una característica angular que permet la transferència de dades entre el servidor i el client. Emmagatzemant metadades a Transformat, Ens assegurem que la informació sigui pre-protagonitzada pel servidor i que el client sigui recollit perfectament. Aquest mètode és especialment útil per a les aplicacions que es basen Enrutament dinàmic, ja que permet conservar metadades en esdeveniments de navegació sense confiar només en les actualitzacions del client. Imagineu-vos un lloc de comerç electrònic on cada pàgina de productes ha de tenir una descripció meta única: aquest mètode garanteix que els motors de cerca vegin els metadades correctes des del primer moment. 🛒

Finalment, el script del servidor Express.js proporciona una altra solució robusta modificant l’HTML generat abans d’enviar -lo al client. Aquest mètode garanteix que les meta etiquetes s’injectin directament a l’HTML pre-representat, garantint que són visibles a la font de pàgina inicial. Això és especialment important per a aplicacions a gran escala, on es pot basar només en la SSR integrada d'Angular, pot ser que no sigui suficient. Per exemple, un lloc web de notícies que genera milers d’articles dinàmicament necessitaria una injecció del servidor de meta etiquetes per optimitzar la indexació. 🔍

En general, la combinació d'Angular Meta servei, Transformat, i les modificacions de backend a través de Express.js proporcionen un enfocament complet per resoldre aquest problema de SEO comú. Cada mètode té els seus avantatges: mentre que la transferència millora la consistència de dades del servidor client, modificant el servidor Express.js garanteix el compliment complet de SSR. Els desenvolupadors han de triar l’enfocament més adequat en funció de la complexitat i les necessitats de SEO de la seva aplicació. Aplicant aquestes tècniques, podem assegurar -nos que les nostres aplicacions SSR angulars no només siguin funcionals, sinó que també optimitzin per als motors de cerca. 🚀

import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
@Injectable({ providedIn: 'root' })
export class SeoService {
  constructor(private titleService: Title, private meta: Meta) {}
  setTitle(title: string) {
    this.titleService.setTitle(title);
  }
  updateMetaTags(description: string) {
    this.meta.updateTag({ name: 'description', content: description });
  }
}

import { Injectable } from '@angular/core';
import { Meta, Title, TransferState, makeStateKey } from '@angular/platform-browser';
const SEO_KEY = makeStateKey('seoTags');
@Injectable({ providedIn: 'root' })
export class SeoService {
  constructor(private titleService: Title, private meta: Meta, private state: TransferState) {}
  setTitle(title: string) {
    this.titleService.setTitle(title);
  }
  updateMetaTags(description: string) {
    this.meta.updateTag({ name: 'description', content: description });
    this.state.set(SEO_KEY, { description });
  }
}

const express = require('express');
const { renderModuleFactory } = require('@angular/platform-server');
const { AppServerModuleNgFactory } = require('./dist/server/main');
const app = express();
app.get('*', (req, res) => {
  renderModuleFactory(AppServerModuleNgFactory, { document: '<app-root></app-root>', url: req.url })
    .then(html => {
      res.send(html.replace('<head>', '<head><meta name="description" content="Server Rendered Meta">'));
    });
});
app.listen(4000, () => console.log('Server running on port 4000'));

Optimització de SSR angular per a SEO: més enllà de les etiquetes

Tot assegurant -ho Meta etiquetes es mostren adequadament a SSR angular És crucial per a SEO, un altre aspecte crític és gestionar dades estructurades per a una millor indexació. Les dades estructurades, sovint en format JSON-LD, ajuden els motors de cerca a comprendre el context del vostre contingut. Sense això, fins i tot si hi ha les vostres etiquetes meta, els motors de cerca poden no comprendre completament la rellevància de la pàgina. Per exemple, un lloc de comerç electrònic pot utilitzar dades estructurades per definir els detalls del producte, millorant els rànquings en els resultats de la compra de Google. 🛒

Una altra estratègia essencial és la gestió de les URL canòniques per evitar problemes de contingut duplicats. Si la vostra aplicació genera diversos URL que condueixen al mateix contingut, els motors de cerca poden penalitzar la vostra classificació. Implementant una etiqueta canònica dinàmicament mitjançant SSR angular Assegura que la pàgina correcta estigui indexada. Un exemple del món real és un bloc amb pàgines de categories i etiquetes: sense una canonicalització adequada, Google pot considerar-los duplicar contingut, afectant els rànquings de cerca. 🔍

Finalment, l’optimització de la velocitat de càrrega de la pàgina en una configuració SSR és crucial per a SEO. Els motors de cerca prioritzen les pàgines de càrrega ràpida i el mal rendiment pot comportar taxes de rebot més elevades. Tècniques com ara Carregant mandrós Les imatges, l’optimització de les respostes del servidor i la implementació d’estratègies de memòria cau eficients milloren significativament l’experiència de l’usuari. Imagineu-vos un lloc web de notícies amb milers de visitants diaris, si cada sol·licitud desencadena una re-re-re-re-re-representació del servidor complet, el rendiment patirà. El contingut pre-protagonista de la memòria cau pot reduir dràsticament els temps de càrrega i millorar els rànquings de SEO. 🚀