メタタグpc操作中

目次

”description”
のとこへ
スマートフォン
などの画面表示
のとこへ
"リロード（更新）"
"リダイレクト"
設定
OGP
のとこへ

meta基本

webページの設定や情報等を伝えるHTMLファイルのheadタグ内に記述するタグのこと。
ページ全体に適用します。

メタデータを記述する時は name属性、http-equiv属性、charset属性のうち、少なくとも一つを指定する必要があります。

「name属性」「、http-equiv属性」を使用する際には、必ず「content属性」を付けます。

外部リンク参考サイトさん ・メタタグの種類 　・メタタグ見やすい 　・メタタグ専門的

name属性

種類をname属性で決め、content属性で具体的な内容、値を指定します

<meta name="keywords">
webページに関するキーワードになります。 Googleの検索エンジンは、「keywords」を見ていません
description

<meta name="description" content="説明文">

webページの内容を説明します。この説明文を「スニペット」と言います。 「スニペット」について

content属性で内容を指定します。 PCでは、120文字以内。スマートフォンでは、50文字以内の表示になります。
なるべく検索されるキーワードを含むようにします。

グーグルなどの検索結果の説明文に掲載されるもので、”とても重要”です。

Googleの検索エンジンは、「description」を見ていませんが、
ユーザーは説明文からクリックするか判断するので、わかりやすく記述することが大切です。

<meta name=”author” content=”作者名”> content属性にHTMLの著作情報を書きます。 webサイト制作者名など
meta name="viewport"画面表示領域の指定になります。

content属性

name属性の後ろに付けて作者名や説明文、表示領域などを記述します

スマートフォンなど画面表示

<meta name="viewport">

<meta name="viewport"content="width=device-width, サイズ">

スマートフォン、タブレットなどに適用,デバイスの画面幅に合わせる
content="width=device-width"　デバイスのサイズに表示を合わせる

<meta name="viewport" content="width=device-width, initial-scale=1">

Googleで推奨されている書き方
width=表示領域の幅
min-width:ブラウザ幅が指定した幅よりも大きい時に適用
min-height:ブラウザの高さが指定した高さよりも大きい時に適用
max-height:ブラウザの高さが指定した高さよりも小さい時に適用

レスポンシブのページへ

charset（キャラクター・セット）属性

ページの文字コードを指定します。

文字化け防止のための文字コード　 <meta charset="UTF-8"> 　（HTML5の場合）

http-equiv（エイチティーティーピー・イクイヴァレント）属性

”リダイレクト”など、ウェブページの処理方法を指定できます。
content属性の値で指定した秒数後、Webページが”リロード（更新）”、”リダイレクト”されます。

<meta http-equiv="refresh"content="秒数;URL=リンク先URL">

<meta http-equiv="refresh" content="秒数">　リロード（更新）設定