webサイトを作る時の要素の使い方 3巻 meta要素

NO IMAGE

htmlってそんなに掘り下げなくてもホームページ作成って意外と出来ちゃいますよね。
でも、文書を正確に機械に読み取ってもらう為にも、なるべく知識は正しく持っといた方が制作の際に迷わないし、正確な仕事が出来ると思うのです。

という訳で今日は人には見えない部分の一つ、「meta要素」について調べていきたいと思います。

制作者によってマチマチ指定なmeta要素

文字のエンコードやdescriptionなどは、ほぼ必ず指定するものですが、サイト作者名など入れなくてもどうにかなるだろ。みたいな要素もあって、制作者によって違いが出る部分の一つがmeta要素です。

まずはこのあやふやな部分を定義しやすいよう、Googleが公式にサポートしているmeta要素を並べていきましょうか。

meta推奨要素

meta charset

文書を表示する際の言語を指定します。
今だとUTF-8統一で問題なし。
※ちなみに自分の会社は自分が入社する2年前の時点でshift_JIS使って制作してたので、すぐ切り替えしてもらいました。

meta description

これは結構重要。検索表示の説明文もここの文章が表示されます。
キーワードを含みつつ、サイトの説明を50字程度でまとめるのが理想。

title

技術的にはmeta要素ではありませんが、意味的にmetaに近いので表記されています。
検索結果のタイトル表示に使用されます。

meta robots

ページを検索から除外する時に使うのがほとんどじゃ無いでしょうか。
意図的に除外範囲を絞りたい場合を除けば、以下のように指定します。


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

noindex
サイトのインデックスを防ぐ
nofollow
ロボットの巡回を防ぐ

meta refresh

http-equivで指定するリダイレクト用のmetaタグです。ただW3Cでは非推奨なので、使うことは基本ないかも。
リダイレクトしたい場合は301リダイレクト(サーバー側でこちょこちょやるやつ)で対処しましょう。

Googleブラウザのみで使用可能なタグ

他にもGoogle用に用意されたタグもいくつかあります。サーチコンソールのヘルプから確認できますので、気になる方は以下からのぞいてみて下さい。

Google がサポートしているメタタグ

meta非推奨要素

さて、次はGoogleサポートの対象になっていないmetaタグです。サポート対象でないからといって指定しなくていい。というものではないのでご了承を。

meta viewport

もう今のサイト制作は必須でしょう。モバイル表示用に指定するタグです。
書き方はほぼ固定されているので、気をもむ必要もなしですね。

meta X-UA-compatible

これもviewportとセットで書かれる推奨項目です。http-equivで指定するIE用のサポートタグで、とにかくIE最新互換バージョンで表示してよ!って問いかける要素となっております。

meta keyword

昔ほど重要視されなくなったkeyword要素。サイトを端的に表すキーワードを5つ程度並べている所が多いですね。
Googleさんから言わせると、もう指定の必要ないでしょ。ってぐらいの扱いみたいです。
指定の仕方も間違えるとペナルティ対象になるし、もう付けなくてもいいのでは。

meta author

サイトを作成した人や会社の名前を指定。指定してるサイトはあまり見ないですね。
linkで指定する方が望ましいという意見もあるみたいです。

meta format-detetion

スマホ表示した時に勝手に電話番号テキストがリンクになってたりする時ありますよね?
ああいったおせっかいを消したい時に活用します。content=”telephone=no”と指定すると電話番号の勝手にリンク変化を防止します。

この他にアプリケーションの名前を指定するものや、サイト制作ツールを使った時に自動生成されるものがありますが、サイト制作で指定するものではありませんので割愛します。
また、サイトの内容を端的に表すものや位置情報のgeoタグなど、あげれば結構あるので、気になる人はいろいろと調べてみて下さい。

MDN meta要素

SNS関連のmeta要素

※追記しました。
FacebookやTwitterの概要を指定するのも、meta要素で実現できます。
結構書くことあります、、、

ざっくり言うと、連携するSNSのIDやdescription、シェアしてもらった時の画像指定などが可能です。

Twitter


<meta name="twitter:card" content="sammary ※カード表示種類">
<meta name="twitter:site" content="@userID ユーザーID">
<meta name="twitter:description" content="ページの説明">
<meta name="twitter:image:src" content="投稿時の画像">

Facebook


<meta property="og:site_name" content="サイト名">
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="ページのURL">
<meta property="og:description" content="ページの説明">
<meta property="fb:app_id" content="アプリID ※facebookID">
<meta property="og:image" content="シェアされた時のサムネイル">
<meta property="og:locale" content="ja_JP 言語指定">

実際サイトに情報設定する時は、url申請が必要なモノもあるので、設定する際に以下リンクを参考してみてください。

Twitter Developer Documentation
facebook for developers

基本的に必要なhead内のmetaタグ記述

以上をふまえてですが、基本必要な記述は以下のような形になるでしょうか。


<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width initial-scale=1">
<meta name="description" content="こいつがサイトの説明文ですわ">

SNSのmetaや、電話のリンク防止・そのほか明示したい要素は、必要な分だけ追加して下さい。

正しく使ってロボットに立ち向かいましょう。

サイトの検索順位に関わる情報を収集する「Google」の巡廻ロボット
このロボットがmeta要素も参考にサイトの中身を確認していくので、必須でなくともmeta要素にサイト情報を明示していくのが望ましいです。

また、Googleの気まぐれ(最適化)に合わせた文書構成にしていく必要があるので、何かGoogleの仕様変更があった場合は、細かく見直ししていきましょう。
(自分も見直し頑張らないといかん)

さて、次回は同じく人から見えない部分。head要素の中身について紐解いていきます。

htmlカテゴリの最新記事