webデザイン

サイトの宣言文、【head】内の【meta】記述最善ソースを解説&まとめ

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今回はWebサイトのソースの一番上の部分、サイト宣言、meta部分などについておすすめの記述の仕方と解説をまとめました。
いつも同じ内容をコピペして使用してることも多いと思いますが、一度ここで見直しをはかるのもよいと思います。

HTML5の宣言になります。

<!DOCTYPE html>

IE11での表示方法を設定します。
最近では記述の必要性が議論されています。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

レスポンシブで最適な表示にするための設定です。
width=device-width : 端末画面の幅に合わせて表示します。
initial-scale=1.0: 初期のズーム倍率なので1を指定しています。

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

webページをfacebookやLINEで拡散するときに必要な設定です。

<meta property="og:type" content="article" />

サイトTOPページなら「website」その他は「article」を記述します。

<meta property="og:description" content="サイト説明" />

facebookなどで表示されるサイト説明文を入れます。

<meta property="og:url" content="https://uhaha.net/ページURL" />

facebookなどで表示されるURLを入れます。

<meta property="og:site_name" content="サイトタイトル" />

facebookなどで表示されるサイトのタイトルを入れます。

<meta property="article:author" content="https://www.facebook.com/フェイスブックページ" />

サイトとフェイスブックページを紐づけします。
「author」:個人、「publisher」:企業 とします。

<meta property="og:updated_time" content="2020-12-12T16:43:43+09:00" />

アップデート日時を記述します。

<meta property="og:image" content="OGP画像.png" />

facebookなどで表示される画像を入れます。

webページをtwitterで拡散するときに必要な設定です。

<meta name="twitter:card" content="summary_large_image" />

ツイートした際のogp画像のサイズの指定になります。
「summary」は通常の大きさ 「summary_large_image」は横幅100%の大きさです。

<meta name="twitter:description" content="サイト説明" />

twitterで表示されるサイト説明文 を入れます。

<meta name="twitter:title" content="ページタイトル" />

twitterで表示されるサイトページタイトルを入れます。

<meta name="twitter:site" content="webサイトの@twitterアカウント" />

webサイトの@twitterアカウントを記述します。

<meta name="twitter:image" content="ogp画像.png" />

twitterで表示される画像を入れます。

<meta name="twitter:creator" content="webサイトの管理者の@twitterアカウント" />
<link rel="canonical" href="https://uhaha.net/ページURL" />

重複コンテンツによる検索順位の低下を防ぐための記述です。
例えば以下のようなURL記述の仕方をまとめてくれます。
https://uhaha.net/
https://uhaha.net
https://uhaha.net/index.php

<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="サイト説明"/>
<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="article" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="サイト説明" />
<meta property="og:url" content="https://uhaha.net/ページURL" />
<meta property="og:site_name" content="サイトタイトル" />
<meta property="article:author" content="https://www.facebook.com/ファイスブックページ" />
<meta property="og:updated_time" content="2020-12-12T16:43:43+09:00" />
<meta property="og:image" content="/wp-content/themes/xeory_extension/lib/images/mv.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="サイト説明" />
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:site" content="@twitterアカウント" />
<meta name="twitter:image" content="ogp画像.png" />
<meta name="twitter:creator" content="@twitterアカウント" />
<link rel="canonical" href="https://uhaha.net/ページURL" />
<link rel="icon" href="https://uhaha.net/wp-content/uploads/2020/03/cropped-favicon-2-32x32.png" sizes="32x32">
<link rel="icon" href="https://uhaha.net/wp-content/uploads/2020/03/cropped-favicon-2-192x192.png" sizes="192x192">
<link rel="apple-touch-icon-precomposed" href="https://uhaha.net/wp-content/uploads/2020/03/cropped-favicon-2-180x180.png">
</head>
<body>
<!-- body内 -->
</body>
</html>

今回はmetaタグのkeyword設定はgoogle検索の順位判定に影響しないため除外しました。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*