OGP-Checker & Simulator
- Sicher
- Die Diagnoseergebnisse werden nirgends gespeichert oder veröffentlicht.
Hinweise
Ein Tool, um OGP-Tag-Einstellungen zu prüfen und zu simulieren, wie eine Seite beim Teilen in sozialen Netzwerken erscheint.
Nützlich beim Erstellen von OGP-Bildern und beim Testen von HTML-Meta-Tags.
Eingabequelle
Wähle eine von drei Methoden.
| Website-URL | Geeignet für öffentlich erreichbare Websites. |
|---|---|
| HTML-Quelltext | Geeignet für Seiten in Entwicklung oder hinter Zugriffsbeschränkungen. |
| Bilddatei | Geeignet, um das Aussehen eines OGP-Bildes während der Erstellung zu prüfen. |
Diagnoseergebnis
Bewertung in drei Stufen.
| Bewertung A | Erfüllt alle empfohlenen Anforderungen. |
|---|---|
| Bewertung B | Erfüllt Pflichtangaben, aber es gibt empfohlene Punkte. |
| Bewertung C | Einige Punkte müssen behoben werden. |
Empfohlenes Beispiel
Die folgenden Einstellungen decken die wichtigsten SNS-Plattformen ab.
<meta property="og:title" content="Seitentitel">
<meta property="og:description" content="Seitenbeschreibung">
<meta property="og:url" content="Seiten-URL">
<meta property="og:image" content="OGP-Bild-URL">
<meta property="og:type" content="Seitentyp">
<meta property="og:site_name" content="Seitenname">
<meta name="twitter:card" content="Twitter-Card-Typ">Tag-Details
Basis-OGP-Tags
Tags, die in allen SNS verwendet werden können. Es wird empfohlen, alle folgenden zu setzen.
Verwende das Attribut `property`.
<meta property="og:title" content="Seitentitel">
<meta property="og:description" content="Seitenbeschreibung">
<meta property="og:url" content="Seiten-URL">
<meta property="og:image" content="OGP-Bild-URL">
<meta property="og:type" content="Seitentyp">
<meta property="og:site_name" content="Seitenname">og:title
Setzt den Seitentitel. In der Regel derselbe Wert wie im `title`-Tag.
Bei X (Twitter) kann eine Twitter Card deaktiviert werden, wenn dies fehlt – daher praktisch erforderlich.
<meta property="og:title" content="Seitentitel">Beispiel
<meta property="og:title" content="OGP-Checker & Simulator">og:description
Setzt die Seitenbeschreibung. In der Regel derselbe Wert wie im `description`-Tag.
Bei den meisten SNS kann, wenn weggelassen, `description` als Fallback verwendet werden.
<meta property="og:description" content="Seitenbeschreibung">Beispiel
<meta property="og:description" content="Diagnostiziere OGP-Einstellungen und sieh dir an, wie deine Seite beim Teilen in sozialen Netzwerken aussieht – anhand einer URL oder des HTML-Quelltexts. Unterstützt X, Facebook und LINE und kann auch aus einer Bilddatei simulieren.">og:url
Setze die Zielseiten-URL als absolute URL.
<meta property="og:url" content="Seiten-URL">Beispiel
<meta property="og:url" content="https://develop.tools/ogp-simulator/">og:image
Setze die OGP-Bild-URL als absolute URL. Empfohlene Größe: `1200px`×`630px`.
Da es ggf. als 1:1 angezeigt wird, halte wichtige Informationen im zentralen `630px`×`630px`-Bereich.
<meta property="og:image" content="OGP-Bild-URL">Beispiel
<meta property="og:image" content="https://develop.tools/_assets/img/meta/ogp/tools/ogp-simulator.png">og:type
Gibt den Seitentyp an.
| website | Website-Startseite |
|---|---|
| article | Nicht-Startseiten wie Artikelseiten |
| blog | Blog-Startseite |
| product | Produkt-/Service-Detailseiten |
<meta property="og:type" content="Seitentyp">Beispiel
<meta property="og:type" content="article">og:site_name
Gibt den Websitenamen an. Meistens auf allen Seiten gleich.
<meta property="og:site_name" content="Seitenname">Beispiel
<meta property="og:site_name" content="develop.tools">X (Twitter)-Tags
Tags, die von X (ehemals Twitter) priorisiert werden.
Wenn Basis-OGP-Tags gesetzt sind, kannst du all diese ohne Probleme weglassen.
Setze `twitter:card` nur, wenn du die Thumbnail-Größe steuern möchtest.
Verwende das Attribut `name`.
<meta name="twitter:card" content="Twitter-Card-Typ">
<meta name="twitter:title" content="Seitentitel">
<meta name="twitter:description" content="Seitenbeschreibung">
<meta name="twitter:image" content="Thumbnail-Bild-URL">
<meta name="twitter:site" content="X/Twitter-Benutzername der Website">
<meta name="twitter:creator" content="X/Twitter-Benutzername des Autors">twitter:card
Setzt den Twitter-Card-Typ. Gib ihn an, wenn du ein großes Thumbnail möchtest.
Wenn weggelassen, wird es `summary`.
| summary | Kleines Thumbnail (quadratisch) + Website-Info nebeneinander |
|---|---|
| summary_large_image | Großes Thumbnail + Website-Info untereinander |
<meta name="twitter:card" content="Twitter-Card-Typ">Beispiel
<meta name="twitter:card" content="summary_large_image">Facebook-Tags
Tags, die von Facebook verwendet werden.
Gib sie an, wenn du Facebook-spezifische Analytics-Funktionen nutzen möchtest.
<meta property="fb:app_id" content="Facebook-App-ID">