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

タグごとの内容

細かいリファレンスは、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" />

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

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

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

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

<meta property="og:url" content="https://yuiktmr.blog/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を指定します。指定したところで、シェアされた旨の通知が来たりするわけではないようですが…。