最近、OGPタグを動的に変更してシェアする案件が増えてきているので、PHPでのやり方をここに残します。
ユーザーによって変わる文言や画像をシェアしつつ、リンク先は必ずトップページを指している、占い結果などのシェアでよく使われる手法を下記に説明します。
まず、シェア用のPHPを生成する。
|
1 |
/share/index.php |
次に同PHP内、もしくはテンプレートなどに、下記のようなシェア用のmetaタグと、リダイレクトのJavaScriptを記述する。
（※リダイレクトをJavascript以外で行うと、動的なOGPは表示されません。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページのタイトル</title> <meta property="og:title" content="シェアするページのタイトル" /> <meta property="og:type" content="article" /> <meta property="og:url" content="シェアするURL" /> <meta property="og:image" content="シェアする画像のURL" /> <meta property="og:description" content="シェアするページ詳細文言" /> <meta property="og:site_name" content="シェアするページトップのタイトル" /> <meta property="og:locale" content="ja_JP" /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="シェアするページのタイトル"> <meta name="twitter:description" content="シェアするページ詳細文言"> <meta name="twitter:image:src" content="シェアする画像のURL"> </head> <body> <!-- シェアがクリックされた際、このURLに飛ぶ --> <script type="text/javascript"> // トップページのURLが一般的 location.href = "https://~~~"; </script> </body> </html> |
シェア用PHP内で、投稿IDなどの、URLがユニークになるようなパラメータを受け取るようにする。
|
1 |
https://~~~~/share/index.php?id=xxx |
パラメータを元に、各種シェアに必要な情報をDBなどからPHP内で収集し、下記のようにmetaタグに出力。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページのタイトル</title> <meta property="og:title" content="<?= $og_title ?>" /> <meta property="og:type" content="article" /> <meta property="og:url" content="<?= $og_url ?>" /> <meta property="og:image" content="<?= $og_image ?>" /> <meta property="og:description" content="<?= $og_description ?>" /> <meta property="og:site_name" content="<?= $og_site_name ?>" /> <meta property="og:locale" content="ja_JP" /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="<?= $og_title ?>"> <meta name="twitter:description" content="<?= $og_description ?>"> <meta name="twitter:image:src" content="<?= $og_image ?>"> </head> <body> <!-- シェアがクリックされた際、このURLに飛ぶ --> <script type="text/javascript"> // トップページのURLが一般的 location.href = "https://~~~"; </script> </body> </html> |
後は、完成したこのURL「https://~~~~/share/index.php?id=xxx」を完了画面などでシェアさせる事で、SNS上に動的なOGPを表示させつつ、リンクをクリックしたユーザには必ずトップページに誘導する事ができます。
●おまけ
リダイレクトのJavaScriptに、setTimeout関数等で間隔を開けさせ、リダイレクトのJavascriptの手前にGoogleAnalyticsなどの計測コードを貼り付ける事で、シェア数などの情報を取得することもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <!-- リダイレクト前に、Google Analyticsなどで取得するコードを貼り付ける --> <script type="text/javascript"> </script> <!-- シェアがクリックされた際、0.3秒後に下記のURLに飛ぶ --> <script type="text/javascript"> setTimeout(function(){ // トップページのURLが一般的 location.href = "https://~~~"; },300); </script> </body> |
もっといいやり方があればいつでもご意見お待ちしております！
それではまた！
