logo
Published on

WordPressでog:image画像を自動設定する

Authors

WordPressでog:image(OGP)画像を、記事から最初の画像を取得し自動でog:imageやtwitter:imageのHTMLメタタグを設定するやり方とPHPコードについて解説、紹介します。

og:image画像をwordpressで自動設定

WordPressでのog:image(OGP)画像を、記事から最初の画像を取得し、自動でog:imageおよびtwitter:imageのHTMLメタタグを設定する手順とPHPコードについて解説、紹介します。

ところで、先週、当サイトのSEOおよびページ読み込み速度をPagespeed insights、ChromeのLighthouseによるSEO分析より、改善しました。その一環として出てきたのがPWA・プログレッシブウェブアプリ、だとか、icons・アイコンだとかfavicon・ファビコン、といった、画像まわりのことです。

そこで、そういえば、twitterやdiscordなどでシェアされたときの画像のog:image画像の設定はしていなかったな、と思い出しました。

og:imageやtwitter:imageをWordpressの全てのページに設定するのは簡単です。以下のようなHTMLをテーマのheader.phpに貼り付ければいいだけ。

<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" />

しかしこれの問題点は、

  1. 文字通り全てのページに同じog:image画像が設定されてしまうこと。個別の設定ができない
  2. もし既にog:imageが定義されていた場合、上書きされてしまう。または重複、競合する

なので、以下のphpを書きました。

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");

使用する場合、

  1. $og_default = 'https://yuis-programming.com/android-chrome-512x512.png';を初期設定の画像のurlパスにする
  2. preg_match('/yuis\.xsrv\.jp\/(data|images)\/.*(jpe?g|png|webp)($|\?)/',を記事中の対象としたい画像のurlパスの正規表現パターンにする

なお、いつも通り、使用は自己の責任にてお願いします。上記のコードでデータやデータベースが破損するといったことは理論上あり得ないことですが、サイトが表示されなくなる、その間の訪問者を失ってしまう、といったことは起こりえます。 サイトが崩れた場合は当該のコードを削除し元に戻して保存すればよいです。サイト上の表示を常に正常か、確認・検証しながら使用してください。

上記のプログラムでは、phpのバッファーを取得して処理するob_startと、htmlのパースを行うDOMDocumentを利用しています。

上記のコードでやってるのは大きく分けて、

  1. &lt;meta property="og:image" .. &gt;htmlタグがhtml上に既にあるかどうかを検証、なければ進む
  2. html上のimg画像タグを取得し、そのsrc属性を取得。そのurlが指定の正規表現パターンにマッチする場合、先に進む
  3. 取得したurlでog:imageタグおよびtwitter:imageタグを作りhtmlの&lt;/head&gt;直前に入れる
  4. 3回くらいimgタグのパターンマッチを繰り返しマッチがなければ、デフォルトのog:image画像でタグを作り&lt;/head&gt;直前に入れる

作られたog:imageは上記画像のようにちゃんと認識されてくれています。

og:imageの見え方の検証・確認をしてみます。

OpenGraph - Preview Social Media Share and Generate Metatags - OpenGraph og:imageのテスト検証

いいですね👍

各ツール価格:1万円~

サポート:6千円/1時間*

見積もり:無料


*一律・1時間未満切上

👉 詳細はこちらから。📧 お問い合わせ

ご覧いただき、ありがとうございます。本サイトの運営コストは広告をご覧いただくことで賄われています。様々な有名サービスが本サイト経由限定・期間限定で無料・割引・キャッシュバックになる、お得なプロモーションをご利用いただくことで、本サイトの運営をご支援いただけます。