metaの概要
metaタグとは、ブラウザや検索エンジンに情報を伝えるためのタグです。head内に記述します。
metaに使える属性
属性とは<meta> タグ内に入れることのできるものです。
よく使うmeta属性
metaの基本的な書き方
<meta name="メタデータの種類" content="メタデータの内容">一般的な書き方として、name属性とcontent属性をセットとして記述します。
（name="何を書く？" content="説明" ）
name属性 + content属性
ディスクリプション
<meta name="description" content="ここにディスクリプションを入れると検索結果に表示されます。">一般的には100文字～120文字程度で書かれています。
文字数がオーバーしても問題ありませんが、検索のディスクリプションは最大160文字程度です。
ドキュメント作者名
<meta name="author" content="ドキュメント作者名">サイトの運営者名などを記入します。
法人団体であれば、法人名を記入・個人であれば個人名もしくはサイト名などを記入しましょう。
PWAのテーマカラー
<meta name="theme-color" content="#ffffff">PWAを実装する際に、metaでテーマカラーを挿入することができます。
キーワード
<meta name="keywords" content="キーワード1,キーワード2,キーワード3 ">昔はSEO効果がありましたが、現在ではまったく意味のないものになります。
charset属性
<meta charset="UTF-8">http-equiv属性
<meta http-equiv="refresh" content="5; url=example.html">メタ情報でリダイレクト設定をすることが可能です。
上記のように記述することで、リダイレクト設定が可能です。
| refresh | 再読み込み・リダイレクト |
|---|---|
| content | 何秒後に？ |
| url | どのurlに移動する |
スポンサードサーチ
ブラウザ対応状況
| ブラウザの対応（PC) | |
|---|---|
| Chrome | あり |
| Safari | あり |
| Internet Explorer | あり |
| Edge | あり |
| Firefox | あり |
| Opera | あり |
| ブラウザの対応（SP) | |
| Chrome | あり |
| Safari | あり |
| Samsung Internet | あり |