Lesefortschritt:

Die Pflicht: WordPress-Website für Facebook und Twitter optimieren – mit Standardbild

30. Januar 2021 | header.php, Mediathek, SocialMedia, WordPress

Dieser Beitrag beinhaltet 767 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

WordPress-Beiträge, welche auf Facebook und Twitter veröffentlicht werden, kommen manchmal etwas schräg daher. Der Grund: Die beiden Netzwerke benötigen ein paar spezielle Tags, um geteilte Inhalte korrekt darzustellen. Dafür benötigen Sie aber kein Plugin: Mit ein paar Zeilen Code im Seitenkopf geht das hervorragend.

Zunächst empfehlen wir Ihnen, ein Open-Graph-Bild für Facebook zu produzieren und ein weiteres Bild für Twitter. Die Facebook-Version sollte gemäss Empfehlungen 1200px breit und 630px hoch ein – die Variante für Twitter 1024x512px. Diese Bilder laden Sie in die WordPress-Mediathek.

Das Facebook-Open-Graph-Bild dieser Website sehen Sie hier als Verkleinerung.

Artikelbilder statt Standards

 

Sind Sie sicher, dass Sie alle Ihre publizierten Artikelbilder auf Facebook und Twitter veröffentlichen dürfen?

In diesem Fall hätten wir im Beitrag «Die Kür: WordPress-Website für Facebook und Twitter optimieren – mit Artikelbild» ein echtes Schmankerl am Start.

Nun fügen Sie der Datei header.php untenstehenden Code hinzu. Diese Datei öffnen Sie via Design/Theme-Editor. Der Code gehört unmittelbar oberhalb des Tags </head> platziert.

<meta property="og:url" content="<?php echo get_permalink(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
<meta property="og:image" content="https://dr-code.ch/wp-content/uploads/dr-code-open-graph.png" />	
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="<?php echo get_permalink(); ?>"/>
<meta name="twitter:title" content="<?php echo get_the_title(); ?>">
<meta name="twitter:description" content="<?php echo get_the_excerpt(); ?>">
<meta name="twitter:image" content="https://dr-code.ch/wp-content/uploads/dr-code-twitter-graph.png">

Folgende Dinge passieren in dem Snippet:

  • Im Code werden die dynamischen Angaben aus Ihrem WordPressbeitrag gesammelt und dargestellt.
  • Auf Zeile 5 steht derzeit die URL des Facebook-Open-Graph-Bildes dieser Website. Auf Zeile 12 folgt dann der Dateinamen des Twitter-Bilds. An beiden Stellen tragen Sie die URL des von Ihnen erstellten Facebook- und Twitter-Bildes ein.

Wenn nun Ihre Seite oder Ihr Beitrag auf Facebook oder Twitter geteilt wird, erscheint nun Ihr neues Open-Graph-Bild.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This