メタデータ

最初のアプリを作成する

検索エンジン最適化

0 ポイント

レンダリングとランキング

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

タイトル

titleタグは、主に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）の一部である場合、ページにどのように表示されるかです。

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によって開発され、任意のWebページでメタデータを使用する方法を標準化しています。必要なだけ少ない情報または多くの情報を提供できますが、すべての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 H1タグ

送信

詳細

前へ次へ

コミュニティに質問することもできます。 GitHub Discussions.