北村由衣のブログ

OGPタグの設定によるSNS共有の改善

書こうと思っていたネタが、実は一本、ボツになったので、投稿間隔が開きました。
Java関連で、ちょっとバージョンアップによる挙動変化?と思われた事象があったんですけど、 書くためにちゃんと調べてたら、なんてことない私の誤操作によるもので、バージョン変化関係なかった、というオチ。

OGPタグを設定しました

北村由衣のトップページをはじめとして、ブログ系の既存記事を中心に、 OGP(=the Open Graph Protocol)タグを設定しました。
これにより、SNS等にシェアされた時の見栄えが良くなっています

 
TwitterCardValidatorとMetaForDevelopersで見るリンク共有のサムネイル表示

Googleのサーチコンソールで検索結果の状況とかは見ていたのですが、 Twitterで共有したときにサムネが無くて寂しいなぁ、と思っていたりしたので、やり方を調べて組み込んでみた次第です。
各記事ごとに、タイトルや説明文を調整しなければいけないので、 まだ本数の少ない今のうちに取り組んでおいてよかったと思っています

OGPタグの書き方

TwitterとFacebookを対象に設定をしたのですが、以下のようなタグ付けをしました

<head>
    <title>タイトル|ブログ|北村由衣</title>
    <meta property="og:type" content="article" />
    <meta property="article:published_time" content="1997-09-30 19:57:00" />
    <meta property="article:modified_time" content="2021-12-22 22:22:22" />
    <meta property="article:author" content="yui Kitamura" />
    <meta property="og:locale" content="ja_JP" />
    <meta property="og:title" content="タイトル" />
    <meta property="og:description" content="本文の要約を短い文章で書きます" />
    <meta property="og:site_name" content="ブログ|北村由衣" />
    <meta property="og:url" content="https://yui-kitamura.eng.pro/blog/private/article/example" />
    <meta property="og:image" content="https://yui-kitamura.eng.pro/blog/common/yui_blog.png" />
    <meta property="fb:app_id" content="123456789012345" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@twitterID" />
</head>

タグごとの内容

細かいリファレンスは、OGPの公式マニュアル(英語)に委ねますが、おおまかに。

<title>タイトル|ブログ|北村由衣</title>
<meta property="og:title" content="タイトル" />
<meta property="og:site_name" content="ブログ|北村由衣" />

関連する3要素を取り出してみました。
<title>はお馴染み、ブラウザのタブとかに表示されるページの題名ですが、 og:titleにはサイト名などの情報は含まない純粋なページ名とします。 og:site_name(任意要素)にサイト名を入れておくことで、補完させます。

<meta property="og:type" content="article" />
<meta property="article:published_time" content="1997-09-30 19:57:00" />
<meta property="article:modified_time" content="2021-12-21 22:22:22" />
<meta property="article:author" content="yui Kitamura" />

私のサイト内では、websitearticleの2種類を使っていますが、 OGPのドキュメントのType節を参照すると、musicとか bookとか何種類かあるみたいですね。

article:xxの3種類は、typeをarticleにした場合に使えるオプションたちです。 初稿日時、更新日時と、著者です。他にもあとはsectiontagもあるようですが、 私は使っていません。

<meta property="og:description" content="本文の要約を短い文章で書きます" />

contentに書いた通り、要約です。説明文、というキーワードではありますが。
長さとしては半角90文字前後、全角日本語文だと45文字程度が限度のようです

<meta property="og:url" content="https://yui-kitamura.eng.pro/blog/private/article/example" />

リンクをフルパス、絶対パスで記載します

<meta property="og:image" content="https://yui-kitamura.eng.pro/blog/common/yui_blog.png" />

サムネイル画像をフルパス、絶対パスで指定します。
画像については、悩ましい点がありました。記事がシェアされた先のサービスによって表示するサイズが異なっているのです。 Twitterの小カードでは正方形、FacebookやTwitterの標準サイズでは横長の長方形、はてなブログではさらに一回り大きな長方形。 画像を切り替えることはできないので、共有先のサービスでトリミングされてもいいような画像を選択する必要があります。
私のサイトでは暫定的にTwitterでの小カード表示優先で正方形の画像を用意していますが、 そのうちアップデートできたらいいなぁ、と思っています

画像をもとに、各サービスでどのように表示されるかを確認するのに便利なサイトは「OGP画像シミュレータ」です。 また、設定したmetaタグを元に各サービスでの表示が網羅的にバリエーションがある状態で確認できる、ラッコツールズさんの「OGP確認」も便利でした

Facebook向けの設定

<meta property="fb:app_id" content="123456789012345" />

この1タグを設定するためには、Facebookアカウントを開発者ツールで設定して、アプリIDを発行する必要があります。
Facebook側の画面構成が更新されたのか、そのまんまその通り、というわけにはいかなかったですが、参考にさせていただいたのが、 こちら、TCDさんの「FacebookのOGP設定に必要なアプリID(app_id)の 取得方法」です。

私はFacebookのアカウントを作成するところから始まったのですが、Facebookのシェアデバッガーにアクセスして、 ログインするのが楽かと思われます。
メールアドレスで認証した上で(ニュースレターの購読チェックボックスは無視してヨシ)、携帯電話番号での認証も必要でした。
アプリの作成ボタンを押したときに表示される、アプリタイプも種類が増えたみたいですね。画面右下のアンケートを消さないと「次へ」ボタンが 隠れたままなのは不親切だなぁと思いました。

Twitter向けの設定

Twitterでのリンク表示には4種類あります。このうち、動画再生以外の3種類が主に使われているのではないでしょうか。
Twitterのスターターガイドに色々載っています。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@twitterID" />

cardの値で、表示されるスタイルを指定します。summary,summary_large_image,app,playerの4種類から、いずれか1つの値を指定します。
サムネイル画像の大きさで言うと、summaryにすると正方形、summary_large_imageにするとFacebookと同じになります。

siteの値で、自身のTwitterIDを指定します。指定したところで、シェアされた旨の通知が来たりするわけではないようですが…。

余談

ソースコードを色付けして表示させるために、Googleが提供するcode prettifyというのを使っているのですが、 <pre>タグの中に留まらず広範囲に及ぶ<span>タグのクラス指定と競合しますね…
<span class="tag">をブログのカテゴリを示すタグのためにCSSで装飾していたら、 pre表示させていたHTMLタグが当該spanのclass被りで装飾されてしまいました…。

<pre class="prettiprint">配下のspanだけにしてくれればいいものを… それに、クラス名をもうちょっとライブラリ固有のユニークなものにしてくれればいいのに…。 pretti-tagとか…。自動的にpreのコード内容を解析して色付けしてくれる機能としては とても優秀なだけにもったいない…。


このエントリーをはてなブックマークに追加


コメントはこちらからお寄せください