Slik legger du til Open Graph-tagger på et hvilket som helst nettsted

Enten du bruker rå HTML, WordPress, Next.js eller Webflow — her er nøyaktig hvordan du legger til Open Graph-tagger på nettstedet ditt.

Metode 1: Rå HTML (hvilket som helst statisk nettsted)

Hvis du har direkte tilgang til HTML-filene dine, legg til disse kodene i -delen av 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-adressen er absolutt (begynner med https://). Relative baner som /images/preview.jpg vil ikke fungere.

Metode 2: WordPress (Yoast SEO)

Hvis du bruker WordPress med Yoast SEO, håndteres OG-tagger automatisk:

1. Installer og aktiver Yoast SEO-plugin
2. Rediger en side eller et innlegg
3. Rull ned til Yoast SEO-metaboksen
4. Klikk på "Sosial"-fanen
5. Angi "Facebook tittel", "Facebook beskrivelse" og "Facebook bilde"
6. Yoast genererer automatisk de riktige og:-taggene

Yoast legger også til Twitter Card-tagger automatisk. Du kan konfigurere dem under Yoast SEO → Sosialt → Twitter.

Metode 3: WordPress (RankMath)

RankMath fungerer på samme måte som Yoast, men med litt andre innstillinger:

1. Installer og aktiver RankMath SEO
2. Rediger en side eller et innlegg
3. Finn RankMath-metaboksen
4. Gå til "Sosial"-fanen
5. Angi det sosiale bildet, tittelen og beskrivelsen
6. RankMath genererer OG- og Twitter Card-tagger automatisk

Metode 4: Next.js (App-ruter)

I Next.js 13+ (App Router), bruk 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 blogginnlegg), 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 våre Open Graph-tagger i Next.js-guiden for et dypere dykk.

Metode 5: Webflow

Webflow har innebygde Open Graph-innstillinger:

1. Gå til prosjektinnstillingene dine
2. Klikk på "SEO-innstillinger"
3. Angi Facebook/OG-bilde, tittel og beskrivelse under "Standard metakoder"
4. For individuelle sider, gå til sideinnstillingene → SEO-innstillinger og overstyr standardinnstillingene
5. Webflow genererer automatisk de riktige OG-taggene

Metode 6: Custom CMS eller Headless Setup

Hvis du bruker en hodeløs CMS (Contentful, Sanity, Strapi, etc.), legg til OG-tagger i frontend-rammeverket ditt. Prosessen er den samme som Next.js – generer taggene dynamisk fra CMS-dataene dine og injiser dem på siden .

Quick Fix Sjekkliste

Ofte stilte spørsmål