So fügen Sie Open Graph-Tags zu jeder Website hinzu

Egal, ob Sie rohes HTML, WordPress, Next.js oder Webflow verwenden – hier erfahren Sie genau, wie Sie Ihrer Website Open Graph-Tags hinzufügen.

Methode 1: Rohes HTML (jede statische Website)

Wenn Sie direkten Zugriff auf Ihre HTML-Dateien haben, fügen Sie diese Tags im Abschnitt jeder Seite hinzu:

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

Stellen Sie sicher, dass die URL og:image absolut ist (beginnt mit https://). Relative Pfade wie /images/preview.jpg funktionieren nicht.

Methode 2: WordPress (Yoast SEO)

Wenn Sie WordPress mit Yoast SEO verwenden, werden OG-Tags automatisch verarbeitet:

1. Installieren und aktivieren Sie das Yoast SEO-Plugin
2. Bearbeiten Sie eine beliebige Seite oder einen beliebigen Beitrag
3. Scrollen Sie nach unten zur Yoast SEO-Metabox
4. Klicken Sie auf die Registerkarte „Soziale Netzwerke“.
5. Legen Sie „Facebook Titel“, „Facebook Beschreibung“ und „Facebook Bild“ fest.
6. Yoast generiert automatisch die richtigen og:-Tags

Yoast fügt außerdem automatisch Twitter Card-Tags hinzu. Sie können sie unter Yoast SEO → Social → Twitter konfigurieren.

Methode 3: WordPress (RankMath)

RankMath funktioniert ähnlich wie Yoast, jedoch mit etwas anderen Einstellungen:

1. Installieren und aktivieren Sie RankMath SEO
2. Bearbeiten Sie eine beliebige Seite oder einen beliebigen Beitrag
3. Suchen Sie die RankMath-Metabox
4. Gehen Sie zur Registerkarte „Soziale Netzwerke“.
5. Legen Sie das soziale Bild, den Titel und die Beschreibung fest
6. RankMath generiert automatisch OG- und Twitter Card-Tags

Methode 4: Next.js (App Router)

Verwenden Sie in Next.js 13+ (App Router) die Metadaten-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'],
  },
};

Generieren Sie für dynamische Seiten (wie Blogbeiträge) Metadaten 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],
    },
  };
}

Weitere Informationen finden Sie in unseren Open Graph Tags im Next.js Leitfaden.

Methode 5: Webflow

Webflow verfügt über integrierte Open Graph-Einstellungen:

1. Gehen Sie zu Ihren Projekteinstellungen
2. Klicken Sie auf „SEO-Einstellungen“
3. Legen Sie unter „Standard-Meta-Tags“ das Facebook/OG-Bild, den Titel und die Beschreibung fest
4. Gehen Sie für einzelne Seiten zu den Seiteneinstellungen → SEO-Einstellungen und überschreiben Sie die Standardeinstellungen
5. Webflow generiert automatisch die richtigen OG-Tags

Methode 6: Benutzerdefiniertes CMS oder Headless-Setup

Wenn Sie ein Headless CMS (Contentful, Sanity, Strapi usw.) verwenden, fügen Sie OG-Tags in Ihrem Frontend-Framework hinzu. Der Vorgang ist der gleiche wie bei Next.js – generieren Sie die Tags dynamisch aus Ihren CMS-Daten und fügen Sie sie in die Seite ein.

Quick-Fix-Checkliste

Häufig gestellte Fragen