こんなことまで設定できる！頻出メタタグの種類と紹介

メタタグとはHTMLのページに関する情報を、ブラウザや検索エンジンに知らせるためのタグです。
これらはheadタグ内に記述して使用し、ページの表示に関するものやSEOで必要となるタグなど多くの種類が存在します。
記述が必須の情報ではありませんが正しい利用方法を守ることで検索エンジンやSNSツールにて有用な効果を発揮するものもあるので、本記事ではそんなメタタグをざっと紹介しようと思います。

ちなみに、メタタグには大きく分けて2つの属性があり、http-equiv属性とname属性といいますが、どちらも「ブラウザや検索エンジンにページの情報を知らせる」ためのものです。本記事ではメタタグの種類をそれぞれの属性に分類して紹介していこうと思います。

name属性

keywords

keywordsは、ページの内容に関連する単語をピックアップし、カンマ区切りで記述することができるタグです。ページに記述したワードが含まれていないとこのタグは意味がありません。

description

descriptionは、ページの説明文を記述するタグです。検索エンジンのスニペットで使用され、検索エンジンのユーザーに直接読まれることもあるので、SEO的にも重要です。

viewport

viewportは、ページの表示領域の幅などを指定するタグです。レスポンシブサイトでは正しく設定しないと思うような表示にならなくなってしまう項目です。

robots

robotsは、検索エンジンがそのページをどのように扱うかを指定するタグです。ページのインデックスの可不可や、ページのキャッシュ保持の可不可などを設定できます。

author

authorは、記事の作者名を記述するタグです。名前でなく社名やメールアドレスを記述したりもします。

copyright

copyrightは、ページの著作情報を記述するタグです。

date

dateは、ページの作成日や更新日時を記述するタグです。

language

languageは、ページの使用言語を記述するタグです。日本語でも「Japanese」のように英語で記述します。

revisit_after

revisit_afterは、ページを検索エンジンが再度クロールするまでの日数を指定します。実際にクローラがこのタグを考慮してくれるのかは不明です。

rating

ratingは、ページの閲覧対象年齢層を指定するタグです。safe for kids、adultなどがあり、閲覧制限のない場合は、generalを記述します。

classification

classificationは、ページのジャンルを指定するタグです。business,entertainment,personalなどを記述します。

http-equiv属性

Content-Type

Content-Typeは、ページ表示時の文字コードを指定します。例えば文章がUTF-8で書かれている場合は、charsetに「utf-8」と記述します。

Content-Language

Content-Languageは、HTMLにおける主言語を指定するタグです。日本語ならja、英語ならenのように記述します。

Content-Style-Type

Content-Style-Typeは、スタイルシート言語を指定するタグです。今では標準でスタイルはtext/cssと定められています。

Content-Script-Type

Content-Script-Typeは、スクリプト言語を指定するタグです。今では標準でスクリプトはtext/javascriptと定められています。

expires

expiresは、キャッシュの有効期限を指定するタグです。指定した時刻を過ぎるとキャッシュが削除されます。

imagetoolbar

imagetoolbarは、画像にマウスを乗せた時に表示されるツールバーを無効にするタグです。

refresh

refreshは、自動でページ遷移を行うタグです。指定した秒数後に指定したURLへ遷移させることができます。URLを指定しない場合は、そのページが再読み込みされます。

その他

特定のwebサービスで利用される、独自のメタタグもあります。

verify-v1

verify-v1は、Googleウェブマスターツールにサイトの管理者であることを通知するタグです。name属性で記述し、content部分の属性値に利用者ごとのユニークな文字列が入ります。

og:type

og:titleは、facebookなどで使用されているタグです。property属性で記述し、og:title、og:image、og:description、og:url、などとあわせて利用します。

twitter:card

twitter:cardは、twitterで使用する情報のタグです。pname属性で記述し、twitter:site、twitter:title、twitter:description、twitter:image、twitter:urlなどとあわせて利用します。twitterのSNSボタンで情報を拡散された際などに情報が引用されます。

種類のたくさんあるメタタグですが、適切な設定を行うことで効果的に利用することができます。ページに必要なメタタグを設定して、ページ情報の最適化に努めましょう。