JavaScript SEO (React, Vue, Angular)

JavaScript SEO: Teknisk guide til React, Vue & Angular

Moderne hjemmesider og webshops bygget med frameworks som React, Vue og Angular giver fantastiske brugeroplevelser. For søgemaskiner kan de dog skabe et alvorligt problem: Hvis indholdet er usynligt for crawleren, eksisterer det ikke. At kunne løse JavaScript SEO problemer er ikke længere en “nice-to-have” optimering; det er fundamentet for moderne teknisk SEO (Søgemaskineoptimering).

Denne guide er for dig, der er udvikler eller teknisk marketing-ansvarlig. Vi springer flosklerne over og går direkte til de tekniske løsninger, faldgruber i frameworks som Vue, og konkrete kode-eksempler, der sikrer, at dit JavaScript-drevne site bliver indekseret korrekt.

Hvad er JavaScript SEO, og hvorfor er det kritisk?

JavaScript er ikke i sig selv dårligt for SEO, men det kan skabe udfordringer. Søgemaskiner skal køre JavaScript’et for at se indholdet – en proces kaldet rendering – hvilket kan forsinke eller forhindre indeksering, hvis koden er kompleks eller afhængig af klient-side handlinger.

Kernen i problemet er, at der findes to versioner af din hjemmeside: den rå HTML-kode serveren sender, og den færdige side, som brugeren ser i browseren, efter alt JavaScript er kørt. Når Googlebot ankommer, ser den i første omgang den rå HTML. For en typisk Single Page Application (SPA) kan den fil være skuffende tom – ofte bare et skelet med en enkelt <div id="app"></div> og et link til en stor JavaScript-fil.

Google forsøger at “rendere” siden ved at køre JavaScript’et, ligesom en browser gør. Denne proces sker i en “anden bølge” af indeksering og er ressourcekrævende. Hvis din kode er for kompleks, afhængig af API-kald, der tager for lang tid, eller indeholder fejl, kan renderingen mislykkes. Resultatet er, at Google aldrig ser dit vigtige indhold.

CSR vs. SSR vs. Dynamic Rendering: En hurtig oversættelse

For at løse problemet findes der tre primære metoder til at levere indhold. Dit valg her har direkte konsekvenser for din synlighed.

• Client-Side Rendering (CSR):
  1. Serveren sender en næsten tom HTML-fil til browseren.
  2. Browseren downloader og kører JavaScript-filerne.
  3. Indholdet bygges og vises for brugeren.
  • SEO-ulempe: Googlebot modtager en tom side i første omgang og skal bruge ekstra ressourcer og tid på at rendere den. Risikoen for fejl er høj.
• Server-Side Rendering (SSR):
  Server-Side Rendering (SSR) er en metode, hvor en hjemmesides JavaScript-kode køres på serveren for at generere en fuld HTML-side, som sendes til browseren. Dette sikrer, at både brugere og søgemaskiner ser det fulde indhold med det samme, hvilket forbedrer indeksering og load-tider.
  1. Serveren modtager en anmodning om en side.
  2. Serveren kører JavaScript’et, henter data fra API’er og bygger en komplet HTML-fil.
  3. Den færdig-renderede HTML sendes til browseren.
  • SEO-fordel: Googlebot modtager en side fyldt med indhold fra start. Det er den mest robuste løsning for indeksering.
• Dynamic Rendering:
  1. Serveren identificerer, hvem der anmoder om siden (en bruger eller en søgemaskine-bot).
  2. Hvis det er en bruger, serveres den normale CSR-version.
  3. Hvis det er en bot, serveres en præ-renderet, statisk HTML-version.
  • SEO-fordel: Sikrer, at bots altid får indhold. Det er en god mellemløsning for ældre applikationer, hvor en fuld SSR-implementering er for omkostningstung.

Framework-sammenligning: SEO for React, Vue & Angular

Selvom alle tre frameworks kan opnå god synlighed, er deres udgangspunkter og standardløsninger forskellige.

Tekniske SEO-løsninger i React (med kode)

For React-applikationer er Server-Side Rendering med Next.js standardløsningen til at sikre korrekt indeksering. Et klassisk problem er en produktside, hvor titel og beskrivelse hentes fra et API og derfor ikke er til stede i den oprindelige HTML.

Next.js løser dette elegant med getServerSideProps og Head-komponenten. Forestil dig en produktside på pages/products/[id].js:

import Head from ‘next/head’; function ProductPage({ product }) { if (!product) { return <div>Produkt ikke fundet</div>; } return ( <div> <Head> <title>{product.name} – Vores Webshop</title> <meta name=”description” content={product.description} /> </Head> <h1>{product.name}</h1> <p>{product.description}</p> {/* Resten af din produktkomponent */} </div> ); } export async function getServerSideProps(context) { const { id } = context.params; const res = await fetch(`https://api.example.com/products/${id}`); const product = await res.json(); return { props: { product }, // ‘product’ vil blive sendt som prop til din komponent }; } export default ProductPage;

Når Googlebot nu crawler /products/123, modtager den en HTML-fil, hvor <title> og <meta name="description"> allerede er udfyldt med produktets data.

Vue.js SEO: Faldgruber og løsninger (med kode)

For Vue er Nuxt.js det framework, der løser de samme udfordringer. En typisk faldgrube i en ren Vue SPA er, at alle sider deler den samme index.html, og metadata opdateres kun på klientsiden, hvilket søgemaskiner kan overse.

Med Nuxt 3 er det ligetil at sætte dynamiske metadata, der bliver server-renderet. Her er et eksempel på en pages/posts/[id].vue side, der henter data og opdaterer sidens head:

<template> <div> <h1>{{ post.title }}</h1> <p>{{ post.body }}</p> </div> </template> <script setup> const route = useRoute(); const { id } = route.params; // Hent data fra et API const { data: post } = await useFetch(`https://jsonplaceholder.typicode.com/posts/${id}`); // Opdater head-tags dynamisk useHead({ title: () => post.value ? `${post.value.title} | Min Blog` : ‘Indlæg’, meta: [ { name: ‘description’, content: () => post.value ? post.value.body.substring(0, 155) : ‘Læs dette blogindlæg’ } ] }); </script>

Denne kode sikrer, at når en side som /posts/1 anmodes, vil Nuxt.js på serveren hente data, generere de korrekte meta-tags og levere en fuldt renderet HTML-side.

Angular Universal: Sikker indeksering (med kode)

Angular-udviklere kan bruge Angular Universal til SSR. For at administrere title og meta-tags dynamisk, bruger man Title og Meta services fra @angular/platform-browser.

Her er et eksempel på, hvordan en product-detail.component.ts kan opdatere sidens metadata, når komponenten initialiseres:

import { Component, OnInit } from ‘@angular/core’; import { Title, Meta } from ‘@angular/platform-browser’; import { ActivatedRoute } from ‘@angular/router’; import { ProductService } from ‘../product.service’; // Din egen service til at hente data @Component({ selector: ‘app-product-detail’, templateUrl: ‘./product-detail.component.html’, }) export class ProductDetailComponent implements OnInit { constructor( private titleService: Title, private metaService: Meta, private route: ActivatedRoute, private productService: ProductService ) {} ngOnInit(): void { const id = this.route.snapshot.paramMap.get(‘id’); this.productService.getProduct(id).subscribe(product => { this.titleService.setTitle(`${product.name} – Vores Butik`); this.metaService.updateTag({ name: ‘description’, content: product.summary }); }); } }

Når denne komponent bliver server-renderet via Angular Universal, vil den resulterende HTML indeholde de korrekte, dynamisk indsatte metadata.

Din JavaScript SEO-værktøjskasse

Fejlfinding af renderingsproblemer kræver de rette værktøjer. Her er fem, der går et spadestik dybere end de mest oplagte:

1. View Rendered Source (Chrome Extension): Løser det mest fundamentale problem: at se forskellen mellem den rå HTML, serveren sender, og den DOM, browseren renderer. Med et klik kan du sammenligne de to og se, om dit indhold loades som forventet.
2. Screaming Frog SEO Spider: Når du aktiverer JavaScript rendering (Configuration > Spider > Rendering), crawler den dit site, som Google ville gøre det. Den kan afsløre, om meta-tags, canonicals eller indhold mangler på tværs af tusindvis af sider.
3. Puppeteer: Et Node.js-bibliotek, der giver dig kontrol over en headless Chrome-browser. Du kan skrive scripts til at besøge dine sider og udtrække indhold fra den renderede DOM. Det er ideelt til at bygge automatiserede tests, der verificerer, at kritiske SEO-elementer altid er til stede efter rendering.
4. Prerender.io: En service til dynamisk rendering. Hvis du har en eksisterende CSR-app og ikke kan implementere SSR, cacher Prerender.io præ-renderede versioner af dine sider og serverer dem til bots.
5. Google Search Console (URL-inspektion): Det ultimative sandhedsvidne. “Test Live URL”-funktionen viser dig præcis, hvordan Googlebot ser din side, inklusiv den renderede HTML og eventuelle fejl, Google stødte på undervejs.

Få hjælp til JavaScript SEO af specialister

Krydsfeltet mellem moderne webudvikling og teknisk SEO er komplekst. En lille fejl i konfigurationen af Next.js eller Angular Universal kan gøre hele sektioner af dit site usynlige for Google. Det kræver en specialist, der forstår både koden og søgemaskinernes adfærd.

Hos Finally møder du kun senior-specialister, som kan gennemskue de tekniske udfordringer i React, Vue og Angular. Vores tilgang er datadrevet og fokuserer på at skabe profitabel, langsigtet synlighed, også for teknisk tunge hjemmesider.

Hvis du står over for udfordringer med indeksering, eller hvis du vil sikre et solidt teknisk fundament fra start, så lad os tage en snak. Du er velkommen til at kontakte os for en uforpligtende gennemgang. Læs flere dybdegående guides på vores blog.

Ofte Stillede Spørgsmål

Er React SEO-venlig?

Ja, hvis du bruger et framework som Next.js til at implementere Server-Side Rendering (SSR). Uden SSR sender en standard React-app en næsten tom HTML-fil, hvilket er en stor udfordring for søgemaskiner.

Hvordan håndterer Google crawling af JavaScript?

Google crawler i to bølger. Først den oprindelige HTML. Derefter, når ressourcerne tillader det, lægges siden i en kø til rendering, hvor JavaScript’et køres. Denne forsinkelse og proces kan føre til langsommere indeksering eller fejl.

Hvad er dynamisk rendering?

Det er en løsning, hvor serveren identificerer, om en anmodning kommer fra en bruger eller en søgemaskine-bot. Brugere får den almindelige JavaScript-app (client-side rendered), mens bots får en fuldt renderet, statisk HTML-version.

Skal jeg bruge Next.js for at opnå god SEO med React?

Det er den stærkeste anbefaling og de facto standardløsningen for seriøse SEO-projekter bygget i React. Det forenkler SSR, routing og datahentning på en måde, der er bygget til at være søgemaskinevenlig fra start.

Kan man lave SEO på en Single Page Application (SPA)?

Ja, men det kræver en bevidst strategi. Du skal implementere en løsning som Server-Side Rendering (f.eks. med Next.js eller Nuxt.js) eller dynamisk rendering for at sikre, at dit indhold er let tilgængeligt og indekserbart for søgemaskiner.