Webサイトの情報を検索エンジンやブラウザに伝えるmeta要素について

2019年12月03日

metaタグはHTMLのheadタグ内に記述され、そこで記された情報を検索エンジンやブラウザなどに伝えてくれます。今回は「metaタグ」について分かりやすく解説します。

主な「metaタグ」の種類

meta要素の属性は主に
・charset
・http-equiv
・name
の3つがあり、http-equivとname属性では必ずcontent属性の値を設定しブラウザや検索エンジンに対して情報を伝えています。

charset属性

charset属性は、ブラウザでどの文字コードを使うかを指定します。
一般的には世界的に最もポピュラーな文字コードである「utf-8」を使用します。
文字コードを指定しないと、文字に対応しているコード番号が分からずアクセスした時に文字化けが起きることがあります。なるべく文字コードを指定しましょう。
その他、日本語の文字コードの値としては「Shift_JIS」「EUC-JP」などがあります。

<meta charset="utf-8">

http-equiv属性

http-equiv属性はブラウザに対してさまざまな指示ができます。
http-equiv属性には、いくつかの属性値があるのでここでは主なものを紹介します。必ずcontent属性の値を設定します。

「content-type」

ブラウザにファイルの種類や文字コードを指定するために使用します。

<meta http-equiv="content-type" content="text/html; charset=utf-8">

「default-style」

優先スタイルシートを指定するために使用します。

<meta http-equiv="default-style" content="style.css">

「refresh」

自動更新やリダイレクトを指定するために使用します。
URLを設定すると更新する時に別ページに移動させることも可能です。　　

<meta http-equiv="refresh" content="30; URL=new.html">
例）30秒でnew.htmlにリダイレクト

name属性

name属性は、サイトの説明などを記述できます。
name属性にはいくつかの属性値があるので主なものを紹介します。
必ずcontent属性の値を設定します。

「discription」

文書の説明文を指定します。
値の説明文は多くの検索エンジンに読み取られ、検索結果一覧に表示されます。

<meta name="description" content="サイトの説明文">

「keywords」

文書がどのような内容を示したものかキーワードで指定します。値にはカンマ（,）で区切り、複数のキーワードを入力できます。

<meta name="keywords" content="キーワードA,キーワードB,キーワードC">

「author」

文書の作者の名前を記述するために指定します。

<meta name="author" content="ウルトラドメイン編集部">

「generator」

文書の概要（使用したツールやソフトウェア）を記述するために指定します。
使用したツール自身がhead要素内に挿入します。

<meta name="generator" content="Wordpress 4.0">

metaタグ

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<meta name="keywords" content="ドメイン取得，ドメイン検索，独自ドメイン">
<meta name="description" content="ウルトラドメインは、欲しいドメイン検索から取得まで、独自ドメインの更新、管理を一括で行えるレジストラです。whois 検索も簡単に行えます。また、ドメイン毎のレジストラ分散も可能でSEOに最適です。">	
<meta name="author" content="ウルトラドメイン編集部">
<title>ドメイン取るならウルトラドメイン | ドメイン取得 | ドメイン検索 | 独自ドメイン</title>
</head>