meta要素はブラウザには表示されない内部情報を掲載または指定するものです。
特に検索エンジンやソーシャルメディアに特定の情報を伝えたり、コンテンツの仕組みをブラウザに伝えるために利用します。
- meta要素
- title要素
- link要素
- style要素
- メタタグ使用時の全体像
metaタグ
カテゴリ | 基本構造 |
---|---|
タグ | <meta> |
機能 | キーワードや検索エンジン対策に記述します。<head>内に使う。 |
属性 | content name charset http-equiv itemprop |
使用例 |
---|
<meta http-equiv="" content=""> <meta name="" content=""> |
metaタグの説明
HTML文書に何が記述してあるかを、サーバやブラウザ・クローラー等が参照するための情報です。
1.charset
ホームページがどのようなエンコーディングを採用しているかを宣言します。通常は文字コードをutf-8に指定します。もしくはShift_JISですが特別な事情がない限りUTF-8を指定しておけばいいでしょう。
2.http-equiv
3.name
nameはcontentと紐付いています。
SEO
description
contentにホームページの説明文を100文字程度で書きます。検索エンジンの詳細説明文として表示されます。入れなかった場合はGoogleが自動的に表示します。
keywords
contentにホームページのキーワードを入れます。そのページのターゲットキーワードを入れることができます。複数ある場合は半角英数字カンマ(,)区切ります。SEO的にはほとんど効果はないため現在は入れないほうがいいという意見もあります。入れる場合は1〜2つ程度が最適だといわれています。
robots
robotsはgoogleの検索エンジン(クローラーというロボット)に対して情報を伝えます。クローラーはホームページのリンクを辿って情報を収集し、検索エンジンに表示する順位を算出します。
index | クローラーに対して検索エンジンへの登録を許可します |
noindex | クローラーに対して検索エンジンへの登録を拒否します |
follow | クローラーが巡回するのを許可します |
nofollow | クローラーが巡回するのを拒否します |
noarchive | クローラーに対して検索エンジンのキャッシュを拒否します |
SEO対策がよくわからない方はのこちらの記事をご覧ください。初心者向けに簡単な注意点なども掲載しています。
SEOって何ですか?初心者でも解るSEOの基本!
レスポンシブWEBデザイン
スマートフォンに対応するための仕様です。viewportを設定することでスタイルシートに記述したmax-widthやmin-widthなどが反映されるようになります。これらの指定をすることで画面幅に応じてデザインが変化するレスポンシブWEBデザインに対応することができるようになります。
HTML4の場合
HTML5の場合は必要ありません。
文字コードを指定します
スタイルシート言語を指定します
スクリプト言語(JavaScript)を指定します
title要素
titleは、読んで字のごとくホームページのトップページと各ページのタイトルを指定するタグです。
効果的な指定方法として、トップページにはキャッチコピーを記載し、各ページにはそのページのタイトルを記載するといいでしょう。使用方法は下記をご覧ください。
カテゴリ | 基本構造 |
---|---|
タグ | <title> |
機能 | ページのタイトルを表示します。(head内に記述) |
使用例 |
---|
<title> ~ </title> |
titleタグの説明
head要素内(<head> </head>)に書きます。
ブラウザでホームページを開いた場合上部のタブ部分に表示されます。また、検索エンジンやソーシャルメディアで表示されるタイトルにもtitleタグに指定したものが表示されます。
タイトルは検索エンジンで表示される部分になりますので、自分のホームページを見てもらいたい人のことを考えて、検索されやすいキーワードを含めて決めることがSEO対策として大切です。
↓このように付けよう!
- トップページ
「サイトを表す内容を書く(キャッチコピーなど) | サイト名」 - 各ページ
「ページのタイトル名 | サイト名」
もしくは「ページ名のみ」
※ 『 | 』 ではなく、『 – 』(ハイホン)でもかまいません。前後に半角スペースを書きます。
検索エンジンでの表示例
検索エンジンで表示された例です。
ブラウザでの表示例
ブラウザのタブの部分にサイトに設定したタイトルが表示されます。
このようにサイト名をタイトルの後ろに指定すれば、気に入ってくれた訪問者がお気に入りに登録してくれてもどこのサイトの何のページかわかりやすくなります。訪問者の使い勝手に配慮した対策が重要です。
※ブログがメインのサイトなどの場合、タイトルが非常に長い場合もあります。その際の各ページのタイトルはサイト名を記載しないでページのタイトル名だけにするのも良い方法です。
link要素
HTMLと外部のスタイルシートや画像などのファイルを関連付けるタグです。
スタイルシートを読み込むための記述例。下の例は相対パスですが、絶対パスで記述することもできます。
style要素
styleシートをHTMLに反映させるためのタグ。link要素の場合とは違いHTML内に直接記述します。
styleタグをhead内に書きます。
メタデータ使用時の全体像
headタグ内に記載することで、ホームページのタイトルとして反映されます。
タイトル | サイト名