簡単。
仕組みの話
ベタ打ちのHTMLだと当然のことながら入力したものが全てなので、OGPにバリエーションをもたせることなんかできない。
jsでいじることはできるけどページを読み込んだ後で発火するから、掲載先の処理に依存することになる。反映することもあるらしいけど安定しないから却下。
PHPだったらやれる。
php側の条件分岐で出力するogpを振り分ける。
URLパラメータで条件分岐させる。
URLパラメータを使うということは、元ページは同一のものでいいということになる。
パラメータ依存の切り替えになるので、パラメータ不可だと詰む話。
やっていく
URLがこんなものだったとして。
ｈttps://example.jp/?num=01&cat=aaaまずはOGP。
<?php
//パラメータ取得
$num = $_GET['num'] ?? '';
$cat = $_GET['cat'] ?? '';
//$numは数字２桁、$catは英数字限定とする
if (preg_match('/^\d{2}$/', $num) && preg_match('/^[a-zA-Z0-9]+$/', $cat)) {
//head用ogp宣言
$ogpHead = ' prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"';
//ogp各種設定とか
$ogpImgAry = [
'01' => 'ogp01.png',
'02' => 'ogp02.png',
'03' => 'ogp03.png',
'04' => 'ogp04.png',
];
$ogpImage = "https://example.jp/img/{$ogpImgAry[$num]}";
$ogpSitename = "example.jp";
$ogpTitle = "{$cat}ですよ | example.jp";
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? "https://" : "http://";
$ogpUrl = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$ogpDescription = "catは{$cat}です、numは{$num}ですよ。";
$ogpTwitter = "@sampleAccount";
//ogp作成
$ogpSet = '<meta property="og:title" content="'.$ogpTitle.'" />'."\n";
$ogpSet .= '<meta property="og:site_name" content="'.$ogpSitename.'" />'."\n";
$ogpSet .= '<meta property="og:url" content="'.$ogpUrl.'" />'."\n";
$ogpSet .= '<meta property="og:type" content="article" />'."\n";
$ogpSet .= '<meta property="og:description" content="'.$ogpDescription.'" />'."\n";
$ogpSet .= '<meta property="og:image" content="'.$ogpImage.'" />'."\n";
$ogpSet .= '<meta property="og:image:width" content="1200" />'."\n";
$ogpSet .= '<meta property="og:image:height" content="630" />'."\n";
$ogpSet .= '<meta name="twitter:card" content="summary_large_image" />'."\n";
$ogpSet .= '<meta name="twitter:title" content="'.$ogpTitle.'" />'."\n";
$ogpSet .= '<meta name="twitter:description" content="'.$ogpDescription.'" />'."\n";
$ogpSet .= '<meta name="twitter:image" content="'.$ogpImage.'" />'."\n";
$ogpSet .= '<meta name="twitter:site" content="'.$ogpTwitter.'" />'."\n";
} else {
//パラメータがなかったり書式が一致しなかったら他所に飛ばすとか
header("Location: https://www.google.co.jp/");
exit;
}流し込む先はこんな感じ。
<head <?= !empty($ogpSet) ? $ogpHead : '' ?>>
⋮
<?= $ogpSet ?? '' ?>
⋮
</head>ちなみにこれらは
<?= !empty($ogpSet) ? $ogpHead : '' ?>
<?= $ogpSet ?? '' ?>これらを略した書き方。
<?php if(!empty($ogpSet)){ echo $ogpHead; } ?>
<?php if(!empty($ogpSet)){ echo $ogpSet; } ?>やってることはphp的に何も難しいことはしていない。
それよりもogpの書式自体をミスってないか確認するほうが大事。
og:image:widthとかog:image:heightとかtwitter:cardとか、指定しないと表示されなかったり意図しない表示になることがある。
後は画像。画像のサイズとかアスペクト比とかに注意。
記事のアイキャッチとか、雰囲気で貼ってる場合には良いけど文字を入れるとかでガチでogp設定を考えてるなら割とダルいことになる。
確認とか
SNS謹製のチェッカーがあれば確実なんだけどね。
Facebookにはシェアデバッガーがある。
他はないっぽい。Twitter（X）も以前はあったらしい。
一般的にはラッコとか。
画像を見るだけならこことか。
実際に貼ってみるのが確実だけどね。
本番環境でogpを確認するのはちょっとめんどくさい。
というのは、ogpは即反映されない場合がある。
そしてogpはしばらく経たないと更新されない。
SNS側のキャッシュや仕様によるものだからどうしようもない。
初めて作ったときは大体テンパる。
一度作ってしまえば後は流し込むだけだから楽。
コメント