雪ん子パースペクティヴ

読むとちょっとタメになるエントリー。コメントあると嬉しいです。

HTMLのmetaタグについてまとめた。

html

こんにちは。

"オウンド（owned）"が流行っている昨今、ご自身でSNSはもちろんのこと、Webサイトやブログを管理・運営している方も多いと思います。

※僕はブログだけ。

 

その中で、「どうせやるのなら、少しでも多くの波及効果を持たせたい」と考える人もいることでしょう。言い換えれば、「たくさんの人に見てもらい、自分の情報を広めてほしい（情報源は私で）」ということですね。

 

そうなると、人は躍起になってWebサイトやブログの構成を見直す。HTMLだと知る。<body></body>の中でコンテンツを組み立ててればいいのだと分かる。自分なりに納得できる形に仕上げる。

が、一向に増えない訪問者数。

根を上げる段階は随所にあります。

敢えて見逃す段階や箇所もあることと思います。

 

そこで今回は、HTMLの中でも、「書いても書かなくても変わらなくない？」と思われているmetaタグを取り扱いたいと思います。

※metaタグはSEO対策に用いられる一つの手段ですが、この記事の内容はSEO対策ではありません。

 

さて、今回参考にするのは、2つのサイト。

HTML5.JP　と　WHATWG　です（前者は日本語、後者は英語）。

 

metaタグに関するページは次をクリック。

HTML5.JP　→　meta 要素

WHATWG　→　4.2.5 The meta element

 

それでは、僕なりのまとめを以下に書いていきます。

<meta name="メタデータ" content="要素の値">
<meta http-equiv="プラグマ指示子" content="要素の値">
<meta charset="文字エンコーディング宣言">

 ※「要素の値」はメタデータ・プラグマ指示子の具体的な中身だと考えてください。

 

○メタデータ

・application-name：ページ内のウェブアプリケーションの名前、titleタグに優先
・author：ページ作者
・description：ページの説明、検索エンジンで利用
・generator：ページの作成に使用したソフトウェアの名前（ex. Frontweaver）
・keywords：ページに関連するキーワード、複数ある場合はカンマ区切り

例えば、

<meta name="author" content="yuki">

 といった感じ。

これは、「このページの著者はyuki」と説明している。

 

面白いのは、メタデータはWHATWG Wiki MetaExtensionsで新しく登録可能なこと。

例をあげれば以下。

・apple-itunes-app：itunesのアプリを宣伝するページに使用

・bitcoin ：ビットコインのアドレス

 

色々とあるので、興味のある方はぜひご覧あれ。

ちなみに、登録するには条件があります。

 

 

○プラグマ指示子

・content-language：コンテント言語（ページのデフォルト言語をセット）
・content-type：エンコーディング宣言（charset 属性のセッティングの代替の形式）
・default-style：デフォルトスタイル（デフォルトの代替スタイルシートセットの名前をセット）
・refresh：リフレッシュ（時限リダイレクト）
・set-cookie：クッキーセッター（HTTP クッキーをセット）
・x-ua-compatible：Internet Explorer用、contentは"IE=edge

例えば、

<meta http-equiv="refresh" content="30">

 といった感じ。

 これは、「このページは30秒ごとに更新される」と説明している。

 

 そしてまた面白いことに、このプラグマ指示子もWHATWG Wiki PragmaExtensionsで登録可能です。

例えば、以下。

・PICS-Label：青少年にとって有害なコンテンツかどうかを説明する。

 

こちらはメタデータと違い、種類はまだ少ないですが、一覧しておいて損はないと思います（上記の例は、Webサイト閲覧の日常化に伴う運動から生まれたと推測）。

ちなみに、こちらも登録の際には条件があります。

 

 

○文字エンコーディング宣言

文字エンコーディングについては、ご自分でお調べください。

 要は、「どの文字コードを用いてページを表現させるか」を記述します。

HTMLでページ自作の経験がある方は、ここで一度、引っ掛かったことと思います。

まぁ、大体はUTF-8ですね。よって、以下。

<meta charset="UTF-8">

 

という具合です。僕は他に、EUC-JPで試したこともありました。

※自作HTMLでは、保存時の画面で文字エンコードも変更することを忘れずに！

 

さて、一通り見てきたわけですが、お役に立てれば幸いです。

W3Cから学ぶのもありかと思いますよ。

W3Cのサイトからナビゲーション[Learn]へ行った先がこちら。

 

最後に、HTMLだけでなく、Webクリエイティング全般にかかる作業で、お勧めなのが次のサイト。

w3schools.com

リンク先に行けば、HTML、CSS、javascriptのデモができる上に、それらの学習に加え、SQL、PHP、jQueryまで学ぶことが可能です。

本を買って勉強しても良いけど、こんなひとまとめになったサイトで勉強するのってなんだかお得だよね（全て英語）。 

 

個人的に、リンク先のものを用いた仕事の経験はありませんが、プライベートで必要な時に少しずつ勉強していたこともあり、なじみ深い。

なので、それらの理解度をもう少し深める道もありかな、と思いました。

 

 

以上。

 

 

 

 

 

Googleアドセンス