HTMLのmetaデータのおさらい

Publish2011/06/09(木)

Update2016/01/02(土)

HTMLのmetaデータのおさらい

今日はHTMLのmeta属性について説明します。

まずHTMLのmetaというのは、ブラウザで見た際には見えない項目です。
そのため、デザイン上は必要ないと考えてしまいがちですが、HTMLとしてはなくてはならないものです。
その理由がmetaは「HTML文書の各項目を定義する為のもの」であるからです。
例えば一番重要といわれている「title」だと「ページの名前」を設定する事になるんですが、このページのタイトルの設定によってSEOにも影響があるといわれています。(SEOについてはまた別の機会で…。)

要はページについてしっかりとmetaデータを設定してあげると、設定していないときに比べて検索エンジンにも(検索結果にも)人にも優しいページになりますよというお話です。
基本的な部分を中心に何個かmetaデータの種類を紹介しようと思います。

metaデータの種類

1.文字コード

<meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />

そのHTML文書がどの文字コードで記述されているのかを定義する為のmetaデータです。
ブラウザがまず文字コードをここで判別し、不適格な文字が含まれると文字化けしちゃいます。
なので文字コードを意識する事はすごく大事です。
日本語サイトは一般的にShift-JISの場合が多いですが、プログラムとかと連動させる場合けっこう動かなくなる事がありまして僕は個人的にあまり好きではありません。なので僕の場合、基本的には世界標準のUTF-8で最初から制作するようにしています。

2.タイトル

<title>ふにろぐ</title>

種類でいうとmetaではないという意見もあると思いますが、定義付けるという事でここではあえてmetaとして取り扱います。
例でも出したようにHTML文書の名前を設定する項目です。
SEO的にもかなり重要な要素ですが、意外と知られていないのがブラウザでブックマークする際にもtitleの文字列が引用されます。
ブックマークしてもらう際にも分かりやすいように名前を設定してあげるというのも制作者側の優しさかもしれないです。
もちろんtitleはきちんとその文書で取り扱われている内容を記述してあげる必要がありますので、関係のないキーワードは除外するようにしておいたほうが安全です。(関係ないキーワードを詰め込むとSEO的にもいい効果が望めません)

3.ページの説明

<meta name="description" content="フニスのブログ「ふにろぐ」です。" />

descriptionはそのHTML文書に対する説明文です。titleと違ってその文書で取り扱っている内容を説明が季で記述する事が出来ます。
この内容が検索結果に反映される場合がありますので「人が見て分かりやすい」内容を記述してあげましょう。
よくあるのがサイト内の全てのdescriptionが同一のものである場合ですが、これだと全てのページが同じ内容ですよといっているようなものなのでよくありません。手抜きはよくないっていう事ですね。
なので理想としては全てのページのdescriptionは全て異なり正確にそのページを説明している文章に設定してあげるというのが理想です。
あくまで僕の理想ですが。

4.キーワード

<meta name="keywords" content="ふにろぐ,ふにす" />

一昔も二昔も前のSEOではかなり重要項目だったkeywordsですが、今は全くといっていいほど意味がないと考えて問題ありません。
下手に設定するよりもしない方がいいので、あえて設定する時以外は消してしまった方がいいです。

5.CSSとJSの読み込み

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

<meta http-equiv="Content-Script-Type" content="text/javascript" />

HTML文書のスタイルを定義するcssとHTMLに動的なアクションを設定できるJavascriptを設定する項目です。
文書に埋め込む事も出来ますがそれぞれ役割が異なるのできちんと外部ファイルとして設定してあげてHTML文書に埋め込むようにしましょう。

6.制作者情報

<meta name="author" content="ふにす" />

authorはその文書を作成したのが誰であるのかを記述する項目です。
あんまり重要視される事がない項目ですが、自分が作ったので責任を持って公開するという姿勢が好きなので気が向いたら入れるようにしています(笑)

7.URLの指定

<link rel="canonical" href="http://funnis.net/blog/">

同じページでも
http://funnis.net/blog/
http://funnis.net/blog/index.html
http://funnis.net/blog/index.php
http://funnis.net/blog/index.shtml

というに、アクセスしたら同じ結果が得られるページでも重複する事があります。
その場合、検索エンジンがどっちを優先するのかという問題になりますが、判断するのは検索エンジン次第なので出来れば「canonical」を設定します。
ただし、使用には注意が必要です。
というのも、誤った情報を設定してしまうと設定したページが検索結果に反映されなくなるということが起こります。

8.ファビコン

<link rel="Shortcut Icon" href="http://funnis.net/blog/favicon.ico" />

サイトを印象付けやすくするファビコンはなくても別にいいんですけど、あったらブランディング的な意味でけっこういい働きするので出来れば作った方がいいと思います。
ファビコン作成サイトとかで簡単に作ることができるので、生成されたファイルをアップロードしてURLを指定してあげましょう。
ファビコンはmetaで指定しなくてもブラウザによっては勝手に認識する事もありますが、指定してあげた方が親切です。

9.検索エンジンへの設定

<meta name="robots" content="noindex" />
<meta name="robots" content="nofollow" />
<meta name="robots" content="noindex,nofollow" />

検索エンジンにサイトをインデックスして欲しくない場合とかに設定する項目です。
インデックスされないようにすると検索結果に反映されないので検索されたくないものがある場合は設定しましょう。
ちなみにnofollowというのもありまして、そのページからリンクされているページに検索エンジンを誘導させたくない場合に使用します。
ページを検索エンジンから完全に除外したい場合は両方を設定するといいと思います。

10.OGP

<meta property="og:title" content="ふにすquot; />
<meta property="og:type" content="company" />
<meta property="og:url" content="http://funnis.net/" />
<meta property="og:image"content="画像のURL" />
<meta property="og:site_name" content="ふにす" />
<meta property="fb:app_id" content="186890908026737" />

最後はFacebookでシェアされた際などに最適化させるためのmetaデータであるOGPです。
OGPを設定するとFacebookにシェアやいいねされた情報をきれいな形で表示する事が出来るようになります。
詳しくは以下の2つのブログを読むとたいてい分かります。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か
Facebookのウォールでちょっとアピールする方法(OGP)
ソーシャルで露出する際の情報設計も重要なので、OGPも設定するようにしましょう。

まとめ

以上の10個は理解しておいたほうがいいものです。
もちろん必須という事ではありませんが、知っておく必要はあります。
使用するかどうかはサイトの運営方針にもよるので、その辺はご自身で判断して適切にmetaを定義して、人にも検索エンジンにも優しいHTMLにしておく方が好ましいと思います。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、Web運用サポート、Webサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期更新中です。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
サイトの運用や活用にお困りの方、Web運用やブログ更新などの講演のご依頼など、お気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

関連記事

  • 検索キーワードの種類とそれを意識したストーリーを考えよう検索キーワードの種類とそれを意識したストーリーを考えよう サイトを見てもらうための方法のひとつとして、Googleの検索からサイトへのアクセスを獲得する方法があります。 一般的にSEOと呼ばれるものですが、今回はSEOのテクニックではなくて、ユーザーから見た場合のサイトへの到達理由とその意味を考えてみたいと思います。 キーワード検索の種類 まず、検索サイトでは特定のキーワードを入力する事でユーザーが情報を検索できるわけ […]
  • これからECをはじめる方向け。ECサービスの比較と特徴など調査【2015年6月版】これからECをはじめる方向け。ECサービスの比較と特徴など調査【2015年6月版】 今日は先日お客さんにECサイトをはじめたいという質問があったので、今後の事もかねて手軽にはじめる事が出来るサービスを比較してまとめてみました。 今回比較するサービスはSTORES.jp、BASE、Yahooショッピング、カラーミーショップ、Makeshop、ショップサーブの6つ。 ECのサービスというか一般的にはASPといわれる部類のものですが、これからはじめる人がASP […]
  • StyleGuideを活用しようStyleGuideを活用しよう 今回はサイト運用をよりクオリティの高い状態で維持させつつ、作業効率の向上も行える可能性をもつ「StyleGuide」について説明します。 StyleGuideとは StyleGuideを使用するメリット StyleGuideをテストに使用する StyleGuideを作るの便利なStyle Guide […]
  • 検索エンジンへのモバイル対策と考え方、チェックツール検索エンジンへのモバイル対策と考え方、チェックツール 先日Googleのオフィシャルブログより、検索結果に関する重大と思える発表がありました。 それがこちらです。 Finding more mobile-friendly search […]
  • 検索順位を確認するときはChromeのシークレットモードを使う検索順位を確認するときはChromeのシークレットモードを使う サイトを運営していて、検索からの流入が気になる人は多いと思います。 流入が気になるという事は、設定したメインのキーワードの順位も気になるはずですよね。 そこで色々なツールで順位を確認するかと思いますが、自身で目視で確認したいという人はGoogleChromeのシークレットモードを使って検索しましょう。 シークレットモードって何? GoogleChromeを使っ […]
  • サイトを公開する前後にチェックすることリストサイトを公開する前後にチェックすることリスト 今日はサイトの公開前後に確認する事をまとめる事にします。 作ってチェックしたけど、実は漏れてたってことがないようにしたいし、しないといけないですよね。 では目次。 GoogleAnalytics FacebookのOGP Twiitercard Google+のrel="author" ページタイトル description Webマスターツールへの […]

よく見られている記事

ふにろぐナビ

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ソーシャルとか。

NewEntry

はてブで人気の記事

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month