SEO
Meta Tags / Open Graph Generator
SEO、Open Graph(Facebook)、Twitter Card用のHTML metaタグを生成 — カードプレビュー付き。
The meta tags in a page's <head> control how it appears in search results and in the preview card when it's shared on social media or messaging apps. This tool generates a full set of SEO, Open Graph, and Twitter Card tags along with a live preview of the card.
How to use it
- Fill in the page's title, description, URL, and image — the tags generate instantly, and a preview shows how the card will look on Facebook, X (Twitter), and similar services.
- Copy the finished HTML block and paste it into the page's <head>.
- Check the title and description length — values that are too long get truncated by the search engine or social platform.
Common uses
- Setting up Open Graph for a page so the link looks polished when shared on Telegram, Slack, or social media.
- Writing a title and meta description targeting a specific search query for a new page.
- Quickly sanity-checking a page's existing meta tags through the card preview before publishing.
Things to keep in mind
Open Graph and Twitter Card are separate standards; most platforms except X read og: tags directly, so duplicating the main fields under twitter: isn't always required, but it improves compatibility.
The og:image must be reachable at an absolute URL, not a relative path — otherwise the social platform's crawler won't be able to fetch it.
よくある質問
Open GraphとTwitter Cardタグが同じことをするなら、なぜ別々に必要なのですか?
Open Graphタグ(og:title、og:imageなど)はFacebook、LinkedIn、その他ほとんどのプラットフォームで読み取られますが、Twitterは独自のタグセット(twitter:card、twitter:title)を持っています — Twitter自身のタグがない場合はOpen Graphタグにフォールバックしますが、両方を追加すると一貫したプレビューが保証されます。
og:imageの実際の推奨サイズはどれくらいですか?
1200x630ピクセルが広く推奨されているサイズです — ほとんどのプラットフォームで不格好にトリミングされることなく大きなプレビューカードとして正しく表示され、一般的なファイルサイズ制限内に収まります。
これらのタグを生成すると、コンテンツがサーバーに送信されますか?
いいえ。タグはあなたが入力した内容から、ブラウザ内で直接生成されます — 何もどこにもアップロードされません。
canonical URLタグは何をするのですか?
同じコンテンツが複数のアドレス（wwwあり・なし、パラメータ付きなど）でアクセス可能なとき、どのバージョンのページが正規であるかを検索エンジンに伝えます — これにより、ランキングが重複ページの間で分散するのではなく、1つのページに集約されやすくなります。
meta robotsのnoindexとrobots.txtのdisallowの違いは何ですか?
metaタグのnoindexは、すでにクロールされたページコンテンツがインデックスされるのを防ぎますが、robots.txtのDisallowはボットがそもそもページをクロールすること自体を防ぎます — だからこそ、robots.txtでブロックされたページではnoindexが効きません：検索エンジンはそのタグを一度も目にすることがないのです。