URLを貼り付けるだけで各サイトの表示プレビューが確認できるサイト「Meta Tags」

ウェブ制作において重要な役割を果たす「head」のコード。SEO対策をするにあたり非常に大切な部分です。サイトの顔にもなりうるheadタグ内は、GoogleのランキングやソーシャルメディアのOGPを設定する役割があります。
今日はそんな無料メタタグ確認・編集ツールである「Meta Tags」を紹介します。

metatags.io

Meta Tags — Preview, Edit and Generate

https://metatags.io

With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!

このサイトはFacebookやTwitterなどのOGPおよび、Googleなどの検索エンジン対応のコードを簡単に確認・編集・生成ができるツールです。使用は完全無料となっていて誰でもURLを貼り付けるだけで各ソーシャルサイト等での表示の確認および編集ができます。

任意のサイトURLを上部に貼り付ける

ディスクリプションをサイト上で変更することもでき、右側のプレビューは入力に合わせてリアルタイムで変更されるので、プレビューを気にしながらディスクリプションを変更したい方などにはぴったりです。

選択したサービスでの表示のされ方を確認できる

色んなソーシャルメディア・サービスに対応している

このサイトでmetaタグが生成できる・プレビューが確認できるのは６サイトあります。
・Google
・Facebook
・Twitter
・Linkedin
・Pinterest
・Slack

OGPやイメージ画像もここで変更できるので、反映後をイメージしながら作れるのがとても便利ですね。特に、特定サービスだけ反応しないのかなどエラーを探す手段にもなり得ますね。
編集もメインページで自由にすることができますので、イメージ画像の反映テストにも一役買ってくれそうです！

目的の解説もしっかりと

またこのサイト、コード変換だけではなくメタタグに関する解説も掲載されています。

解説ページの序盤

「なぜメタタグは必要なのか」「SEO対策とは？」というしっかりとした説明が書かれているので、今まで「ただ必要だと思っていたから」という理由でメタタグを書いていた初学者さんも知識から落とし込めるいい機会となるでしょう。
上記の変換ツールから下にスクロールすると説明が載っています。ぜひ一度読んでみてください。