SEO: メタデータ | Next.js 日本語

メタデータはウェブサイトコンテンツの要約であり、サイトにタイトル、説明、画像を付加するために使用されます。

タイトル

titleタグはSEOにおいて最も重要な要素の1つです。その理由は主に2つあります：

第一に、検索結果からサイトにアクセスする際にユーザーが目にする要素であること。

第二に、Googleがページの内容を理解するために使用する主要な要素の1つであること。タイトルにキーワードを含めることは、検索エンジンのランキング向上につながるため推奨されています。

以下は例です：

<title>iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple</title>

このページには主要なキーワードが全て含まれており、ユーザーにとって魅力的な価値提案（割引）が明確に示されています。

説明文

descriptionメタタグも重要なSEO要素ですが、タイトルほどではありません。Googleによれば、この要素はランキングには考慮されませんが、検索結果のクリック率に影響を与える可能性があります。

descriptionメタタグはタイトルの情報を補完するために使用します。タイトルに収まらなかったキーワードがあれば、ここで使用しましょう。ユーザーの検索に含まれる場合、これらのキーワードは太字で表示されます。

HTMLでのdescriptionメタタグの例：

<meta
  name="description"
  content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
/>

検索エンジン結果ページ（SERP）での表示例：

タイトルと説明文を含むSERPスニペットの例

Next.jsでは、Headコンポーネントでタイトルと説明文を設定します。Next.jsでのメタタイトルと説明タグの例：

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>
          iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple
        </title>
        <meta
          name="description"
          content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
          key="desc"
        />
      </Head>
      <h1>iPhones for Sale</h1>
      <p>insert a list of iPhones for sale.</p>
    </div>
  );
}
 
export default IndexPage;

Headコンポーネントは、ページの内容を説明または提供するためにアプリケーションの任意のページで使用できます。

Open Graph

Open Graphプロトコルは元々Facebookによって開発され、ウェブページでのメタデータの使用方法を標準化しています。提供する情報量は自由ですが、すべてのOpen Graph要素が組み合わさって、サイトの表現を作り出します。

Pinterest、Twitter、LinkedInなどの他のソーシャルメディア企業も、URLを共有する際にリッチカードを表示するためにOpen Graphを使用する場合があります。TwitterにはTwitterカード用の独自タグもあります。

これらのOpen GraphタグはSEO関連タグと多くの類似点がありますが、検索エンジンのランキングには直接的な利益をもたらしません。ただし、人々がソーシャルメディアやWhatsApp、Telegramなどのプライベートメッセージングツールでコンテンツを共有する可能性があるため、使用が推奨されます。

Headコンポーネント内のメタタグにproperty属性を定義することで、Open Graphタグを追加できます。例：

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>Cool Title</title>
        <meta name="description" content="Checkout our cool page" key="desc" />
        <meta property="og:title" content="Social Title for Cool Page" />
        <meta
          property="og:description"
          content="And a social description for our cool page"
        />
        <meta
          property="og:image"
          content="https://example.com/images/cool-page.jpg"
        />
      </Head>
      <h1>Cool Page</h1>
      <p>This is a cool page. It has lots of cool content!</p>
    </div>
  );
}
 
export default IndexPage;

説明文とタイトル、ページ内容を表す画像を含む共有可能なリンクを持つことは、SEOランキングに直接影響しませんが、リンクのクリック率を間接的に向上させ、最終的にはサイトへの訪問者増加につながります。

構造化データとJSON-LD

構造化データは検索エンジンがページを理解するのを容易にします。長年にわたりいくつかの語彙が存在しましたが、現在主要なものはschema.orgです。

公式サイトによると、schema.orgは「インターネット上の構造化データのためのスキーマを作成、維持、促進することを使命とする共同コミュニティ活動」です。

schema.orgの語彙は、RDFa、Microdata、JSON-LDなど、さまざまなエンコーディングで使用できます。

異なる検索エンジンはschema.org内の異なる語彙を採用する場合があり、どの検索エンジンもウェブサイトの語彙で説明されているすべてのユースケースをカバーしているわけではありません。各ケースでどの語彙が受け入れられているか必ず確認してください。

JSON-LD製品スキーマデータを追加した製品ページの例：

import Head from 'next/head';
 
function ProductPage() {
  function addProductJsonLd() {
    return {
      __html: `{
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "Executive Anvil",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
      "sku": "0446310786",
      "mpn": "925872",
      "brand": {
        "@type": "Brand",
        "name": "ACME"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Fred Benson"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "89"
      },
      "offers": {
        "@type": "Offer",
        "url": "https://example.com/anvil",
        "priceCurrency": "USD",
        "price": "119.99",
        "priceValidUntil": "2020-11-20",
        "itemCondition": "https://schema.org/UsedCondition",
        "availability": "https://schema.org/InStock"
      }
    }
  `,
    };
  }
  return (
    <div>
      <Head>
        <title>My Product</title>
        <meta
          name="description"
          content="Super product with free shipping."
          key="desc"
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={addProductJsonLd()}
          key="product-jsonld"
        />
      </Head>
      <h1>My Product</h1>
      <p>Super product for sale.</p>
    </div>
  );
}
 
export default ProductPage;

この例ではデータは文字列としてハードコードされていますが、addProductJsonLdメソッドにデータを渡すことで完全に動的にすることができます。

メタデータ

タイトル

説明文

Open Graph

構造化データとJSON-LD

さらに学ぶ

On this page