ねほり.com

何もないから何かみつかる

OGP・Twitterタグ設定して画像(カード)を表示させる方法

   

新型コロナウイルスの影響で、小学校は段階的に開校のようです。

WordPressなどにSNSのシェアなどで使用する「OGPタグ」「Twitterタグ」を設定する人は多いかと思います。

とは言え、メモ帳ベースで書いているページでは、これらの設定を自動で行うのは面倒なので放置していました。

 

ただ、久しぶりにツイートやFacebookを見てみると、Twitterカードが表示されていると目立つのでアクセスが増えそうです。

OGPとは

Open Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みです。

一般的な書き方

基本的には次のように記載すれば表示されるはずです。

ですが、画像が表示されない事がありました。

この際なので、各記載項目を確認してみます。

Twitter

「Card Validator」というツールを使えば、サイトのURLを入力し、正しくTwitterが読み込めているか確認できます。

https://cards-dev.twitter.com/validator

また、ツイッターに残っているキャッシュを更新してくれます。

Logを見るとエラーは出ていないにも関わらず画像が表示されない場合は、多くの場合次の点が問題です。

  • 画像のパスが間違っている(そもそも画像が表示されない)
  • セキュリティの設定などで外部からの(Twitterなど)アクセスを弾いている
  • 別ドメインの画像を記載している

なお、サーバーにGZIP設定していても特に問題ありません。

Twitterカードが読み込むOGPが正しく設定されていないと「Unable to render Card preview」というエラーが表示されます。

詳しい原因はログに出力された内容をチェックして判断していきます。

サイトのURL(twitter:site)

カードフッターで使用されるウェブサイト名です。

サイトの名前(twitter:title)

ページのタイトルです。

通常とTwitter用で表示内容を変える場合は設定します。通常と同じ内容でよければ設定不要です。

説明文(twitter:description)

サイトのディスクリプション(説明)を記載します。

文字数制限はありませんが、概ね90文字程度が推奨されています。

カードのタイプ(twitter:card)

Twitterカードのタイプを入力します。

実装できるTwitterカードは4種類です。

  • 要約カード(summary)
  • 大きな画像を持つ要約カード(summary_large_image)
  • Appカード
  • Playerカード

画像のパス(twitter:image)

Webサイトでよく使われている 要約カード(summary)と、大きな画像を持つ要約カード(summary_large_image)で指定できる画像の条件は次の通りです。

summaryの画像条件

  • 最小サイズ:144 × 144 ピクセル
  • 最大サイズ:4096 × 4096 ピクセル
  • 最大画像サイズ:5MB
  • 対応画像フォーマット:JPG、PNG、WEBP、GIF(SVGは未サポート)

大きな画像を持つsummary_large_imageの画像条件

  • 最小サイズ:300 × 157 ピクセル
  • 最大サイズ:4096 × 4096 ピクセル
  • 最大画像サイズ:5MB
  • 対応画像フォーマット:JPG、PNG、WEBP、GIF(SVGは未サポート)

Facebook

Twitter同様に「Open Graph オブジェクトデバッガー(Facebook OGP debug tool)」というツールを使って、デバッグが可能です。

またFacebook上に残っているキャッシュを更新することも可能です。

例えば、あるページはキャッシュが2014年でした・・・・6年間一度もFacebookで話題にならなかった・・・ということなのかな。

URLを入力してデバッグをクリックすれば問題点を指摘してくれるので分かりやすいです。

ページタイプ(og:type)

ページの種類を指定します。このタイプを設定することにより、SNS上での表示形式が変わってきます。

TOPページの場合は「website」、WEBサイト上の記事ページなど、TOPページ以外には「article」を指定します。

  • トップページに「website」
  • ブログに「blog」
  • 下層ページに「article」

音楽や動画の指定もあるので、コンテンツに応じて設定するとよりよいです。

ページタイトル(og:title)

ページの名前を記載します。

一般的にはサイトのタイトルと同じ内容を設定しますが、サイト名などのブランド情報を含まないタイトルを20文字以内で設定することが好ましいとされています。

サイトの名前(og:site_name)

サイトの名前を記載します。

ページの名前と間違いやすいので気をつけてください。

サイトの画像(og:image)

  • 大画像表示にしたい場合 600 x 315
  • 高解像度端末に対応させる場合 1200 x 630
  • 小さな画像での表示でよい場合 200 x 200

なお、ファイルサイズ: 8MB 以下です。

また、エンコーディング: gzip / deflate をサポートしています。

なお、OGPを表示する際の画像比率には世界基準のような物は存在せず、LINE と typetalk では勝手に指定したサイズにトリミング(切り取り)されてしまいます。

fb:app_id

FacebookのApp IDを記載します。

Facebookならではの情報を取得することができます。

  • いいね!ボタンのクリック数
  • いいね!を押されて生成された記事の表示回数、クリック数
  • 送信ボタンのクリック数、他 ※LikeボタンでSendオプション付けてる場合
  • コメント機能使ってる場合は、その件数やFacebook内での電波数、反応数など

「Facebookインサイト」より自分が管理しているFacebookページ、Facebookアプリ、そして自分が管理人であるウェブサイトのインサイト情報を確認できます。

https://www.facebook.com/insights/

App IDの取得は面倒ですが、Facebookインサイト(解析機能)が使えるようになるのでおすすめです。

「fb:admins」というタイプもありますが、個人のFacebookアカウントに結びついてしまうので、企業利用では「fb:app_id」の方がベターです。

まとめ

Twitter と Facebook の両方に対応させるには 600 x 315 以上(横幅が 600 )を指定するのが良さそうです。

高解像度端末に対応させたい場合は倍の 1200 x 630 以上がお勧めです。

私の設定は400x300pxでまだ小さいな・・・・。

 - 2020年(社会人16年), Web技術, テクノロジー

  関連記事

確定申告消費税未納の督促状が来た・・・

NTTドコモの基本使用料を最安値にしようとドコモショップへ。自分が「ベーシックプ …

Webサイト上でCGIを使って自作してログを取得する

Webサイトで実はかじったCGIで自作して「ログ」を取得している。  …

さくらでnode.jsを利用してJavaScriptの勉強

2011年12月21日(水) さくらでnode.jsを利用してJavaScrip …

機械学習を使った株価予測(関連論文・サイトを調査してみる)

株式投資は、予測するものではなくルールに沿って選ぶものです。 その際に、選んだ銘 …

bootstrapの軽量化Part2 不要なCSS定義を削除する

前回までで軽量化に関しては終了・・・。と思っていたが、やっぱり重たい。 boot …

機械学習で株価予測(Two SigmaのKaggleコンペを確認)

計量的・実証的な投資におけるアルファは質の高いサーベイからもたらされるものであり …

推薦論文の査読結果&キッズGooでWebサイトが表示されるために

推薦論文 「推薦論文」の査読結果が返ってきた・・・・   & …

はじめてのKerasを使った株価予測(ディープラーニング)

毎年年末年始やGWに技術学習・Webサイト構築してきたのに、今年は何もしていない …

PHP5→PHP7に変更(php7ccを使った動作確認)

PHPの新しいバージョンであるPHP7が2015年12月に正式リリースされました …

読書の秋に池田敏雄やアラン・クーパーの言葉を胸に

神奈川の知人 S からのメール・・・・    &n …