Automatisches Setzen von og:image in WordPress

Dieser Artikel erklärt und stellt vor, wie man in WordPress og:image- und twitter:image-HTML-Meta-Tags automatisch setzt, indem das erste Bild aus einem Beitrag abgerufen wird.

Wir erklären die Schritte und den PHP-Code zum automatischen Setzen von og:image- und twitter:image-HTML-Meta-Tags in WordPress durch Abrufen des ersten Bildes aus einem Beitrag.

Übrigens habe ich letzte Woche das SEO und die Seitenladegeschwindigkeit dieser Website basierend auf SEO-Analysen von PageSpeed Insights und Chromes Lighthouse verbessert. Dabei bin ich auf Dinge wie PWA (Progressive Web Apps), Icons und Favicons gestoßen - im Grunde bildbezogene Angelegenheiten.

Da erinnerte ich mich daran, dass ich og:image zum Teilen auf Twitter, Discord usw. noch nicht eingerichtet hatte.

Das Setzen von og:image und twitter:image für alle WordPress-Seiten ist einfach. Sie müssen nur folgendes HTML in die header.php Ihres Themes einfügen:

<meta property="og:image" content="https://yuis-programming.com/android-chrome-512x512.png">
<meta name="twitter:image" content="https://yuis-programming.com/android-chrome-512x512.png" />

Die Probleme hierbei sind jedoch:

1. Buchstäblich alle Seiten erhalten dasselbe og:image. Sie können keine individuellen Bilder festlegen
2. Wenn bereits ein og:image definiert ist, wird es überschrieben, oder es gibt Duplikate/Konflikte

Also habe ich folgendes PHP geschrieben:

function callback02($buffer) {
		
		$dom = new DOMDocument();
    $dom->loadHTML($buffer);
    $xpath = new DOMXPath($dom);
		
		$og_image = $xpath->query('//meta[contains(@property, "og:image")]')->item(0);

		if ($og_image == null) {
			for ($x = 0; $x <= 3; $x++) {
				if ($x == 3) {
					$og_default = 'https://yuis-programming.com/android-chrome-512x512.png';
					$buffer = str_replace('</head>', '<meta property="og:image" content="' . $og_default . '">
						<meta name="twitter:image" content="' . $og_default . '" />
						</head>', $buffer);
					break;
				}
        
				$d = $xpath->query('//main/article//img')->item($x);
				if ($d !== null) {
					$i = $d->getAttribute("src");
					$m = preg_match('/yuis\.xsrv\.jp\/(data|images)\/.*(jpe?g|png|webp)($|\?)/',$i,$matches);
					if ($m == 1) {
						$buffer = str_replace('</head>', '<meta property="og:image" content="' . $i . '">
							<meta name="twitter:image" content="' . $i . '" />
							</head>', $buffer);
						break;
					}
				}
			}
		}

		return $buffer;
}

ob_start("callback02");

Bei Verwendung:

1. Ändern Sie `$og_default = 'https://yuis-programming.com/android-chrome-512x512.png';` zu Ihrem Standard-Bild-URL-Pfad
2. Ändern Sie `preg_match('/yuis\.xsrv\.jp\/(data|images)\/.*(jpe?g|png|webp)($|\?)/',` zu einem Regex-Muster für die Bild-URL-Pfade, die Sie in Artikeln ansprechen möchten

Wie immer, verwenden Sie auf eigenes Risiko. Während der obige Code theoretisch keine Daten oder Datenbanken beschädigen kann, ist es möglich, dass Ihre Website nicht angezeigt wird, was zu verlorenen Besuchern führt. Wenn die Seite kaputt geht, löschen Sie einfach den Code und speichern Sie, um wiederherzustellen. Überprüfen Sie immer, dass die Website korrekt angezeigt wird, während Sie sie verwenden.

Das obige Programm verwendet ob_start, um den PHP-Puffer zu erhalten und zu verarbeiten, und DOMDocument für das HTML-Parsing.

Der Code macht Folgendes:

1. Überprüft, ob bereits ein ``-HTML-Tag im HTML existiert; wenn nicht, fährt fort
2. Holt img-Bild-Tags aus dem HTML und ruft deren src-Attribute ab. Wenn die URL mit dem angegebenen Regex-Muster übereinstimmt, fährt fort
3. Erstellt og:image- und twitter:image-Tags mit der abgerufenen URL und fügt sie kurz vor `` im HTML ein
4. Wiederholt das img-Tag-Pattern-Matching etwa 3 Mal; wenn keine Übereinstimmung, erstellt Tags mit dem Standard-og:image und fügt sie kurz vor `` ein

Das erstellte og:image wird korrekt erkannt, wie im obigen Bild gezeigt.

Lassen Sie uns testen und überprüfen, wie das og:image aussieht.

OpenGraph - Preview Social Media Share and Generate Metatags - OpenGraph

Schön! 👍