メタ情報とは？それぞれの効果と設定方法

サイト運用をしていると、メタ情報に関わることが多いかと思います。この記事では、メタ情報の解説と、設定方法について解説します。

1 メタ情報とは
2 設定する場所（HTMLサイトの場合）
3 設定する場所（ワードプレスの場合）
4 まとめ

メタ情報とは

メタ情報は、ホームページやコンテンツに関する情報です。HTMLの<head>タグ内に記述されており、Googleでの検索や、SNSでの表示で役立つ設定です。

メタ情報にはいくつかの種類があり、それぞれ異なる効果を持ちます。以下に主なメタ情報とその効果を紹介します。

メタタイトル

<title>サイトのタイトル</title>

ウェブページのタイトルとして検索エンジンやブラウザに表示されるテキストです。検索結果のリンク部分に表示されるほか、ブラウザのタブにも表示されます。メタタイトルはSEOの観点から重要で、ページの内容を簡潔に表し、クリック率を高める役割があります。

メタディスクリプション

<meta name="description" content="サイトの概要をここに記述します。">

ブラウザの検索結果ページに表示されます。メタディスクリプションは、ユーザーにページ内容を簡潔に伝えて、クリックを促すための重要な要素です。SEOにおいても、適切に作成されたメタディスクリプションは、検索結果でのクリック率を向上させる効果があります。

メタキーワード

<meta name="keywords" content="キーワード1, キーワード2, キーワード3">

以前はメタキーワードが検索表示に関わっていました。ですが、近年は検索結果の要因として使用していないことが多く、メタキーワードタグはほとんど意味を持たなくなりましたが、一部の検索エンジンや特定の目的のために使用されてます。

メタロボット

<meta name="robots" content="index, follow">

メタロボットタグは、検索エンジンのクローラーに対して、ウェブページのインデックス方法やリンクのたどり方を指示するためのHTMLタグです。

index / noindex：ページをインデックスするかしないか。
follow / nofollow：ページ内のリンクをたどるかたどらないか。
noarchive：ページのキャッシュを保存しないようにする。
nosnippet：検索結果にスニペット（抜粋）を表示しないようにする。

オープングラフ

<meta property="og:title" content="サイトのタイトル">
<meta property="og:description" content="サイトのページの概要">
<meta property="og:image" content="画像URL">
<meta property="og:url" content="サイトURL">

og:title

SNSでのシェア時に表示されるタイトルタグです。例えば、FacebookやTwitterなどで、このタグに設定されたタイトルがシェアされたリンクのプレビューに表示されます。

og:description

SNSでのシェア時に表示される説明文タグです。この説明文は、FacebookやTwitterなどでシェアされたリンクのプレビューに表示されます。

og:image

SNSでのシェア時に表示される画像のURLタグです。この画像は、FacebookやTwitterなどで、シェアされたリンクのプレビューに表示されます。

og:url

SNSでのシェア時に使用されるページのURLタグです。これにより、シェアされたリンクのプレビューに正確なページのURLが表示されます。

Twitterカード

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="あなたのページのタイトル">
<meta name="twitter:description" content="あなたのページの概要">
<meta name="twitter:image" content="画像URL">

Twitter上での表示をカスタマイズし、エンゲージメントを増加させます。

twitter:card

summary: リンクのタイトル、説明、サムネイルが表示される。
summary_large_image: summaryカードに加えて、大きな画像が表示される。
app: モバイルアプリのダウンロードリンクを含むカード。
player: ビデオまたはオーディオコンテンツが埋め込まれたカード。

このタグは、Twitterでのリンクのプレビューをカスタマイズするために使用されます。

twitter:title

Twitterでシェアされたリンクのタイトルを指定することができます。

twitter:description

Twitterでシェアされたリンクの説明文を指定することができます。

twitter:image

Twitterでシェアされたリンクのプレビューに表示される画像を指定することができます。

設定する場所（HTMLサイトの場合）

HTMLサイトでメタ情報を設定するには、各メタタグをHTMLファイルの<head>セクションに追加します。以下は各メタ情報の例です。

<head>
    <title>あなたのページのタイトル</title>
    <meta name="description" content="あなたのページの概要をここに記述します。">
    <meta name="keywords" content="キーワード1, キーワード2, キーワード3">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="あなたのページのタイトル">
    <meta property="og:description" content="あなたのページの概要">
    <meta property="og:image" content="画像URL">
    <meta property="og:url" content="ページURL">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="あなたのページのタイトル">
    <meta name="twitter:description" content="あなたのページの概要">
    <meta name="twitter:image" content="画像URL">
</head>

設定する場所（ワードプレスの場合）

ワードプレスでメタ情報を設定するには、SEOプラグインを利用するのが一般的です。以下に代表的なプラグインとその設定方法を紹介します。

Yoast SEO

インストールと有効化: ワードプレスのダッシュボードで「プラグイン」＞「新規追加」でYoast SEOを検索し、インストールして有効化します。
メタタイトルとメタディスクリプションの設定: 各ページや投稿の編集画面で、Yoast SEOメタボックスを使用して設定します。
ソーシャルメディアの設定: Yoast SEOの「ソーシャル」タブからオープングラフやTwitterカードの設定が可能です。

All in One SEO Pack

インストールと有効化: ワードプレスのダッシュボードで「プラグイン」＞「新規追加」でAll in One SEO Packを検索し、インストールして有効化します。
メタタイトルとメタディスクリプションの設定: 各ページや投稿の編集画面で、All in One SEOメタボックスを使用して設定します。
ソーシャルメディアの設定: All in One SEOの「ソーシャルメディア」タブから設定が可能です。

まとめ

メタ情報は、ウェブサイトの可視性とパフォーマンスを向上させるための重要な要素です。適切なメタ情報の設定により、検索エンジン最適化（SEO）やソーシャルメディアマーケティングにおいて大きな効果を発揮します。HTMLサイトやワードプレスサイトでの設定方法を理解し、実際に設定することで、あなたのウェブサイトの魅力を最大限に引き出しましょう。