Help us understand the problem. What is going on with this article?

OGP画像を動的に変更させる

ページをシェアする時にOGP画像を変更させたいという要望があったので、やってみました!

実装方法

動的に変更させたいページのurlにパラメーター付きでアクセスした場合にOGP画像を変更させます。
といっても、head内のog:urlとog:imageのcontentの値を変更させるだけです…

  1. パラメーター付きのurlにアクセス
  2. urlのパラメーターの値を取得
  3. head内のog:urlとog:imageのcontentの値にurlのパラメーターを挿入

パラメーターなしのurlにアクセスした場合

<!-- https://example/にアクセス -->
<meta property="og:url" content="https://example/">
<meta property="og:image" content="https://example/og-image.png">

パラメーター付きのurlにアクセスした場合

<!-- https://example/?image=hogeにアクセス -->
<meta property="og:url" content="https://example/?image=hoge">
<meta property="og:image" content="https://example/og-image_hoge.png">

実装

最初はJavaScriptで実装したのですが、
Facebookシェアデバッガーで確認したところ変更せず…

次にPHPで実装してみたところ
FacebookシェアデバッガーTwitter Card Validatorともにうまく表示されました。

<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
  <meta charset="utf-8">
  <title>タイトル</title>
  <meta name="viewport" content="width=device-width, viewport-fit=cover">
  <meta name="description" content="ディスクリプション">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:title" content="タイトル">
  <meta property="og:description" content="ディスクリプション">
  <?php if (isset($_GET['image'])) : ?>
    <?php $imageParam = $_GET['image']; ?>
    <meta property="og:url" content="https://example/?param=<?php echo $imageParam; ?>">
    <meta property="og:image" content="https://example/og-image_<?php echo $imageParam; ?>.png">
  <?php else : ?>
    <meta property="og:url" content="https://example/">
    <meta property="og:image" content="https://example/og-image.png">
  <?php endif; ?>
</head>

補足

.htmlのままPHPが動作するようにするためには.htaccessに設定しましょう1

AddTypeを使う方法

.htaccess
<FilesMatch "\.html$">
  AddType application/x-httpd-php .html
</FilesMatch>

AddHandlerを使う方法

.htaccess
<FilesMatch "\.html$">
  # PHPのバージョンはご利用のバージョンに変更してください
  AddHandler php5-script .html
</FilesMatch>

  1. サーバーがApacheの場合  

taqumo
東京でフロントエンドエンジニアやってます。 ラーメン大好きっ子です!
https://taqumo.me/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away