記事が出来たので、ツィートしようと張り付けてみたら、あら、スッカスカ。ちゃんと、設定を見直しました、の回です。（実際やったのは、結構むかし）

ツィッター、イメージ、でない、で検索！！

過去記事をブログカードにして張り付けたり、記事の紹介をツィートしてみたりしようとしても、サイトのほうでちゃんと整備していないとでません。アイキャッチ画像（イメージ）が表示されないとか、内容概略がでてこないとかに出くわします。

OGP とか Twitter Card とか、キーワードを知っててググれば、すぐに見つかりますが、初心者はそんな単語でググれませんよ。そもそも、そんな単語知ってたら、その設定すればいいことわかってますしね。

というわけで、初心者としては、「ツィッター、貼り付け、イメージ、でない」みたいなググりかたしかないんですが、そんな初心者検索に引っかかってくれたのはこちら、OGP、Twitterカードというキーワードとともに、チェックツールを紹介してくれてました。

ゆうやの雑記ブログ
Twitterで記事のサムネイルが表示されない時の対処法【Card Validator】
Twitterで記事をシェアした時にサムネイル（アイキャッチ画像）が表示されない時の対処法をご紹介！Twitter公式ツールのCard Validatorを使用します。
dummy

OGP とか Twitter card とか metaタグを整備する

めでたく、キーワードがわかったので、わかりやすいサイトを探して、お勉強。以下のサイトがわかりやすかったです。定番、サルワカさんところと、metaタグの徹底解説してくれてるところ。

サルワカ | サルでも分かる図解説明マガジン
【2020年版】Twitterカードとは？使い方と設定方法まとめ
「Twitterカードとは何か」から「メリット」「使い方」「表示されない時の対処法」まで徹底解説します。設置方法はブログサービス別にまとめました。
dummy
働くエンジニアマガジン「ポテパンスタイル」
【HTML】metaタグについて徹底解説！一覧で必要・不必要がわかる | 「ポテパンスタイル」
1 metaタグ（meta要素）とは？2 metaタグ（メタタグ）の書き方・書く場所3 metaタグはページごとに設置するのがオススメ4 metaタグの設定を確認する方法5 まとめmetaタグ（meta要素）とは？metaタグとは「META
dummy

テーマのHTMLへ追加

必要なものは以下です。確認していきます。


<!--カード種類は最初からありました-->
<meta name="twitter:card" content="summary_large_image" />
<!--このsiteってのは追加しないといけない-->
<meta name="twitter:site" content="@LearnAnything7" />
<!--以下は、自動で入るので対応不要-->
<meta content="記事のURL" property="og:url" /> 
<meta content="記事のタイトル" property="og:title" /> 
<meta content="記事の要約（ディスクリプション）" property="og:description" />
<meta content="画像のURL" property="og:image" />

実際のHTMLを覗いてみると、こんな感じでした。og:なんとかっていうのは一応入っています。テンプレート内に書かれていて、きちんと埋め込まれています。なかったのは、twitter:site ってやつなので、この一行を追加しました。

2021-03-17 135800

2021-03-17 135507

あと、description 要約っていうのは、ここの設定内容が書き込まれます。これを設定してないと、でてきません。また、GoogleSearchとかに登録したときにDescriptionがないぞって怒られたりもします。なので、記事公開の時には必ず記載するようにしましょう。

2021-03-17 144128

アイキャッチ画像が、入ったり入らなかったり

アイキャッチ画像は、先頭に入った画像からとられるんですが、OpenLiveWriterで貼り付けた画像は対象外になってます。

OLWのImageは、Googleドライブ内にアップロードされて、そこからリンクされてます。一方で、Bloggerのオンラインエディター内で貼り付けると、Blogger画像の保存先である、Googleアルバムアーカイブって場所に保管されてます。このBlogger上で貼り付けた場合は、アイキャッチ画像にも使ってもらえます。

また、サイズ指定にも制約があります。”s 指定” の画像でないと、アイキャッチ画像として扱われません。Blogger でアップロードした画像に関するTipsは、ふじろじっくさんのこちらの記事を参考にしてください。

ふじろじっく
Bloggerの画像の小技
Bloggerにアップロードした画像に関するちょっとした便利ワザをご紹介します。
dummy

ここの記事にあるように、wXXX-hXXX-c のようなトリミング指定などの小技ができるんですが、アイキャッチ画像扱いされるためには、 sXXX の指定でないとだめです。記事は、ichikenさんのこちらの記事を参考にしてください。

駐在員ICHIKENのバエないアメリカ生活
【Blogger】コード発見！関連記事のサムネが表示されない問題の解決方法
この記事はBloggerの関連記事にサムネイルが表示されない問題を解決する方法を提供しています。作成ビューで画像を挿入するとサムネイルが表示されない既知の問題に対する修正方法になります。
dummy

このBloggerがアップロードする場所は、Googleドライブやフォトとも容量は共有しているようなのですが、ドライブにもフォトにもでてきません。Google アルバムアーカイブってところ（ get.google.com/albumarchive ）にアクセスしにいくとみることができるので、そちらから入ってください。

近々、Googleドライブの容量無制限が撤廃されることもあるので、削除したりする必要がでてきそうなんですが、そこにたどり着けないと消すことすらできませんので、メモっておきましょう。

Twitterへの貼り付け

この記事を貼り付けてみたら、こんな感じになりました。

カード種類：summary

2021-03-17 153637

カード種類：summary_large_image

2021-03-17 160059