ToolKitNexus
SEO

メタタグジェネレーター

SEO に強いメタタグを生成。タイトル、説明、Open Graph、Twitter Card を含む。

メタタグは、ページの <head> 内に置かれ、検索エンジンやソーシャルプラットフォームにページ内容を伝える HTML 要素です。title と meta description は検索結果のスニペットを形作り、Open Graph タグ(og:title、og:description、og:image)と Twitter Card はリンクが SNS で共有されたときの見え方を制御します。このツールは規格に準拠したメタタグ一式を生成し、そのまま HTML にコピーできます。

HTML
<!-- Primary Meta Tags -->
<title>My Awesome Page</title>
<meta name="title" content="My Awesome Page">
<meta name="description" content="A short, compelling description that shows up in search results and social shares.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="My Awesome Page">
<meta property="og:description" content="A short, compelling description that shows up in search results and social shares.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_US">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://example.com/page">
<meta name="twitter:title" content="My Awesome Page">
<meta name="twitter:description" content="A short, compelling description that shows up in search results and social shares.">
<meta name="twitter:image" content="https://example.com/og.png">

<!-- Canonical -->
<link rel="canonical" href="https://example.com/page">

使い方

  1. タイトル、説明、URL を入力。
  2. OGフィールドをカスタマイズ。
  3. 生成された HTML をコピー。

よくある質問

Open Graph とは?

Open Graph は Meta(Facebook)が策定したプロトコルで、Web ページをソーシャルフィード上のリッチなオブジェクトに変えます。og:title、og:description、og:image、og:url が、Facebook、LinkedIn、Slack、Discord などで共有されたときのタイトル・概要・サムネイルを決定します。

title と meta description の適切な長さは?

タイトルは 50〜60 文字(約 600px)、meta description は 150〜160 文字が目安です。Google は超過分を省略するため、重要な語句は先頭に置きましょう。

meta keywords タグはまだ有効?

いいえ。Google は 2009 年以降 keywords タグを無視しており、主要な検索エンジンもランキングに使用していません。title、meta description、Open Graph タグに注力するのが効果的です。

twitter:card とは?

twitter:card は X(Twitter)でのリンクプレビューの表示方法を指定します。"summary" は小さな正方形サムネイル、"summary_large_image" は大きな横長画像を表示します。画像は twitter:image で指定します(未指定時は og:image にフォールバック)。