head内の必要タグ、OGP設定

head内に色々と書いてあるのは分かるが、何を書けばいいの状態。ちゃんとまとめていただいている記事がありましたので共有します。

またhead内にはOGP設定、つまりTwitterやFacebookなどSNSで共有した際に自動的にタイトルや画像が出てくるあれです。URLペーストしただけでポヨン、とカードが出てきてサイトの名刺のようなものの設定も行わなければなりません。

まずは基本的なところ、またOGPの設定は以下のサイトが参考になりました。

「head内に書くべきタグを総まとめ：SEO対策に有効なものは？」https://saruwakakun.com/html-css/basic/head

そもそもTwitterカードとは？から説明していただいているサルワカさん。いつも参考になりすぎています。

「【2020年版】Twitterカードとは？使い方と設定方法まとめ」https://saruwakakun.com/html-css/reference/twitter-card

そして、指定したTwitterカードがどのように表示できるか「Card validator」から確認することもできます。

「Card Validator | Twitter Developers」https://cards-dev.twitter.com/validator

 Card validatorでは問題なくTwitterカードが表示されているのに、Twitterにテスト投稿してもなぜか反映されない・・・とうまくいきませんでした。しかし、共有する際に短縮したドメイン名のみでURLを入力し共有を試みていたので、正常に反映されませんでした。プロトコル入りの「https://~」からきちんと入力すると、指定した通りにTwitterカードが表示されました。

しかし、他のサイトを見るとドメイン名だけでもTwitterカードが正常に表示されているのものも見かけたのですが、なぜでしょうか？どなたか詳しい方、教えていただけるとありがたいです。。！