【QooQ】OGP 画像を設定しよう

OGP とは

OGP というものをご存知ですか？

簡単に説明しますと…

OGP とは「Open Graph Protocol」の略。
Facebook や Twitter などの SNS で web ページやブログの記事がシェアされた時、またLINE などのメッセージ機能でページの URL を送信した時に、そのページのタイトル、URL、概要、画像を表示させる仕組みのことです。
いまさら聞けない！OGPとは？ | ホームページ制作・作成なら大阪のweb制作.com

Embedly や はてな等のブログカードも OGP 情報を元に生成されます。

Twitter の場合

この OGP が正しく設定されたブログ内の記事をシェアすると、タイムライン上のツイートや埋め込みツイート内に、タイトル、概要(検索向け説明文)、画像(基本的に1枚目)が 「Twitter カード」として表示されます。

一応ブログも書きました。https://t.co/uSMWiAbCqU

— ふじやん。 (@fujiyanx) August 2, 2020

ちなみに、実際に記事を見て頂ければわかりますが、ここで表示されている画像は記事内の1枚目のものではありません。1枚目以外や、記事に含まれない画像をアイキャッチにする方法は、こちらの「いろいろぐ ~various good!~」さんで詳しく解説されていますのでご参考にどうぞ→

いろいろぐ ~various good!~

目から鱗！Bloggerのアイキャッチを任意の画像にする方法

こんにちは。観て、聴いて、買って、行って、食べてよかったものなどいろいろgoodなものを紹介してます。

https://www.iloilo-good.com/2017/04/blogger_20.html

QooQ は OGP 設定済み

Blogger の公式テーマだとわざわざ HTML を弄って自力で設定する必要があるのですが、QooQ の場合はありがたいことに最初からこの OGP が設定済みで、何もせずともカードを表示してくれるのです。

…ですが

OGP 画像は未設定

画像が1枚もないページの場合はもちろんのこと、トップページがシェアされた時も画像は何も表示されません。

テーマを何も弄っていない状態で当ブログのトップページをツイートするとこのような表示に。

※スクリーンショットです。

…何かしら画像がないと寂しいですよね？(^^;

この様な場合に表示させる固定の画像を設定するには、専用のコード(og:image タグ)を追記する必要があります。

og:image タグを追記

HTML を編集しますので、必ずテーマのバックアップを取ってから行って下さい。

手順は <!-- by QooQ.end --> の上辺りに、下記のように3行のコードを追記するだけです。
OGP画像URL の部分を自分で用意した画像の URL と置き換えて下さい。

    <b:if cond='!data:view.featuredImage'>
      <meta content='OGP画像URL' property='og:image'/>
    </b:if>COPY

OGP 画像(og:image)を設定した状態での埋め込みツイートがこちら。

ちょっと背景色変えてみた。なんとなく雨をイメージしたような色https://t.co/dygTqdLhHt

— ふじやん。 (@fujiyanx) 2019年6月9日

※設定後、反映されるまでしばらく掛かる場合があります。後述の Card Validator で読み込ませると即反映されます。
※たまに Twitter 側の不具合で画像が読み込まれない場合もあります。

正方形でも

ブログカードや SNS によっては画像が正方形にトリミング(両サイドがカット)されてしまう場合があるので要注意です。
当ブログの OGP 画像やアイキャッチ画像は、そういうことも考慮したレイアウトデザインにしています。

画像の表示状態をテスト

作成した OGP 画像が Twitter や Facebook のタイムライン上でどう見えるか、こちらのツールでシミュレーションできます。

OGP確認ツール

OGP確認ツール | OGP and Twitter Card

このサイトでは、WebサイトのOGP（Open Graph Protocol）とTwitterカードを簡単に確認することが出来ます。

https://ogp.buta3.net

こちらは Twitter 公式のカード確認ツールです。(利用するにはTwitterアカウントでのログインが必要です)
ここでプレビューさせると変更内容が即反映されます。

Twitter Developers

Card Validator | Twitter Developers

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

以上、お役に立てれば幸いです。