あそびラボ

お問い合わせ

MENU

あそびラボ

お気軽にご相談ください

  • 03-6905-8103
  • 受付時間:平日10:00-18:00

ご相談・お問い合わせ

講座4 HTMLの全体構造2(meta要素)

WEB講座

ふくろう先生
ふくろう先生

前回の続きで今回も要素の話じゃ。

パンちゃん
パンちゃん

今回はmeta要素のお話ですね?

ふくろう先生
ふくろう先生

さすがじゃパンちゃん。よく覚えていたね。
meta要素の話は重要なので、しっかり理解するように。

meta要素について

ページの情報を定義する要素のことをmeta要素と言います。

meta要素は<meta>タグを使い、

・Webページの概要
・文字コード
・descriptionやkeyword

などを検索エンジンやブラウザに認識させるための重要な要素です。

メタ要素の属性について

要素や属性と言うと難しく感じますが、実際に書いてみると思っているより簡単です!

<meta 属性=”属性値”>

meta要素の属性には

charset(キャラクターセット)・・・文字コードを指定します。
content・・・name、http-equiv属性に必ず併記する属性。
name・・・要素に名前を付与することでメタデータの種類を示します。
http-equiv・・・優先cssの指定や自動更新、リダイレクト指定等。

などがあります。

charsetの設定(文字コードの指定)

文字コードを指定する場合は、charsetを使い下記のように書きます。

<meta charset=”utf-8″>

name属性の使い方

name属性は、下記のように理解すると使い方がわかります。

name=”情報の種類”
content=”情報”

この情報の種類は、descriptionですよと言いたい時は、
meta name=”description”と記述し、
descriptionの情報は、contentの中に下記のように書きます。
content=”ディスクリプションとして設定したい内容

↓こんな感じです。
<meta name=”description” content=文書の概要(検索結果に表示される説明文)>

Webページの概要をcontent属性値に記述することで、検索エンジンに内容を
認識してもらうことが出来る重要な属性です。

■meta要素の基本的な使用例

<head>
・・・
<meta name=”descriptioncontent=”これは、あそびラボを紹介するホームページです”>
・・・
</head>

その他のname属性の使い方例

■スマートフォン用に表示方法を指定する。

<meta name=”viewportcontent=”width=750“>

※widthは、幅の設定のことです。

■ページに対するクローラーのアクセスを制御する。

<meta name=”robotscontent=”noindex“>

上記設定をすると、そのページは検索エンジンにインデックス(登録)されません。

他にもkeywordやauthorなどの属性がありますが、最近はkeyword等はあまり使わないかも・・・

パンちゃん
パンちゃん

ふわわわ~> <
今回は難しかった~。

ふくろう先生
ふくろう先生

実際にホームページを作る時に書いてみた方が、
すんなり理解できると思うぞよ。
http-equivはちょっと難しいので、
へっぽこ講座じゃない他のサイトで調べてね^^;

パンちゃん
パンちゃん

はい。(へっぽこ講座でよかった・・・)
簡単なところから少しずつ教えてください~。

へっぽこ Web講座一覧へ

池袋・練馬近郊でホームページ制作の
ご相談をされたい方はこちら ▶