Twitter カード（Twitter Cards） の設定
Twitter でURLを含むツイートをした場合に、下記の画像のようなリンク先の概要を表示する仕組み（橙枠内）を Twitter カード（Twitter Cards）というらしく、このサイトでも試してみました。
Twitter カードの設定方法は簡単で、リンク先のページ（表示対象のサイト）側でヘッダーに <meta>タグを追記するだけ対応できるようでしたので、このサイトでも試してみました。
詳細は、下記の公式ページに記載されていますので、そちらを参照ください。
Twitter [ツイートをカードで最適化する]
https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started
Twitter カードを試す
このサイト[ https://note.motnote.com/ ]は WordPress を使用しており、プラグインで Twitter カードに対応してしまったため、開発用のサイト[ https://dev.motnote.com/ ]の方に、テスト用ページを置いて、試してみました。
検証用ファイル作成
今回、以下の2ファイルを作成しました。
※内容は適当なファイルです。
[WEBページ] https://dev.motnote.com/devpg/twittercd/twitter-cd.html
[カード画像] https://dev.motnote.com/devpg/twittercd/motnote_tc_s.png
上記のHTMLファイルのヘッダー<head>タグ内に、以下のようなTwitter カード用の<meta>タグを追加します。
<meta name="twitter:card" content="カードタイプ">
<meta name="twitter:site" content="ウェブサイトの@ユーザー名">
<meta name="twitter:creator" content="コンテンツ作成者/著者の@ユーザー名" />
<meta property="og:url" content="WEBページのURL">
<meta property="og:title" content="WEBページのタイトル">
<meta property="og:description" content="WEBページの説明">
<meta property="og:image" content="カードの画像のURL">プロパティ[twitter:card] は、カードタイプは “summary”、“summary_large_image”、“app”、“player” のいずれかを指定します。
実際のHTMLファイルでは、カードタイプを “summary” とし、下記のように設定しました。
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@mucha56">
<meta name="twitter:creator" content="@mucha56" />
<meta property="og:url" content="https://dev.motnote.com/devpg/twittercd/twitter-cd-s.html">
<meta property="og:title" content="MOT NOTE | Twitter Card のテスト">
<meta property="og:description" content="Twitter Card のテストページです。">
<meta property="og:image" content="https://dev.motnote.com/devpg/twittercd/motnote_tc_s.png">以上で、Twitter カード の設定は完了です。
Twitter カードの設定検証
次に、Twitter カードの設定内容の検証を下記の Card Validator というサイトで行います。
Card Validator
https://cards-dev.twitter.com/validator
左側の「Card URL」欄に、WEBページのURLを入力し、「Preview card」ボタンをクリックすると、右側の「Log」欄に Twitter カードの設定内容の検証結果が表示されます。
エラーが発生した場合は、WEBページのHTMLファイルを修正して、再検証を行ってください。
Twitter カードの情報は、サーバーにキャッシュされているようです。「Preview card」ボタンをクリックするとキャッシュが更新されるようなのですが、反映されるまで時間がかかります。しばらく（数分～）待っていても更新されないことが多かったです。
「Card preview」欄は、以前は Twitter カードのプレビューが表示されていたようでしたが、現在は表示されなくなってしまったようです。
ツイートしてみる
作成したWEBページをツイートしてみます。
ツイート欄にWEBページのURLを入力すると、下側に Twitter カード が表示されるようになりました。
実際にツイートした内容にも、Twitter カードが表示されたことが確認できました。
カードをクリックすると、以下のテストページが表示されました。
テストページ内のURLは、この説明ページになります。
今回の説明では、画像は掲載していないのですが、プロパティのカードタイプを “summary_large_image” にするだけで、よくある大きいカード（上段に画像、下段に解説）に変更できます。
以上で、Twitter カードの設定と表示確認は終了です。
おわり。