ホームページのメタタグの作り方

「メタ」というのは、ひとつ上の次元というニュアンスになりますが、本文が表示される<body>タグよりも前の部分に記述されているものです。サイトの概要とか、あるいは検索エンジン向けの情報などが記述される部分になります。

このメタタグにはいくつかの種類が存在しますが、代表的なものとして、ページ説明の「description」やページキーワードの「keywords」があります。

そのほかにも制作者情報の「author」や作成ツール情報の「generator」、レスポンシブウェブデザインの「viewport」、あるいはリダイレクト設定の「refresh」などもありますが、重要なメタタグは「description」程度です。

記述されている箇所は、htmlソースを表示してみて、<meta name= で記述されている箇所がメタタグになります。

ほか、文字コードやスクリプト情報のmetaタグなどもありますが、ここではSEO対策をする上で若干関連のある「description」と「keywords」のメタタグについてご紹介いたします。

<meta name="description" の作り方

ページ説明の「description」のメタタグの作り方としては、まずは<head>タグ内に記入する必要があります。記述する位置は、title タグの直前に設置している人も多いですが、どちらかというと直後に設置する方が自然かと思います。

<meta name="description" content="ページの説明文" />

説明文の長さはホームページによってまちまちです。たとえば、W3Cの場合は数百文字の長文となっていますが、サイトによっては一言程度のかんたんなものもあります。

この説明文は検索結果に表示されたときに、そのページを説明するものとして表示されることになります。

あまりに短いとこのメタタグの部分が無視され、本文中から適当に拾って表示されることもありますので、適切な文字数で書いておくとよいでしょう。検索者にとって誤解のないよう、そのページ内容を的確に説明するものであれば、短めでもかまわないかと思います。

上の例でいえば、例えば、検索者がメタタグの作り方ではなく、メタタグのSEO効果についての情報を探しているのだとすれば、説明分の箇所に「SEO効果」などの文字が含まれているとクリックされやすくなるはずです。

検索者が何を探しているのかについて想定しつつ、探しているものが検索結果で見つかりやすくなるよう、ページ内容の具体的な記述を簡単に書いておくとよいでしょう。

<meta name="keywords" の作り方

次にメタタグ keywords の作り方についてですが、これも<head>タグ内に記入する必要があります。

<meta name="keywords" content="キーワード①,キーワード②,キーワード③" />

そのページのキーワードを大切なものから3つ~5つぐらいを記述しておくといいと思います。あまり詰め込みすぎてもよくないので、重要なものから3つぐらいまでを記入しておきましょう。

例えば、このページでいいますと、「メタタグ」、「作り方」、「description」、「keywords」などになるかと思います。

キーワードの区切りは「英数半角のカンマ」で記入していきます。

このキーワードのメタタグについては、100%検索エンジン向けの情報になりますので、記述しても検索結果やサイト上に反映されるわけではないです。

また、検索エンジン側でも、現在ではあまり重要視されてはいませんが、記述しておくのに越したことはありません。

ただ、面倒な場合は「description」のメタタグのみ記述して、キーワードのメタタグは省略してもよいかと思います。

無料ブログの場合はこれらのメタタグを個別に記述することができませんが、ホームページで作成している場合はそれぞれのページで個別に記述できる点がアドバンテージになりますので、ページごとに設置しておくのがよいでしょう。

その他のメタタグもいろいろありますが、作成ツールや運営者情報のメタタグなどはそれほど意味がないです。あまりごちゃごちゃmetaタグを記載せず、headタグ内をすっきりとした状態に保っておくとよいでしょう。

追記:viewport のメタタグについて

最近はスマートフォンの普及により、スマホやタブレット端末に対応する必要性が高くなってきております。検索エンジン側でも、スマホ対応しているサイトを上位表示させると公表してますので、アクセスアップに必須の要素となってきております。

その際、viewport のメタタグも使用する必要がありますので、最近はこちらも使用頻度が高いメタタグになってきています。

<meta name="viewport" content="width=device-width" />

詳細はレスポンシブサイトの作り方のページをご参照ください。

SEO対策でアクセスアップへ戻る