metaの使い方についてまとめ

metaの概要

metaタグとは、ブラウザや検索エンジンに情報を伝えるためのタグです。head内に記述します。

metaのカテゴリー

    コンテンツモデル

    • コンテンツモデルなし

metaに入れられるタグ一覧

タグ早見表

なし

入れられるタグのカテゴリー・モデル

  • コンテンツカテゴリなし
  • コンテンツモデルなし

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 あり

WORK REQUEST

CONTACT