Hur man lägger till Open Graph-taggar på vilken webbplats som helst

Oavsett om du använder rå HTML, WordPress, Next.js eller Webflow — här är exakt hur du lägger till Open Graph-taggar på din webbplats.

Metod 1: rå HTML (valfri statisk webbplats)

Om du har direkt tillgång till dina HTML-filer, lägg till dessa taggar i avsnittet på varje sida:

<!-- 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" />

Se till att webbadressen og:image är absolut (börjar med https://). Relativa sökvägar som /images/preview.jpg kommer inte att fungera.

Metod 2: WordPress (Yoast SEO)

Om du använder WordPress med Yoast SEO, hanteras OG-taggar automatiskt:

1. Installera och aktivera Yoast SEO-plugin
2. Redigera vilken sida eller inlägg som helst
3. Scrolla ner till Yoast SEO-metabox
4. Klicka på fliken "Socialt".
5. Ställ in "Facebook titel", "Facebook beskrivning" och "Facebook bild"
6. Yoast genererar automatiskt rätt og:-taggar

Yoast lägger också till Twitter Card-taggar automatiskt. Du kan konfigurera dem under Yoast SEO → Social → Twitter.

Metod 3: WordPress (RankMath)

RankMath fungerar på samma sätt som Yoast men med lite andra inställningar:

1. Installera och aktivera RankMath SEO
2. Redigera vilken sida eller inlägg som helst
3. Hitta RankMath-metaboxen
4. Gå till fliken "Socialt".
5. Ställ in den sociala bilden, titeln och beskrivningen
6. RankMath genererar automatiskt OG- och Twitter Card-taggar

Metod 4: Next.js (App-router)

I Next.js 13+ (App Router), använd 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'],
  },
};

För dynamiska sidor (som blogginlägg), generera 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åra Open Graph-taggar i Next.js-guiden för ett djupare dyk.

Metod 5: Webflow

Webflow har inbyggda Open Graph-inställningar:

1. Gå till dina projektinställningar
2. Klicka på "SEO-inställningar"
3. Under "Standard metataggar" ställer du in Facebook/OG-bilden, titeln och beskrivningen
4. För enskilda sidor, gå till sidinställningarna → SEO-inställningar och åsidosätt standardinställningarna
5. Webflow genererar automatiskt de korrekta OG-taggarna

Metod 6: Anpassad CMS eller Headless Setup

Om du använder en huvudlös CMS (Contentful, Sanity, Strapi, etc.), lägg till OG-taggar i ditt frontend-ramverk. Processen är densamma som Next.js — generera taggarna dynamiskt från dina CMS-data och injicera dem på sidan .

Quick Fix Checklista

Vanliga frågor