メタタグを簡単に見ることができるMetatags.io

メタタグとは

メタタグは、そのウェブページに関する情報を含んでいるタグです。より正確に言うと、このページのタイトルやサムネイルなどを開発者がヘッダーに記述しておくと、検索エンジンや外部サービスが参照するためのものです。例えば、Slackに画像を共有した場合、サイトの名前、タイトル、内容、サムネイルなどがすべてメタタグに保存された内容を元に表示されます。

メタタグの内容は、ウェブページのヘッダーに含まれています。例えば、og:title、og:description、og:imageなどが上記Slackメッセージでコンテンツを構成していることがわかります。私もこの部分を気にせずにブログ記事を共有した際に表示される画像がTailwindBlogと表示されています。

メタタグを見る際によくある問題

メタタグが適切に構成されているかを確認する簡単な方法は、TelegramやSlack、KakaoTalkなどに一度送ってみることです。しかし、この方法には1つ問題があります。多くのサービスでは、これらのメタタグは効率性のために一度保存されると一定期間キャッシュされます。開発中に適用されているかを修正しながら見ようとすると、いつも修正前の値が一時的に表示されます。私もこの問題で悩んでいたところ、職場の同僚の推薦でmetatags.ioというサイトを知りました。便利だと思い、おすすめします。

サイト紹介 metatags.io

サイトの使い方は簡単です。アクセスすると検索欄があり、メタタグを確認したいサイトのアドレスを入力してボタンを押すだけです。するとしばらくしてから、有名なサービスでどのようにメタタグが表示されるかを確認することができます。Google、Twitter、Facebook、LinkedIn、Pinterest、Slackでどのように表示されるか簡単に確認できます。

まとめ

すでに知っている人にとっては特に新しい内容ではありませんが、知らない人にとっては非常に便利な機能です。何よりも、開発者でなくても簡単に使用できるため、多くの人々がうまく活用していただければと思います。