Open Graph Meta Data

    Hallo,


    ich würde gerne folgende Angaben in meinen Header einbinden:


    <meta name="twitter:card" content="summary" />

    <meta name="twitter:site" content="@TKoroni" />

    <meta name="twitter:creator" content="@TKoroni" />

    <meta name="twitter:title" content="Gutes Olivenöl kaufen - Die 10 besten Tipps, worauf Sie achten sollten | Taste of Koroni" />

    <meta name="twitter:description" content="Woher bekomme ich gutes Olivenöl? Was man nicht kaufen sollte. Was darf ein gutes Olivenöl kosten? Aussehen, Geruch und Geschmack" />

    <meta name="twitter:image" content="https://www.taste-of-koroni.de/media/images/gutes-olivenoel-kaufen-erkennen-big.jpg" />

    <meta name="twitter:image:width" content="702">

    <meta name="twitter:image:height" content="351">

    <meta name="og:site_name" content="Gutes Olivenöl kaufen - Die 10 besten Tipps, worauf Sie achten sollten | Taste of Koroni">

    <meta name="og:title" content="Gutes Olivenöl kaufen - Die 10 besten Tipps, worauf Sie achten sollten | Taste of Koroni">

    <meta name="og:type" content="website">

    <meta name="og:url" content="https://www.taste-of-koroni.de/gutes-olivenoel.php">

    <meta name="og:description" content="Woher bekomme ich gutes Olivenöl? Was man nicht kaufen sollte. Was darf ein gutes Olivenöl kosten? Aussehen, Geruch und Geschmack">

    <meta name="og:image " content="https://www.taste-of-koroni.de/media/images/gutes-olivenoel-kaufen-erkennen-big.jpg">

    <meta property="og:image:type" content="image/jpeg" />

    <meta name="og:image:width" content="702">

    <meta name="og:image:height" content="351">


    Nun ist dies ja bei einer Menge an Seiten eine wahnsinns Arbeit, kann man in den "content" Bereichen Platzhalter verwenden? Wenn ja wie würden die für den Titel oder die describtion aussehen?

    So Lösung gefunden:)


    die Seite von ZetaProducer war sehr hilfreich:


    https://developer.zeta-producer.com/objektmodell.html


    Nachfolgend der Code mit den Platzhaltern der nun funktioniert:


    Wesentlich die URL für die Images müssen von Hand eingebunden werden.



    Wäre das nicht als Idee für eine der kommenden Version (Seite > Bearbeiten > Google ) (Seite > Bearbeiten > Open Graph)?
    Google soll jetzt nicht rausgenommen werden, wollte nur zeigen wo ich die Platzierung der Graph Metas sehen würde.
    Ich meine, diese Open Graph Metas finde man ja auch nahezu auf jeder Website.

    Ich würde da eher für schema.org plädieren.


    Da strukturierte Daten nach schema.org nahezu unendlich viele Marker-Möglichkeiten haben, wäre es sinnvoll, statt fester Felder mit einer beliebigen Anzahl von Platzhaltern zu operieren, wo sich jeder dann die zu seiner Seite passenden Marker + Inhalt eintragen kann.

    Zitat von Hanabi

    Ich würde da eher für schema.org plädieren.


    Da strukturierte Daten nach schema.org nahezu unendlich viele Marker-Möglichkeiten haben, wäre es sinnvoll, statt fester Felder mit einer beliebigen Anzahl von Platzhaltern zu operieren, wo sich jeder dann die zu seiner Seite passenden Marker + Inhalt eintragen kann.

    je einfacher desto besser. :-)

    Wir möchten unsere Einstellungs-Dialoge nicht ausufern lassen und auch nicht zu kompliziert machen. Vor allem möchten wir nicht eine Vielzahl der Nutzer mit Einstellungen konfrontieren, die nur ein Bruchteil der Nutzer benötigt.

    Wenn das wirklich jemand braucht, lässt sich das ja problemlos bereits jetzt über das Attribut additional_meta umsetzen, oder (also beides)?

    Guten Morgen,


    ich denke die Umsetzung seitens Zeta dürfte bei den "Open Graph Daten" ohne großen Aufwand umzusetzen sein. Wie im Code ersichtlich sind ja schon einige Platzhalter im System integriert (wie <$= page.name $>, <$=page.title$>, <$=page.absoluteUrl$>, <$= page.description $>).


    Mit den Bildern dürfte das schon etwas schwieriger werden, hierfür gibt es keinen Platzhalter, hier müssten die Bilder vom html code integriert werden (wobei ich nicht weiß wie das funktionieren soll)

    Für Bilder am besten die OID des Bilds kopieren und im Quelltext als Bild-URL nutzen. Das ist weniger Fehleranfällig, als direkt einen absoluten Link einzufügen, wie Sie es getan haben. Bildverwaltung öffnen, Bild finden, Rechtsklick auf das Bild > Mehr > "Objekt-ID kopieren". Die Objekt-ID wird beim erstellen der Seite dann automatisch in die jeweils korrekte URL umgewandelt.

    Guten Morgen Herr S,


    ja das ist natürlich richtig, das Thema hatten wir schon einmal. Aber wie es halt so ist, hab ich daran nicht gedacht. Ich werde das nachbessern auch im Bezug auf die spätere Pflege des Projektes ist dies eine sehr sinvolle Maßnahme. Vielen Dank für den Hinweis.


    Aber selbst wenn Zeta dies nicht standardmäßig übernimmt, ist es überhaupt kein Problem dies selber zu integrieren, in Zeta sind alle Bordmittel (Attribute) vorhanden um den Code schnell und einfach zu integrieren.

    Nachtrag:


    Aufgrund der integration der Bilder sei es durch einen "absoluten Link der Bilder" oder durch "OID der Bilder" müssen die Open Graph Daten in die seitenbezogene Attribute eingefügt werden (für jede Seite separat). Hierfür bietet sich das Attribut additional_meta an. Sollte dies bereits von den globalen Attributen verwendet werden, dann sollte ein neues Attribut angelegt werden.

    Ich habe eine neues Attribut angelegt mit der Bezeichnung "additional_meta_open_graph_meta_data" und über Einstellungen - CSS - folgenden Begriff eingegeben #attribute(additional_meta_open_graph_meta_data) !!!Wichtig: nicht in <style>... </style> Tags einbauen.

    Warum nicht ggf. #attribute(additional_meta_open_graph_meta_data) auch im globalen Attribut additional_meta ausgeben, dann bleibt alles da wo es hin gehört? Denn mit CSS hat das ja eher nix zu tun…

    Ich habe das Attribut (additional_meta_open_graph_meta_data) in den Globalen Attributen neu erstellt, somit ist es auf allen Seiten verfügbar. Nur muss ich dem System ja mitteilen, wo das Attribut im html code ausgegeben werden soll, dafür habe ich die Lösung mit dem Eintrag in die css gefunden.

    additional_metawird bereits an der korrekten Position im Code ausgegeben. Wenn Sie nun das globale Attribut additional_meta noch um eine Zeile ergänzen, nämlich #attribute(additional_meta_open_graph_meta_data), dann wird an der selben Stelle auch noch der Inhalt dieses neuen (seitenspezifischen) Attributs ausgegeben. Das macht dann die Pflege auch durchschaubarer, weil alles an einer Stelle ist und man sich in einem halben Jahr nicht wundert, was man denn da "cleveres" in den Projekt CSS-Einstellungen so anstellt…

    Ja aber das Problem ist, dass ich in den Globalen Attributen (additional_meta) bereits einen Code für "apple-touch-icon" integriert habe welche für alle Seiten gilt. Da ich hier aber die "Open Graph Meta Daten" aufgrund der unterschiedlichen OID der Bilder nicht global eingeben kann, brauche ich ein neues Attribut welches ich dann auf der jeweiligen Seite individuell bearbeiten kann.


    Sobald ich das additional_meta mit den "apple-touch-icon" auf der jeweiligen Seite mit zusätzlichem Code ergänzen würde, würden erneute Änderungen im Global Attribut (additional_meta) nicht mehr übernommen werden.


    Deshalb muss ich doch dem System mitteilen wo ich das neue Attribut haben will und das habe ich über den css Eintrag dann mitgeteilt.

    Mißverständnis. Sie sollen in additional_meta kein Bild eingeben oder so, sondern nur die Zeile #attribute(additional_meta_open_graph_meta_data)

    Ja jetzt hab ichs verstanden Herr S und erst mal kräftig aufgeräumt, jetzt ist alles zentral und auf den 1. Blick erkennbar. So macht das nun natürlich auch alles Sinn und man muss nicht immer suchen wo etwas abgelegt ist.


    So sieht jetzt mein globales "additional_meta" aus:


    #attribute(apple_touch_icon)

    #attribute(dns_prefetch)

    #attribute(canonical)

    #attribute(additional_meta_open_graph_meta_data)

    #attribute(strukturierte_daten)

    #attribute(strukturierte_daten_organisation)

    #attribute(mailgimp)

    Hallo mayer ,


    die <meta property="og:image" content="oid" /> hast du auf deiner Website für jede Seite separat eintragen müssen richtig?

    Guten Morgen Andre G. ,


    ja oid für die Bilder muss auf jeder Seite händisch eingefügt werden. Ebenfalls ist es möglich mehrere Bilder in die meta einzutragen. Ich habe hier nur mein Titelbild eingefügt. Ist alles ein wenig Arbeit, da man ständig die Fenster wechseln muss um die oid herauszu kopieren.