Hoe u Open Graph-tags aan elke website kunt toevoegen

Of u nu onbewerkte HTML, WordPress, Next.js of Webflow gebruikt: hier leest u precies hoe u Open Graph-tags aan uw site toevoegt.

Methode 1: Raw HTML (elke statische website)

Als u directe toegang heeft tot uw HTML-bestanden, voegt u deze tags toe in de sectie van elke pagina:

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

Zorg ervoor dat de URL og:image absoluut is (begint met https://). Relatieve paden zoals /images/preview.jpg werken niet.

Methode 2: WordPress (Yoast SEO)

Als je WordPress gebruikt met Yoast SEO, worden OG-tags automatisch verwerkt:

1. Installeer en activeer de Yoast SEO-plug-in
2. Bewerk een pagina of bericht
3. Scroll naar beneden naar de Yoast SEO-metabox
4. Klik op het tabblad 'Sociaal'
5. Stel de "Facebook titel", "Facebook beschrijving" en "Facebook afbeelding" in
6. Yoast genereert automatisch de juiste og: tags

Yoast voegt ook automatisch Twitter Card-tags toe. Je kunt ze configureren onder Yoast SEO → Sociaal → Twitter.

Methode 3: WordPress (RankMath)

RankMath werkt op dezelfde manier als Yoast, maar met iets andere instellingen:

1. Installeer en activeer RankMath SEO
2. Bewerk een pagina of bericht
3. Zoek de RankMath-metabox
4. Ga naar het tabblad ‘Sociaal’
5. Stel het sociale imago, de titel en de beschrijving in
6. RankMath genereert automatisch OG- en Twitter Card-tags

Methode 4: Next.js (App-router)

Gebruik in Next.js 13+ (App Router) de 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'],
  },
};

Voor dynamische pagina's (zoals blogposts) genereert u metagegevens in 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],
    },
  };
}

Zie onze Open Graph Tags in Next.js gids voor een diepere duik.

Methode 5: Webflow

Webflow heeft ingebouwde Open Graph instellingen:

1. Ga naar uw projectinstellingen
2. Klik op ‘SEO-instellingen’
3. Stel onder 'Standaard-metatags' de Facebook/OG-afbeelding, titel en beschrijving in
4. Voor individuele pagina's gaat u naar de pagina-instellingen → SEO-instellingen en overschrijft u de standaardinstellingen
5. Webflow genereert automatisch de juiste OG-tags

Methode 6: Aangepaste CMS of Headless-installatie

Als je een headless CMS gebruikt (Contentful, Sanity, Strapi, etc.), voeg dan OG-tags toe aan je frontend-framework. Het proces is hetzelfde als bij Next.js: genereer de tags dynamisch op basis van uw CMS-gegevens en injecteer ze in de pagina .

Controlelijst voor snelle reparatie

Veelgestelde vragen