meta tagはページの<head>内に記述され、検索エンジンやSNSにページの表示方法を伝える役割を持ちます。このジェネレーターは、Googleの検索結果に表示されるタイトルとmeta description、canonicalやrobotsの指定、さらにリンクをシェアした際の画像・タイトル・文章を制御するOpen GraphとTwitter Cardのタグを一度にまとめて作成します。入力した値はすべて自動でエスケープされるため、タイトルに引用符や記号が含まれてもコードが壊れる心配はなく、未入力の項目については空のタグを出力しません。
無料meta tag generator
すべてブラウザー内で動作します。アップロードも登録も不要です。
ページ情報
生成されたmeta tag
ライブプレビュー
example.com
ここにページタイトルが表示されます
ここに検索結果のスニペットやSNSカード用のmeta descriptionが表示されます。
og:image のプレビュー
example.com
ここにページタイトルが表示されます
ここに検索結果のスニペットやSNSカード用のmeta descriptionが表示されます。
meta tag generatorとは何ですか?
meta tag generatorは、ページのタイトルや説明文、SNS用の情報を入力するだけで、必要なHTMLのmeta tagに変換してくれるツールです。SEO用のタイトルと説明文に加えて、Open Graph(og:)タグやTwitter Cardタグも同時に作成します。入力するとその場でエスケープ処理済みのコピー可能なコードが表示され、すべての処理はブラウザ内で行われるため、データが外部に送信されることはありません。
使い方
- 1ページ情報を入力する. ページのタイトルとmeta descriptionを入力し、canonical URLと、必要であればog:imageやサイト名を追加します。
- 2SNS向けの設定をする. og:typeを選び、Twitter Cardの表示サイズを選択して、Twitterのユーザー名を入力します。og:urlは初期状態でcanonical URLと同じ値になります。
- 3ライブプレビューを確認する. 入力に合わせてGoogle風の検索結果表示とSNSカードがリアルタイムで更新されるので、実際の見え方をその場で確認できます。
- 4meta tagをコピーする. HTMLはリアルタイムで生成されます。生成されたコードをコピーして、ページの head 内に貼り付けてください。
こんな方に
- SEO担当者が、タイトルとmeta descriptionをGoogleの文字数制限に合わせてチェックしながら作成する場合。
- Web開発者が、ページテンプレート用にそのまま貼り付けられるOpen GraphとTwitter Cardのタグを用意したい場合。
- マーケターが、SNSでリンクをシェアしたときに表示される画像・タイトル・説明文を設定する場合。
- ブロガーやショップ運営者が、プラグインやCMSの設定に頼らず正しいmeta tagを追加したい場合。
よくある質問
meta tag generatorは無料で使えますか?
はい、完全に無料で、登録も回数制限もありません。すべての処理はブラウザ内だけで行われます。
入力したデータはどこかにアップロードされますか?
いいえ。入力したタイトル、説明文、URLはすべてブラウザ内でHTMLのmeta tagに変換され、サーバーに送信されることはありません。
どのようなmeta tagが生成されますか?
titleタグ、meta description、canonicalリンク、robots指定に加え、Open Graph一式(og:type、og:title、og:description、og:url、og:image、og:site_name)、およびTwitter Cardタグ(twitter:card、twitter:title、twitter:description、twitter:image、twitter:site)が生成されます。
タイトルと説明文の長さはどのくらいが適切ですか?
タイトルはおよそ60文字以内、meta descriptionはおよそ50~160文字を目安にしてください。これを超えると検索結果でタイトルや説明文が省略されてしまうため、このツールでは超過分を警告として表示します。
og:imageとtwitter:imageの違いは何ですか?
og:imageはFacebookやLinkedInなど大半のプラットフォームでリンクをシェアした際に表示される画像で、twitter:imageはX/Twitterのカード用の画像です。このツールでは両方に同じ画像URLを使用しますが、これが一般的な設定で、1200x630の画像1枚をどちらにも使えます。
生成したmeta tagはどこに貼り付ければよいですか?
ページのHTMLの<head>要素内に、既存のmeta tagと並べて配置してください。その後、Facebook Sharing DebuggerやTwitter Card Validatorでタグが正しく反映されているか確認できます。