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

更新日:2018年11月21日

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

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

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

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

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

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

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

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

目的の解説もしっかりと

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

解説ページの序盤

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

Meta Tagsを試してみたい方はこちらから

@moriom_d 書き手: もりむし
未経験×独学からデザイナーになりたくてなった人。 フルスタック修行中。
Twitter: @moriom_d

この記事が気に入ったらいいね・フォローお願いします!

『気になるプロダクト』の記事