チャプター14

Metadata

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

タイトル

タイトルタグは、2つの主な理由で、SEOにとって最も重要な要素の1つです。

第一に、検索結果からあなたのウェブサイトに入ってくる際に、ユーザーが見るものです。

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

例を挙げます

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

このページには、すべての主要なキーワードが含まれており、ユーザーにとって魅力的であり、明確な価値提案である「割引！」を示しています。

説明

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

説明メタタグを使用して、タイトルの情報を補完してください。タイトルに収まらなかったキーワードがあれば、ここに追加してください。ユーザーの検索にこれらのキーワードが含まれている場合、太字で表示されます。

HTMLでの説明メタタグの例

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

検索エンジン結果ページ（SERP）で、ページに表示される様子は次のとおりです。

Example of a SERP snippet with a Title and Description — タイトルと説明を含む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

Facebookによって開発されたOpen Graphプロトコルは、どのウェブページでもメタデータがどのように使用されるかを標準化します。提供する情報の量は任意ですが、Open Graphのすべての要素は、それが添付されているサイトの表現を形成するために連携します。

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

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

Headコンポーネント内のmetaタグに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メソッドにデータを簡単に渡して、完全に動的にすることができます。

Metadata

タイトル

説明

Open Graph

構造化データとJSON-LD

さらに読む

チャプターを完了しました。14