メタ要素とは？基本的な書き方とSEOに影響のあるタグを紹介
適切なSEO対策を行うことは、ホームページ経由の集客を図る企業にとって重要な業務です。なかでも、メタ要素の最適化は適切なSEO対策を行うためには、欠かせない課題の1つと言えます。
メタ要素を最適化することで、ホームページの検索順位やクリック率を改善することが可能です。
この記事は、メタ要素の書き方と使用例、設定を行う際の注意点などを解説します。SEOの基本であるメタ要素の最適化に興味を持っている人は、ぜひ参考にしてください。
1.メタ要素とは？
メタ要素とは、検索エンジンやインターネットブラウザに対して、ページ情報を伝達するためのものです。HTMLファイル内にあるhead要素の子要素となるもので、<head>から</head>までの間に記載します。
【HTMLファイルのコード例】
<!DOCTYPE html>
<html lang="ja">
<head>
この部分にメタ要素を記載する
</head>
<body>
</body>
</html>メタ要素によって伝達できる情報には、次のような内容があります。
- 文字コード
- Webページのタイトル
- Webページのキーワード
- モバイル端末（スマホ・タブレット）における表示方法 など
メタ要素は、「meta要素」や「metaタグ」「メタ情報（meta情報）」といった名称で呼ばれることがあります。いずれの名称であっても、Webページのメタ要素を指すことに違いはありません。
1-1.メタ要素の基本的な書き方
メタ要素の書き方の基本ルールは、次の通りです。
<meta name="属性値" content="属性に対応する内容">
メタ要素の中身を日本語で解釈すると、「このページの"属性値"は、"属性に対応する内容"です」と表現できます。"属性値"は目的に応じた適切な値を設定します。"属性に対応する内容"は、対応した内容を各自で設定してください。
メタ要素の属性値を変更することで、検索エンジンに様々な情報の伝達が可能です。たとえば、属性値に「keywords」の指定を行った場合、キーワード情報の伝達を行えます。
<meta name="keywords" content="猫,ペット,飼い方">
→このWebページのキーワードは、「猫」「ペット」「飼い方」となる
上記のように、属性に対応する内容が複数存在する場合は、言葉の間にカンマを入れます。上記では、「猫」「ペット」「飼い方」の全てをキーワードとして、情報伝達を行うことが可能です。
2.SEOに影響を与えるメタ要素
メタ要素を正しく設定することは、「間接的なSEO対策として有効である」と言われています。タイトルやページの概要といった情報の伝達を行うことでユーザビリティが向上し、検索エンジンの評価アップにつながることがあるためです。
ただし、メタ要素に多数のキーワードを詰め込むSEO対策は現在、検索順位を上げることには貢献しません。Googleは公式に、メタ要素のkeywords属性を検索順位の決定に考慮しない
と明言しています。
参考：Google Webmaster Central Blog「Google does not use the keywords meta tag in web ranking」
それでは、SEO対策としてメタ要素の記載方法を見直す際には、どのような着眼点を持てば良いのでしょうか。
ここでは、SEO対策として活用できるメタ要素の種類と書き方について解説します。
2-1.description
descriptionは、検索ユーザーや検索エンジンに対して、ページの概要を伝えるための記述です。HTMLファイルには、以下のような記載を行います。
記述例
<meta name="description" content="この部分には、120文字程度でページ概要の文章を記載する">descriptionで指定した内容は検索結果に表示され、クリックを促す役割を担います。「誰に向けたページであるか」「どのような情報を獲得できるか」といったことが分かるように、記載内容を工夫しましょう。
2-2.robots
robotsは、検索エンジンに対する情報伝達を行う際に使用する属性値です。404エラーページなど検索エンジンにインデックスさせたくないページに、noindexと指定します。検索エンジンにインデックスさせたい場合は、robotsの記載は不要です。
記述例
<meta name="robots" content="noindex,nofollow">noindexは、「インデックス登録を希望しない」といった情報の伝達を行います。nofollowは、「ページ内のリンク先をたどることは止めてほしい」といった情報の伝達を行うための記載です。
2-3.charset
charsetは、ページの文字エンコーディングの指定を行い、文字列の誤表示を防ぐための属性です。charset属性の属性値に「UTF-8」や「Shift_JIS」と指定することで、文字コードを伝達できます。
記述例
<meta charset="UTF-8">charsetは、他のメタ要素とは異なり、name属性などを使用せず、上記のように記載します。
charsetの記載を行わないと、「UTF-8記載のHTML文書がShift_JISで解釈される」といったことが生じ、文字化けを起こす可能性があります。検索ユーザーにとって有益なページコンテンツを正しく表示させるために、文字コードの指定を忘れずに行いましょう。
2-4.viewport
viewportは、スマホやタブレット端末の画面幅に応じた表示を行うための属性です。漫画や小説、ニュースなど、モバイル端末で閲覧されることが多いコンテンツを扱うサイトは、特にviewportの設定を忘れずに行いましょう。
記述例
<meta name="viewport"content="width=device-width,initial-scale=1">レスポンシブWebデザインを採用しているサイトでは、viewportの設定が不可欠です。スマホやタブレット端末における表示崩れを防ぐために、適切な設定を行ってください。
2-5.OGP
OGPは、SNSへシェアを受けた際のページタイトルやページ概要、サムネイルなどの指定を行うものです。HTMLファイルの記載は、以下のように行います。
記述例
<meta property="og:title" content="タイトル">
<meta property="og:description" content="ページの概要">
<meta property="og:image" content="サムネイル画像のURL">OGPの設定を忘れると、SNS経由で集客のチャンスを逃してしまう恐れがあります。SNS経由での集客を図るために、忘れずに設定を行いましょう。
3.SEOにおいて重要な働きを持つtitle要素
title（タイトルタグ）は、メタ要素と同様にSEO上の重要度が高く、適切な記載を行う必要がある要素です。メタ要素と同様の場所に記載するため、併せて見直しを進めると良いでしょう。
titleで指定する内容は、検索結果に表示される32文字程度の文字列です。以下のような形式で記載し、検索ユーザーのクリック率を高める働きを担います。
記述例
<title>サイトのタイトル</title>タイトルはページの題名に該当するため、ページごとに異なる設定を行うことが基本です。キーワードを過剰に詰め込むことは避け、ページの概要を端的に示す内容を記載しましょう。
4.メタ要素を設定する際の注意点
最後に、メタ要素の設定を行う際の注意点を解説します。
①正しい場所に記載する
全てのメタ要素は、head要素の子要素として扱います。HTMLファイルの<head>から</head>の間に記載して、検索エンジンやユーザーに適切な情報を提供しましょう。
②目的に応じた正しい設定を行う
メタ要素の設定を行う目的は、ユーザビリティの向上を図ることです。本来の目的から外れた不自然な設定を行うことは避けてください。
③各ページに最適なdescriptionの設定を行う
descriptionの内容は、各ページの要約文です。全く同じ内容のページ要約文を複数設定することは避けて、ページごとに適切な内容を記載しましょう。
④SEOスパムと判断される記載は控える
descriptionやkeywordsに過剰なキーワードを詰め込む行為は、スパムと判断される場合があります。不正を疑われる行為は控えて、適切な対策を行うことがSEOでは大切です。
まとめ
メタ要素は、Webページの設定情報や関連情報を検索エンジンやブラウザに伝達するためのものです。メタ要素やtitle要素を適切に使用することで、検索順位やクリック率の改善を図ることができ、ホームページの集客力を高められます。
どれほど魅力的なサイトを作成しても、集客力を持っていなければ、収益拡大を図ることは困難です。メタ要素やtitle要素の適切な記載を行うことで、検索エンジン経由の集客力を高めて、サイトを通じた収益拡大を実現しましょう。
