Utforska Next.js 13 nya metadata med SEO-stöd

Innehållsförteckning

1. Introduktion
2. Nyheterna efter Next.js 13.2
3. Borttagningen av head-filen
4. Metadata-funktionen i layout.js-filen
5. Användning av titel-taggen inom metadata
6. Användning av titelschabloner
7. Anpassning av metadata för specifika sidor
8. Användning av beskrivning i metadata
9. Användning av nyckelord i metadata
10. Andra nyttiga metadata-nycklar
11. Vikten av att byta till det nya metadata-systemet
12. Sammanfattning

👷‍♀️ Uppdaterad metadata-funktion i Next.js 13.3

Next.js 13.3 introducerade ett uppdaterat metadata-system som ersatte den tidigare head-filen. Detta nya system gör det möjligt att hantera metadata för webbsidor på ett effektivare sätt. I denna artikel kommer vi att utforska de olika aspekterna av detta nya metadata-system och hur det kan användas i din Next.js-app.

1. Introduktion

Next.js, den populära ramverket för React-baserade webbapplikationer, släppte nyligen sin senaste version, Next.js 13.3. En av de mest signifikanta förändringarna i denna uppdatering är avskaffandet av head-filen och införandet av en ny metadata-funktion inom layout.js-filen.

2. Nyheterna efter Next.js 13.2

Förståelsen av de nya funktionerna i Next.js 13.3 kräver lite bakgrundsinformation om förbättringarna som gjordes efter släppet av Next.js 13.2. I Next.js 13.2 infördes flera nya funktioner och förbättringar, men en specifik förändring påverkade strukturen för metadata i Next.js-appar.

3. Borttagningen av head-filen

Efter införandet av Next.js 13.2 försvann head-filen och blev föråldrad i version 13.3 och alla framtida versioner. Detta innebär att all metadata nu hanteras i layout.js-filen istället. Head-filen användes tidigare för att lagra metadata som titel, beskrivning och nyckelord för webbsidor. Med den nya uppdateringen flyttades metadata till layout.js-filen för att förbättra prestanda och underhållbarhet.

4. Metadata-funktionen i layout.js-filen

Genom att öppna layout.js-filen i Next.js 13.2 eller en nyare version kan du se en nyckel vid namn export const metadata. Detta är platsen där du nu lagrar all din metadata för webbsidor. Låt oss gå igenom de tillgängliga taggarna inom metadata-objektet.

4.1. Titel

En av de viktigaste nycklarna inom metadata är titeln. Detta styr namnet på din webbplats och fliken i webbläsaren. Du kan enkelt uppdatera titeln genom att ändra värdet på titel-egenskapen i metadata-objektet.

export const metadata = {
  title: "Min nästa webbplats",
};

4.2. Beskrivning

Beskrivningstagg används för att ge en kort sammanfattning av webbsidan. Denna beskrivning visas i sökresultat och kan hjälpa till att öka din webbplats synlighet på nätet.

export const metadata = {
  description: "En fantastisk webbplats som handlar om Next.js",
};

4.3. Nyckelord

Nyckelord kan användas för att hjälpa sökmotorer att förstå vad din webbsida handlar om. Du kan ange flera nyckelord genom att använda en kommaseparerad lista.

export const metadata = {
  keywords: "Next.js, webbutveckling, React, frontend",
};

5. Användning av titel-taggen inom metadata

Titeln är en viktig del av din metadata och påverkar hur din webbplats visas i webbläsaren. Genom att uppdatera titeln får du möjlighet att anpassa namnet på din webbplats eller sidan som besökaren ser.

5.1. Användning av titelschabloner

Om du vill ha en standardtitel för alla sidor i din webbplats kan du använda titelschabloner. Genom att definiera en standardtitel i root-layout-filen och använda platsmarkören %s kan du enkelt uppdatera titeln för varje sida separat.

// I root-layout-filen
export const metadata = {
  title: {
    default: "Min webbplats",
    template: "%s - Min webbplats",
  },
};

// I about-page-filen
export const metadata = {
  title: "Om oss",
};

6. Anpassning av metadata för specifika sidor

Ibland vill du ha mer kontroll över metadata för vissa specifika sidor. Du kan enkelt anpassa metadata för en sida genom att använda metadata-objektet direkt på sidan.

// I about-page-filen
export const metadata = {
  title: "Om oss",
  description: "En sida som berättar om oss och vår verksamhet.",
  keywords: "Om oss, information",
};

6.1. Användning av beskrivning i metadata

Beskrivningen är en viktig del av metadata som visas i sökresultaten och kan påverka hur besökare hittar och besöker din webbplats.

// I about-page-filen
export const metadata = {
  description: "En sida som berättar om oss och vår verksamhet.",
};

6.2. Användning av nyckelord i metadata

Nyckelord kan hjälpa sökmotorer att förstå innehållet på din webbsida. Genom att inkludera relevanta nyckelord kan du förbättra din webbplats synlighet och rangordning i sökresultaten.

// I about-page-filen
export const metadata = {
  keywords: "Om oss, information, verksamhet",
};

7. Andra nyttiga metadata-nycklar

Utöver titel, beskrivning och nyckelord finns det också andra metadata-nycklar som kan vara användbara för att förbättra din webbplats synlighet och funktionalitet. Här är några av dessa nycklar:

• Open Graph - tillåter din webbsida att bli en rik objekt i sociala nätverkens grafer. Genom att inkludera metadata för rubrik, beskrivning, URL och bilder kan du optimera förhandsvisningen av ditt innehåll på sociala medieplattformar som Facebook.
• Robots - ger dig kontroll över hur robotar och sökmotorer indexerar och visar din webbplats. Du kan ange olika inställningar för olika robotar, till exempel för att tillåta eller förhindra indexering av vissa sidor.
• Icons - låter dig ange ikoner för favicons och Apple-ikoner för din webbplats. En favicon är den lilla ikonen som visas bredvid webbadressen i webbläsarfältet.
• Twitter - erbjuder specifik metadata för Twitter-kort. Du kan anpassa titeln, beskrivningen, bilderna och ytterligare information som visas när din webbsida delas på Twitter.

8. Vikten av att byta till det nya metadata-systemet

Det är viktigt att byta till det nya metadata-systemet i Next.js 13.3 och framåt eftersom head-filen har avskaffats och kommer att tas bort i framtida versioner. Att använda det nya systemet för metadata säkerställer att din webbplats fortsätter att fungera korrekt när du uppgraderar till senare versioner av Next.js. Att ignorera denna förändring kan orsaka problem och bryta funktionaliteten på din webbplats.

9. Sammanfattning

Next.js 13.3 introducerar en uppdaterad metadata-funktion som ersätter den tidigare head-filen. Genom att använda denna nya metadata-funktion kan du enkelt hantera titlar, beskrivningar och nyckelord för dina webbsidor. Det är viktigt att byta till det nya metadata-systemet för att säkerställa att din webbplats fortsätter att fungera korrekt i framtida versioner av Next.js.

Njut av att utforska de nya möjligheterna med metadata i Next.js 13.3 och ge din webbplats en synlighets- och funktionalitetsboost!

FAQ

Q: Varför har head-filen tagits bort?

A: Head-filen har tagits bort för att förbättra prestanda och enklare underhåll av metadata i Next.js-appar.

Q: Vad händer om jag inte byter till det nya metadata-systemet?

A: Om du inte byter till det nya metadata-systemet kan det orsaka problem och bryta funktionaliteten på din webbplats när du uppgraderar till senare versioner av Next.js.

Q: Kan jag fortfarande använda beskrivning och nyckelord i metadata?

A: Ja, du kan fortfarande använda beskrivning och nyckelord i metadata för att förbättra sökbarheten för din webbplats.

Q: Vilka andra metadata-nycklar finns tillgängliga?

A: Förutom titel, beskrivning och nyckelord finns det också metadata-nycklar för Open Graph, robots, ikoner, Twitter och mycket mer.

Q: Var kan jag läsa mer om det nya metadata-systemet i Next.js 13.3?

A: Du kan läsa mer om det nya metadata-systemet i Next.js 13.3 genom att besöka Next.js-dokumentationen här.