ogpをパラメータに応じて出し分ける


PHPを使ってogpやtwittercardを出し分けるのを作った時の話。
ちなみに、自分はPHPをこの時初めてまともに触った程度に無知だから、無駄な箇所とかあると思うからこうすればいいよーっていうのあればコメントにくださああああああい。

背景

占いコンテンツ的なページを作ることになって、その占い結果に応じてogpを出し分けたいというのがあった。
単純にhtmlをその数だけ作ってもいいけど、結果が30パターン近くあり、「更新だるすぎんご」ってなってパラメータで出し分けることに。

解説・・・の前に

ogpの出し分けはJavascriptではできない
理由についてはウェブ帳さんが詳しく解説してくれているのでそちらを参考に。素晴らしい記事をありがとうございます。
ざっくり言うと、facebookがページに対して「君のogpを教えなさい」って聞くんだけど、javascriptはサーバーサイド・スクリプトではないため、答えることができない。
PHPはサーバーサイド・スクリプトなため、答えることができる。
あと、当たり前だけど、PHPが使用できるサーバーじゃないと動かない。
拡張子はhtmlでもいいけど、その場合は.htaccessにhtml拡張子でphpが動くように設定する必要がある。

解説

<?php
$min = 1;
$max = 2;
if (isset($_GET['result']) && is_numeric($_GET['result']) && $_GET['result'] >= $min && $_GET['result'] <= $max) {
    $result = $_GET['result'];
    if ($result == 1) {
        $disc = "index.php?result=1の時のディスクリプション";
    } else if ($result == 2) {
        $disc = "index.php?result=2の時のディスクリプション";
    }
    ?>
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="サイトネーム">
    <meta property="og:title" content="タイトル">
    <meta property="og:description" content="<?php echo $disc ?>">
    <meta property="og:image" content="https://testooooooooooooo.co.jp/images/ogimages_<?php echo $result ?>.png">
    <meta property="og:url" content="https://testooooooooooooo.co.jp/index.php?result=<?php echo $result ?>">
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="サイトネーム" />
    <meta name="twitter:title" content="タイトル" />
    <meta name="twitter:description" content="<?php echo $disc ?>" />
    <meta name="twitter:image" content="https://testooooooooooooo.co.jp/images/ogimages_<?php echo $result ?>.png">
    <meta name="twitter:url" content="https://testooooooooooooo.co.jp/index.php?result=<?php echo $result ?>">
<?php }else{ ?>
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="サイトネーム">
    <meta property="og:title" content="タイトル">
    <meta property="og:description" content="デフォルトのディスクリプション">
    <meta property="og:image" content="https://testooooooooooooo.co.jp/images/ogp.png">
    <meta property="og:url" content="https://testooooooooooooo.co.jp/index.php">
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="サイトネーム" />
    <meta name="twitter:title" content="タイトル" />
    <meta name="twitter:description" content="デフォルトのディスクリプション" />
    <meta name="twitter:image" content="https://testooooooooooooo.co.jp/images/ogp.png">
    <meta name="twitter:url" content="https://testooooooooooooo.co.jp/index.php">
<?php } ?>

前提として、URLに付くパラメータは「index.html?result=1」みたいな感じになるとしてる。
resultじゃない文字にしたい場合は、resultになっている箇所全てをそれにすれば大丈夫。
まず

$min = 1;
$max = 2;

minの方は1固定で、maxの方は出し分けるogpの数を入力。

if (isset($_GET['result']) && is_numeric($_GET['result']) && $_GET['result'] >= $min && $_GET['result'] <= $max) {

if文。$_GETはURLのパラメータの配列。result=1だったら1を、result=2だったら2を返してくれる。複数パラメータがあっても大丈夫。
resultというパラメータがあるかどうか、そしてその数字が0($min以下の数字)だったり、3だったり($max以上の数字)じゃないかだったり、数字以外が入っていないかを判定。
resultが$min以上$max以下の数字なら、出し分け用の処理へ、reslutの値が不正ならデフォルト用の処理へ。

$result = $_GET['result'];

$resultに値を入れておく。

if ($result == 1) {
    $disc = "index.php?result=1の時のディスクリプション";
} else if ($result == 2) {
    $disc = "index.php?result=2の時のディスクリプション";
}

resultの値に応じてディスクリプションに入れる文字列を出し分ける。

<meta property="og:type" content="article">
<meta property="og:site_name" content="サイトネーム">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="<?php echo $disc ?>">
<meta property="og:image" content="https://testooooooooooooo.co.jp/images/ogimages_<?php echo $result ?>.png">
<meta property="og:url" content="https://testooooooooooooo.co.jp/index.php?result=<?php echo $result ?>">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="サイトネーム" />
<meta name="twitter:title" content="タイトル" />
<meta name="twitter:description" content="<?php echo $disc ?>" />
<meta name="twitter:image" content="https://testooooooooooooo.co.jp/images/ogimages_<?php echo $result ?>.png">
<meta name="twitter:url" content="https://testooooooooooooo.co.jp/index.php?result=<?php echo $result ?>">

あとはresultの値を入れたい箇所にを、ディスクリプションにを入れればOK。
この例だと、例えば
https://testooooooooooooo.co.jp/index.php?result=1
の時は

<meta property="og:type" content="article">
<meta property="og:site_name" content="サイトネーム">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="index.php?result=1の時のディスクリプション">
<meta property="og:image" content="https://testooooooooooooo.co.jp/images/ogimages_1.png">
<meta property="og:url" content="https://testooooooooooooo.co.jp/index.php?result=1">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="サイトネーム" />
<meta name="twitter:title" content="タイトル" />
<meta name="twitter:description" content="index.php?result=1の時のディスクリプション" />
<meta name="twitter:image" content="https://testooooooooooooo.co.jp/images/ogimages_1.png">
<meta name="twitter:url" content="https://testooooooooooooo.co.jp/index.php?result=1">

になる。

先に$result = $_GET[‘result’];書いて、if文の$_GET[‘result’]の箇所を$resultにすればもっと綺麗になるかな?
ではでは

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。