ねほり.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技術

  関連記事

WordPressが速くなったさくらインターネット(モジュールモード変更)

さくらインターネットでWordPressが遅い・・・ いや、WordPressだ …

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

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

ペット家電は日本メーカも取り組むべき

掃除が面倒なので「ルンバ780」を購入しました。 思っていたよりルンバは賢くない …

Chrome/FirefoxでHTML5 videoを動かす

2011年03月04日(金) Chrome/FirefoxでHTML5 vide …

人工知能で「くずし字」の文字認識の現状調査

日本人の多くは、日本人が150年前の文書が読めません。 家系図調査は「除籍謄本」 …

サラリーマンのチートスキルで「無人島に一つだけ持っていくもの」(1/2)

誰かは言った。 「無人島に何を持っていくか…?」 その探求は、 永遠のテーマであ …

Developers Summit 2013 2日目に参加

会社を休んで、Developers Summit 2013に行ってきました。 去 …

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

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

DellのVistaマシンのマザーボードの故障

2009年11月29日(日) 修理は二週間かかるそうです 動画編集で購入したDe …

Windowsのパソコンにパーティションを分けてLinuxを入れてC言語学習を試みる

徒然なるままに日暮らし…  結局、何も変わらぬ日々。  「イ …