[45-3] <meta name=" " content=" ">でサイトの情報を書こう

今回は、<meta>要素の「name属性」を使って、サイトの色々な情報を指定しましょう。
必ず<meta name="種類の名称" content="内容">というカタチで使います。

使用する要素 <meta>
使用する属性 name属性 content属性

「name属性」は必ず「content属性」とペアで使うんです。
「name属性」で HTML文書の情報の種類(の名前)を指定し、その内容は「content属性」で指定するというわけです。
そしてこれは、<head>内に書きますよ。
( <meta>要素の全体像は、[45-1] metaで基本情報を指定しよう でご覧ください。)

では、name属性で指定しよう

name="description"

サイトの簡単な紹介文を指定します。グーグルなどの検索エンジンの、検索結果で表示される文章なので大事です。サイトの内容や雰囲気を伝えるために、ちゃんと書いておきましょう!
「見てみようかな」と思ってもらえそうな文章でね(下のサンプルはイマイチですけど…)

<head>
<meta name="description" content="HTMLの編集ができるようになる!はず">
</head>

name="author"

HTML文書の著作権情報を書いときます。個人の場合は自分の名前(orハンドルネーム)などを。
企業・団体・サービスなどの場合は、その名称を書くのが一般的だと思います。

<head>
<meta name="description" content="HTMLの編集ができるようになる!はず">
<meta name="author" content="yuki★hata">
</head>

name="keywords"

検索エンジン向けのキーワードを指定します。
ただ…これは、かつて乱用されちゃったので、今のほとんどの検索エンジンには無視されるそうです。
だから「SEO的には意味無いけど、一応入れとこうかな」って程度のものかなぁ今では。
(あんまりいっぱい書くとスパム扱いされて、SEO的には逆効果だそうですよ)
そのウェブページに関連するキーワードを「 ,(カンマ)」で区切って書きます。

<head>
<meta name="description" content="HTMLの編集ができるようになる!はず">
<meta name="author" content="yuki★hata">
<meta name="keywords" content="HTML5, CSS3, ほんっとにはじめてのHTML5">
</head>

検索エンジンのクローラ(検索ロボット)は、この↑「meta name="keywords"」の内容でなく、今はHTMLの本文のコトバを収集しているそうです。特に、メタデータ・コンテンツ<title>に書いた文言、ヘディング・コンテンツ<h1>〜<h6>に書いた文言は、優先的に収集するそうです。そのほかの本文のコトバも、もちろん検索の対象になっています。

ここまでが、普通によく使うもの。ぜひ書いときましょう。
このあと ↓ のは、あんまり使わない気がします。
(私にとっては「知ってて良かったと思う時があるかも?」程度だなあ…今は。)

name="generator"

自動生成に使われたツールやソフトウェア名。これは自分で書くもんじゃないので注意。
ウェブページが自動生成された際に、そのツール自身がウェブページを出力する際にhead要素内に挿入するのだそうです。

<meta name="generator" content="Frontweaver 8.2">

name="application-name"

HTMLがウェブアプリケーション用に作られた場合、そのウェブアプリケーション名を指定します。
「ウェブアプリケーション」って、ブラウザで見れる、ショッピングサイト(e-Commerce)、掲示板(BBS)、ミクシィやフェイスブックなどの交流サイト(SNS)、などのことです。
なので、一般的なウェブサイトを作っているなら、特に書かなくて良いわけです。

<meta name="application-name" content="e-Commerce">
<!--contentは他には BBS, SNS, CMS, e-Learning などを書くんじゃないかな?すみません適当で-->

次回予告

name="description" が1番大事だと思います。
検索で調べものをしてる時って、紹介文を読んで「あ、このサイトで分かるかも」「これ当たりかも」って感じたものを優先に見ますよね?

さて次回は<meta>要素の「hht-equiv属性」を使ってみましょう。
これは、HTML文書の「動作や状態」について指定する属性です。
優先のスタイルシートを指定したり、ページの再読み込みをさせたり、他のURLにジャンプさせたりできます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.