【 HTML 】メタタグ(meta要素)の書き方

WEBサイト作り方

企業サイトやブログを運営する際、コンテンツ内容を充実させるのは勿論ですが、ちょっとしたことにこだわると更にアクセスしてくれるお客さんが増えるかもしれません。
今回はそのちょっとしたこと=SEO対策の一つである、HTMLで記述するMetaタグについてご説明します。
サイトを運営している方で、まだMetaタグを書いてない方は是非お試しください。

メタタグ(meta要素)とは

メタデータを記述した箇所がメタタグ、あるいはmeta要素と呼ばれます。
Webサイトにおけるメタデータとは、そのサイト、そのページに関する情報を定義したものです。
HTMLのソースとして記述するため、実際にサイトを見ても表示されない情報がほとんど。

では表示されない情報をなぜわざわざ設定・記述するのかというと、検索エンジン(GoogleさんやBingさんやniftyさんなど)に向けて「 うちのサイトはこんな感じですのでヨロシクどうぞー! 」と自己紹介 兼 アピールをして、主張の無いサイトよりも有益なサイトであると評価してもらうため。そして更に検索結果の表示の際にサイトの説明文などを表示してもらうため。

検索エンジンの手先となってサイト情報を収集しているロボットスパイダープログラムさんから「 ちょっといい感じのサイトかも? 」と思ってもらえたら、検索結果ページに表示される際に、ちょっぴり表示順位が上がる可能性があります。
どうせならちょっとでも上位に表示されたいよね、ということで、企業サイトさんは基本的に皆さん各種メタタグを設定していると思います。
個人さんのサイトであっても、どうせなら沢山の訪問者さんが来てくれた方が嬉しいと思うので趣味のサイトやブログを持っていて、ご自分で細かな設定が可能な方は改めてメタタグを設定してみてください。

メタタグはhead要素に記述する

メタタグを書く場所はhead要素のmeta領域、つまり<head>から</head>までの間。
こんな感じですね。

タグを追記する箇所
<head>

<meta name=”viewport” content=”width=device-width”>

</head>

viewportでとりあえずスマホ最適化

何はともあれ書いておいていただきたいのがビューポート。
スマホでサイトを見た時の見え方を設定するタグです。

<meta name=”viewport” content=”width=device-width”>
表示領域の幅(width)をデバイス(端末)の幅(device-width)に合わせる設定ですね。
詳細は スマホ最適化【 3 】 ビューポート(viewport)の設定 の記事でご説明していますが、なんだか良く分からない、という方はもうこのまま記述してください。
スマホでサイトを見た時に、そのスマホの画面幅に収まるように表示を自動調整してくれます。

文字化けを防ぐcharset

<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis”>
charset属性によってこのサイトの文字コードは●●です、と宣言することにより異なった文字コードで読み込まれ文字化けが発生するのを防ぎます。
Webブラウザの進歩とともに、文字コードの読み間違いによる文字化けも減ってきたのですが、念のために記述しておくことをオススメします。
メタタグの中でも出来るだけ先頭のほうに記述してください。

日本語のサイトであれば基本的にshift_jisで作成・表示していると思います。
shift_jisの他には EUC-JP や UTF-8 などがあります。
ここで宣言した文字コードに合わせてHTMLファイルを保存する必要があるので、コードを書く時は文字コードを設定できるテキストエディタを使いましょう。

おすすめのテキストエディタはこちら
  ∟ Webサイトを作ろう! 【 2 】必要なソフトを準備する

CSSについての宣言

このサイトで使っているスタイルシートはCSSで書かれていますよ!という宣言。

<meta content=”text/css” http-equiv=”Content-Style-Type”>

それに続いて、読み込むCSSファイルはこのファイルで(index.css)
スマホだろうがiPadだろうがパソコンだろうが変わらずに適用すべし(media=”all”)という主張。

<link rel=”stylesheet” type=”text/css” href=”index.css” media=”all”>

『 index.css 』 の部分はお使いのCSSファイル名に変えてくださいね。
また、全部のメディアでこのCSSを!(media=”all”)という主張以外にもメディアクエリーで色々設定できます。
 icon-hand-o-right スマホ最適化【 4 】 メディアクエリー(Media Queries)の設定
この宣言が無くても最近のブラウザは賢く判断してくれるのですが、念のために記述が推奨されています。

ページタイトルを付ける

ページタイトルを付けることによって、検索結果ページに表示された時にそれが反映されます。

<title>パソコン修理のパソピア 【高松市~全国宅配OK】格安PC修理</title>

表示はこう ↓ なります。
ページタイトル

ページタイトル、キーワード、ディスクリプションはページごとに異なるものを設定しましょう
同じ内容にしてしまうと、検索エンジンが 「類似ページならわざわざ見に行くまでもないか」 と判断してページの評価を下げてしまったり、せっかく更新しても見回りにきてくれないことがあります。
検索結果の表示

キーワードを設定

サイト内容や取扱サービスに関連した語句で、どういった語句を検索した人に来て欲しいかを考えてキーワードを決め、『 ,(半角カンマ)』 で区切って記述します。

<meta name=”keywords” content=”パソコン修理,PC修理,液晶パネル交換,マザーボード修理,HDD交換,SSD交換,DVDドライブ交換,ウイルス駆除”>

最近ではGoogleさんのルールが変わったので、検索エンジンへのアピールとしてキーワード設定はあまり意味が無いとも言われていますが、やってもやらなくてもいいならやっておいた方がいいような気がするので私は記述をおすすめしています。
多すぎても逆効果なので10個以下でやめておきましょう。

descriptionでスニペットを表示

検索結果に自分のサイトが表示された時にサイトタイトルとURLの下に出てくるスニペット(サイトの概要説明)を記述します。

<meta name=”description” content=”【格安パソコン修理¥9,720~(部品代・技術料・消費税込み)データはそのまま、最短即日修理。見積り無料で全国対応可能】液晶割れ、画面が暗い、電源が入らない等。PC故障のことなら何でもパソピア/有限会社エヌシステムにお任せください。”>

表示はこう ↓ なります。
メタディスクリプション
検索結果ページを見ている人がサイトにアクセスしようと思ってくれるような、サイト内容について分かりやすく、魅力ある説明文を考えましょう。
また、検索キーワードと一致する語句は太字表示されるので、できるだけ検索されそうなキーワードを説明文に入れておくと、より目立つことができます。

Googleさんいわく「 160文字まではちゃんと表示するよ 」とのことなのですが、表示の兼ね合いで140文字くらいしか出なかったり、ブラウザによってはもっと少なくて120文字くらいで以下省略になってしまったりします。
「 お任せく…… 」と中途半端に省略されてしまうくらいなら最初から少し短めにしておくのが良かろう、ということで、だいたい全角100文字~130文字くらいで記載しているサイトさんが多いですね。

   
こうしたちょっとしたことの積み重ねと、
あとは充実したコンテンツと訪問してくれる皆さんのお力で検索結果の順位は変わってきます。
でもあまり細かく気にしだすとサイト運営が苦痛で楽しくなくなるかもしれませんし、順位変動は時には結構長いスパン(2週間~3ヶ月)で変わったりするので、ある程度がんばりつつ気楽に続けてみてくださいね。

タイトルとURLをコピーしました