Sådan tilføjes Open Graph-tags til enhver hjemmeside

Uanset om du bruger rå HTML, WordPress, Next.js eller Webflow - her er præcis, hvordan du tilføjer Open Graph-tags til dit websted.

Metode 1: Rå HTML (enhver statisk hjemmeside)

Hvis du har direkte adgang til dine HTML-filer, skal du tilføje disse tags i sektionen på hver side:

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description." />
<meta name="twitter:image" content="https://yoursite.com/images/preview.jpg" />

Sørg for, at og:image URL'en er absolut (starter med https://). Relative stier som /images/preview.jpg vil ikke fungere.

Metode 2: WordPress (Yoast SEO)

Hvis du bruger WordPress med Yoast SEO, håndteres OG-tags automatisk:

1. Installer og aktiver Yoast SEO plugin
2. Rediger enhver side eller ethvert indlæg
3. Rul ned til Yoast SEO-metaboksen
4. Klik på fanen "Social".
5. Indstil "Facebook titel", "Facebook beskrivelse" og "Facebook billede"
6. Yoast genererer automatisk de korrekte og: tags

Yoast tilføjer også Twitter Card tags automatisk. Du kan konfigurere dem under Yoast SEO → Social → Twitter.

Metode 3: WordPress (RankMath)

RankMath fungerer på samme måde som Yoast, men med lidt andre indstillinger:

1. Installer og aktiver RankMath SEO
2. Rediger enhver side eller ethvert indlæg
3. Find RankMath-metaboksen
4. Gå til fanen "Social".
5. Indstil det sociale billede, titel og beskrivelse
6. RankMath genererer automatisk OG- og Twitter Card-tags

Metode 4: Next.js (App-router)

I Next.js 13+ (App Router) skal du bruge Metadata API:

export const metadata = {
  title: 'Your Page Title',
  description: 'A compelling description.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
  },
};

For dynamiske sider (som blogindlæg), generer metadata i generateMetadata():

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

Se vores Open Graph tags i Next.js guide for et dybere dyk.

Metode 5: Webflow

Webflow har indbyggede Open Graph indstillinger:

1. Gå til dine projektindstillinger
2. Klik på "SEO-indstillinger"
3. Indstil Facebook/OG-billedet, titel og beskrivelse under "Standard Meta Tags"
4. For individuelle sider skal du gå til sideindstillingerne → SEO-indstillinger og tilsidesætte standardindstillingerne
5. Webflow genererer automatisk de korrekte OG-tags

Metode 6: Brugerdefineret CMS eller hovedløs opsætning

Hvis du bruger en hovedløs CMS (Contentful, Sanity, Strapi osv.), skal du tilføje OG-tags i din frontend-ramme. Processen er den samme som Next.js — generér taggene dynamisk fra dine CMS-data og injicer dem på siden .

Tjekliste til hurtig rettelse

Ofte stillede spørgsmål