メタタグの基本とSEO・SNS対策における重要性

メタタグとは、HTMLの<head>タグ内に記載する、ウェブページの裏側の情報を検索エンジンやソーシャルメディアに伝えるための「タグ」です。ユーザーの目には直接見えませんが、サイトの内容を適切に伝え、SEOやSNS上での表示を最適化するために非常に重要な役割を果たします。

検索エンジンは、メタタグからそのページの概要や特徴を読み取り、検索結果での表示に反映します。タイトルタグ（titleタグ）の内容は検索結果ページのリンクテキストになり、メタディスクリプション（meta description）は検索結果の説明文として表示される可能性が高くなります。これらのメタタグを最適化することで、検索結果での見え方が改善し、クリック率やサイトへの流入数アップににつながります。

一方、SNS上ではOGPタグ（Open Graph Protocol）の設定が重要になります。OGPタグによって、そのページのタイトルや説明文、画像などのプレビュー情報がSNSに伝わります。FacebookやTwitterでシェアされた際の投稿の見栄えを整え、魅力的に見せることで、エンゲージメント率の向上やサイトへの流入増加が期待できます。

つまり、メタタグの適切な設定は、検索エンジンからの評価を高めるSEO効果と、SNS上でのコンテンツの拡散力を上げるソーシャルメディア対策の両面に寄与するのです。タイトルタグやディスクリプションを最適化してGoogleからの流入を増やしつつ、OGPタグを活用してSNSでの注目度や拡散力を高める。そうすることで、サイト全体への流入数とエンゲージメントの向上を図ることができるでしょう。

このように、メタタグはサイトの集客力とユーザーとのコミュニケーションを高める上で無視できない要素です。デフォルトの設定のままにせず、サイトの目的に合わせてメタタグを戦略的に最適化していくことが、SEOとSNS対策における大きなカギを握ると言えます。

titleタグとdescriptionタグ – SEOに直結する主要タグ

titleタグとdescriptionタグは、検索結果の見え方に直結する重要なメタタグです。ユーザーが検索結果を見て、クリックするかどうかを判断する材料になります。

titleタグの内容は、検索結果のタイトルとして表示されます。ページの内容を端的に表す重要なキーワードを盛り込みつつ、ユーザーの興味を引く工夫が必要でしょう。例えば以下のような感じです。

html
<title>【完全版】Next.js App Routerでメタタグを設定する方法 | 株式会社〇〇</title>

descriptionタグは、検索結果の説明文として表示される可能性が高いです。160文字以内で、ページの本質的な内容を端的に伝えるのが鉄則です。キーワードを1～2個盛り込みつつ、ページの独自性や強みを際立たせるのがポイントです。

html
<meta name="description" content="Next.js App Routerでメタタグを設定する方法を初心者向けに解説。titleタグやdescriptionタグの書き方、OGPタグやTwitterカードの設定方法まで、実装例を交えて詳しく説明します。">

こうしたタイトルタグとディスクリプションの最適化により、検索結果でより多くのユーザーの目に留まり、クリック率の向上につなげることができるでしょう。

OGPタグとTwitterカード – SNSでの見栄えを最適化

OGPタグとTwitterカードを設定することで、FacebookやTwitterでシェアされた際の投稿の見栄えを整えることができます。

OGPの主要なタグとしては、以下のようなものがあります。

html
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:type" content="ページの種類">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="サムネイル画像のURL">

og:titleとog:descriptionは、シェア時の投稿のタイトルと説明文になります。titleタグやdescriptionタグの内容を流用しつつ、よりSNS映えするような書き方を心がけましょう。og:imageは、目を引く印象的な画像を指定します。

Twitterカードの場合は、twitter:というプレフィックスのついたタグを使います。カードの種類に応じて、以下のように必要なタグを設定していきます。

html
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ユーザー名" />
<meta name="twitter:creator" content="@作成者ユーザー名" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:description" content="ページの要約" />
<meta name="twitter:image" content="画像のURL" />

これらのタグを過不足なく設定することで、SNSでの情報表示を整え、ユーザーの注目を集めることができるでしょう。シェアされる際のサムネイル画像一つで印象は大きく変わります。コンテンツの魅力を余すところなく伝える、最適なメタ情報を設計しましょう。

メタタグについてもっと詳しく知りたい方は以下の記事でより詳しく解説しています。

関連の記事
メタタグのSEO＆SNS対策：検索エンジンとソーシャルメディアに効果的な設定方法
SEO

Next.js App routerでのメタタグ設定方法を解説

Next.js 13で導入されたApp Routerでは、メタタグの設定方法がこれまでと変わりました。App Routerを使う場合、pagesディレクトリの代わりにappディレクトリを使用します。ここでは、App Routerにおけるメタタグの基本的な実装方法を見ていきましょう。

メタタグを設定するには、appディレクトリ内のlayout.tsxまたはpage.tsxファイルで、metadataオブジェクトまたはgenerateMetadata関数をエクスポートします。metadataオブジェクトは静的なメタデータを定義するのに対し、generateMetadata関数は動的なメタデータを生成するために使用されます。

基本的な使い方としては、以下のようになります。

tsx
// layout.tsx or page.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: '記事のタイトル',
  description: '記事の説明',
};

ここで定義されたメタデータは、そのルートセグメントとその子セグメントに自動的に適用されます。

layout.tsxとpage.tsxでの静的メタタグの設定

静的なメタタグを設定するには、layout.tsxまたはpage.tsxファイルでMetadataオブジェクトをエクスポートします。例えば、以下のように記述します。

tsx
// app/layout.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Next.jsアプリ',
  description: 'Next.jsアプリの説明',
  openGraph: {
    title: 'Next.jsアプリ',
    description: 'Next.jsアプリの説明',
    url: '<https://example.com>',
    siteName: 'Next.jsアプリ',
    images: [
      {
        url: '<https://example.com/og-image.jpg>',
        width: 1200,
        height: 630,
      },
    ],
    locale: 'ja_JP',
    type: 'website',
  },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

このようにMetadataオブジェクトを定義することで、各種メタタグを設定できます。titleやdescriptionの他に、OGPタグ用のopenGraphプロパティなども指定可能です。

generateMetadataで動的にメタタグを生成

動的なメタデータが必要な場合は、generateMetadata関数を使用します。これにより、パラメータや外部データに基づいてメタデータを生成できます。

以下は、記事のIDに基づいてメタデータを動的に生成する例です。この中では、OGPタグとTwitterカードの両方を設定しています。

tsx

// app/posts/[id]/page.tsx
import { Metadata } from 'next';

type Props = {
  params: {
    id: string;
  };
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await fetch(`https://api.example.com/posts/${params.id}`).then((res) => res.json());

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: 'article',
      images: [post.image],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.description,
      images: [post.image],
    },
  };
}

export default function PostPage({ params }: Props) {
// ...
}

ここでは、openGraphプロパティでOGPタグを設定し、twitterプロパティでTwitterカードを設定しています。twitter.cardでは、カードの種類を指定します。この例ではsummary_large_imageを使用し、大きな画像付きのサマリーカードを表示するようにしています。

デフォルトメタタグ、評価順序、マージルールを理解する

App Routerでは、メタデータの評価順序とマージルールを理解することが重要です。

デフォルトでは、全てのページに対して以下の2つのメタタグが自動的に追加されます。

  • charset: 文字エンコーディングを指定する<meta charset="utf-8">タグ
  • viewport: レスポンシブデザイン用の<meta name="viewport" content="width=device-width, initial-scale=1">タグ

メタデータの評価は、ルートセグメントから始まり、最終的なpage.tsxセグメントに近いセグメントまで順番に行われます。例えば、以下のような構成の場合:

  • app/layout.tsx
  • app/blog/layout.tsx
  • app/blog/[slug]/page.tsx

評価順序は、app/layout.tsx → app/blog/layout.tsx → app/blog/[slug]/page.tsxとなります。

各セグメントで定義されたメタデータは、マージされて最終的なメタデータ出力を形成します。同じキーを持つプロパティは、後から定義されたものが優先されます。ただし、titleやdescriptionなどのプロパティは、より具体的なセグメントで定義されたものが使用されます。

以上が、Next.js App Routerにおけるメタタグの基本的な設定方法です。静的なメタデータはMetadataオブジェクトで定義し、動的なメタデータはgenerateMetadata関数を使って生成します。評価順序とマージルールを理解することで、適切なメタタグを設定していきましょう。

SEO効果を最大化する上級テクニック

ここまでの基本的なメタタグ設定に加えて、より高度な最適化テクニックを取り入れることで、SEO効果をさらに高めることができます。ここでは、構造化データの実装、canonicalとrobotsタグの活用、コンテンツに合わせたメタタグ設計について見ていきましょう。

構造化データの実装でリッチリザルトを狙う

構造化データは、Webページ内の情報を検索エンジンが理解しやすいように、構造化されたフォーマットで提供するためのマークアップです。代表的なフォーマットとして、JSON-LD（JavaScript Object Notation for Linked Data）があります。

Next.jsアプリケーションでJSON-LDを実装するには、<script>タグ内にJSON-LDデータを記述します。以下は、記事ページにおける構造化データの実装例です。

tsx
// app/posts/[id]/page.tsx
export default function PostPage({ post }) {
  const jsonLd = {
    "@context": "<https://schema.org>",
    "@type": "Article",
    headline: post.title,
    image: post.image,
    datePublished: post.publishedAt,
    author: {
      "@type": "Person",
      name: post.author,
    },
  };

  return (
    <>
      <article>
        {/* 記事の内容 */}
      </article>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
    </>
  );
}

ここでは、@typeをArticleに設定し、記事のタイトル、画像、公開日、著者などの情報を構造化データとして提供しています。

構造化データを適切に実装することで、Googleの検索結果にリッチリザルト（Rich Results）が表示される可能性があります。リッチリザルトにより、通常の検索結果よりも目立つ形で情報が表示され、クリック率の向上が期待できます。

canonicalとrobotsタグで重複コンテンツとクロールをコントロール

canonicalタグは、そのページの正規のURLを指定するためのタグです。重複コンテンツによるSEOへの悪影響を防ぐために使用します。以下のように設定します。

tsx
// app/blog/[slug]/page.tsx
export const metadata: Metadata = {
  title: '記事のタイトル',
  description: '記事の説明',
  alternates: {
    canonical: '<https://example.com/blog/記事のスラッグ>',
  },
};

ここでは、alternates.canonicalプロパティに正規のURLを指定しています。

robotsタグは、検索エンジンのクローラーに対して、そのページのインデックス化やリンクのフォローを制御するためのタグです。以下のように設定します。

tsx
// app/private/page.tsx
export const metadata: Metadata = {
  title: 'プライベートページ',
  description: 'このページは検索エンジンにインデックスされません',
  robots: {
    index: false,
    follow: false,
  },
};

ここでは、robots.indexとrobots.followをどちらもfalseに設定し、このページを検索エンジンにインデックスさせず、リンクもフォローさせないようにしています。

canonicalタグとrobotsタグを適切に使い分けることで、重複コンテンツ問題を解消し、クロール効率を最適化できます。

サイトの目的に合わせたメタタグ設計を

メタタグは、サイトやページの目的に合わせて戦略的に設計することが重要です。例えば、ECサイトであれば、商品ページには以下のようなメタタグを設定するとよいでしょう。

tsx
// app/products/[id]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getProduct(params.id);

  return {
    title: product.name,
    description: product.description,
    openGraph: {
      type: 'product',
      title: product.name,
      description: product.description,
      images: [product.image],
      product: {
        price: product.price,
        currency: 'JPY',
        availability: 'instock',
      },
    },
    twitter: {
      card: 'summary_large_image',
      title: product.name,
      description: product.description,
      images: [product.image],
    },
  };
}

ここでは、商品名や説明、価格、在庫情報などを構造化データとしてマークアップし、OGPタグやTwitterカードにも反映させています。

また、ブログ記事であれば、以下のようなメタタグ設定が考えられます。

tsx
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      type: 'article',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
      article: {
        publishedTime: post.publishedAt,
        modifiedTime: post.updatedAt,
        authors: [post.author],
        tags: post.tags,
      },
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

ここでは、記事のタイトルや抜粋、公開日時、著者、タグなどの情報を盛り込んでいます。

このように、サイトやページの目的に合わせてメタタグを最適化することで、SEO効果を最大限に引き出すことができます。

以上が、SEO効果を高めるための上級テクニックです。構造化データ、canonicalタグ、robotsタグを活用し、コンテンツの種類に応じたメタタグ設計を行うことで、検索エンジンからの評価を高め、より多くのトラフィックを獲得しましょう。