Was ist (OGP.me) Open Graph Protokoll?

Die Grundsätze des Open Graph Protokolls

Open Graph Protokoll (OGP) ist eine Reihe von Anweisungen deren Zweck es ist, den Titel, die Beschreibung, die URL und das Bild der Webseite zu betonen, die über das soziale Netzwerk Facebook geteilt werden.

Das Open Graph-Protokoll wurde 2010 von den Ingenieuren entwickelt und wird ausschliesslich zur Steuerung der Verknüpfung und Weitergabe von Inhalten in diesem sozialen Netzwerk verwendet.

Der Hauptzweck des OGP Protokolls

Der Hauptzweck dieses Protokolls besteht darin, den hervorgehobenen Inhalt zu integrieren und im Facebook anzuzeigen und sein Aussehen zu kontrollieren oder wie der hervorgehobene Inhalt angezeigt wird.

Mit Hilfe des OGP Protokolls übernimmt Facebook den Titel (og:title), die Beschreibung (og:decription), die URL-Adresse (og:url), das Foto (og:image) und die Fotogröße (og:image:width, og:image:height), die Sprache (og:locale), das Objekttyp (og:type), den Namen der Webseite (og:site_name), den Administrator des Facebookprofils (fb:admin) und die Nummer der Facebook-App die der Administrator der Webseite (fb:app_id), des Blogs oder des Blogartikels erstellt hat (fb:app_id), die beim Teilen (URL share) oder “gafällt mir” Markierungen der Webseite (Page like) übernommen werden.

Die Integration des OGP Protokolls in die Webseite

OGP integriert sich in eine Webseite, indem es sie zu seinem <head> Meta Element hinzufügt. Um das ogp-Protokoll zu integrieren, müssen Sie ein Präfix eingeben und die Attribute definieren, was Sie tun können, wenn Sie dem Tutorial, das wir in 9 einfachen Schritten geschrieben haben, folgen:

Der erste Schritt besteht darin, das Präfix <head> im Meta-Element hervorzuheben und hinzuzufügen und auf diese Weise betonen, dass das OGP im Seitencode vorhanden ist:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
Danach fügen wir den Titel der Webseite hinzu:
<meta property="og:title" content="Webseitentitel" />
Der dritte Schritt wäre, eine Beschreibung der Webseite hinzuzufügen (vorzugsweise bis zu 156 Zeichen inklusive Leerzeichen):
<meta property="og:description" content="Webseitenbeschreibung" />
Der vierte Schritt ist, ein Tag mit der URL-Adresse der Seite einzugeben:
<meta property="og:url" content="URL-Addresse der Webseite" />
Dann müssen wir die URL des Bildes betonen und angeben, das beim Teilen oder „gefällt mir“ Markierungen der Seite im sozialen Netzwerk Facebook verwendet wird:
<meta property="og:image" content="Bild-URL der Webseite" />
Hier soll man die Bildergröße aus dem vorigen Schritt angeben:
<meta property="og:image:width" content="Bildbreite der Webseite" />
<meta property="og:image:height" content="Bildhöhe der Webseite" />
Der siebte Schritt ist, den Namen der Website, Blog, Privatperson oder Unternehmen einzugeben:
<meta property="og:site_name" content="Webseitenname" />
Der achte Schritt ist die Hinzufügung und Bestimmung eines Objekttyps, dh das Auswählen eines Tags, der am besten beschreibt, ob es sich um eine Webseite, ein persönliches Portfolio, einen Autor, ein Buch, ein Restaurant, ein Blog oder einen Blogartikel handelt, usw.:
<meta property="og:type" content="Webseitentyp" />

Die momentan verfügbaren Objekte sind (website, article, book, books.author, books.genre, business.business, fitness.course, music.album, music.musician, music.playlist, music.radio_station, music.song, object, place, product, product.group, product.item, profile, quick_election.election, restaurant, restaurant.menu, restaurant.menu_item, video.episode, restaurant.menu_section, video.movie, video.tv_show, video.other).
*Es ist möglich, vorhandene oder neue Objektattribute aufgrund der kontinuierlichen Entwicklung des Open Graph Protokolls zu ändern.
Der letzte Schritt ist, die ID des privaten Facebook-Profils des Administrators hinzuzufügen, aus dem die Unternehmens-Facebookseite erstellt wurde:
<meta property="fb:admins" content="Facebook-Admin Id-Nummer" />

oder das Hinzufügen einer Facebook-ID-Nummer, die Sie aus dem Facebokprofil eines Administrators erstellt haben:
<meta property="fb:app_id" content="Facebook-App Id-Nummer" />

Open Graph Facebook Ausschnitte

Ein Beispiel für die Seite, die auf dem Facebook geteilt wird:

Verknüpfung der Webseite mit dem Facebook-Profil via #OpenGraph Protokoll
Gepostet von PopArt Studio Deutschland am Mittwoch, 6. September 2017

Ein Beispiel wie sieht Open Graf Protokoll auf dem Seitencode, auf der Sie sich zur Zeit befinden, aus:


                    	<head lang="de" prefix="og: http://ogp.me/ns#">

                    	<meta property="og:title" content="Was ist (OGP.me) Open Graph Protokoll?" />

                        <meta property="og:type" content="website" />

                        <meta property="og:url" content="https://www.popwebdesign.de/was-ist-ogp.html" />

                        <meta property="og:image" content="https://www.popwebdesign.de/img/tutorials/open-graph-protokoll-share.jpg" />

                        <meta property="og:image:width" content="1200" />

                        <meta property="og:image:height" content="630" />

                        <meta property="og:site_name" content="PopArt Studio" />

                        <meta property="fb:admins" content="100000505383935" />

                        <meta property="og:description" content="Open Graph Protokoll (OGP) ist eine Reihe von Anweisungen deren Zweck es ist, den Titel, die Beschreibung, die URL und das Bild der Webseite zu betonen, die über das soziale Netzwerk Facebook geteilt werden." />

Lesen Sie mehr darüber:

Links und Quellen:

Die offizielle Facebook Seite für die Apperstellung

Was ist OGP Protokoll?

OGP enthält eine Reihe von Anweisungen, mit denen das soziale Netzwerk Facebook bestimmte Seitenelemente zieht und diese beim Teilen von Inhalten anzeigt. In dieser nützlichen Anleitung erfahren Sie, wie Sie es auf der Website implementieren.

Die Grundsätze des Open Graph Protokolls

Der Hauptzweck des OGP Protokolls

Die Integration des OGP Protokolls in die Webseite

Open Graph Facebook Ausschnitte

Tutorials-Kategorien

Webseite teilen