webページのheadタグに書くべき内容

更新:2018.10.7

目次

はじめに

htmlのheadタグに書く内容はワードプレスなどのCMSツールを使っていれば、ベストプラクティスが適用されていることがありますが、自力でHTMLを書くことになった場合、何を書けばよいのかわからない人のために最低限効果のある内容を紹介します。

今すぐ使える適用できるサンプル

<head prefix="og: http://ogp.me/ns#">
    <!-- 制御系 -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">

    <!-- SEO対策 -->
    <title>ページのタイトルを32文字程度でかく</title>
    <meta name="keywords" content="SEO的効果はないらしいが、「,」で区切って3個前後のキーワード">
    <meta name="description" content="120字程度でページの説明を書く">
    <meta name="author" content="作者名">
    <link rel="canonical" href="ページのURL">

    <!-- OGP系 -->
    <meta property="og:site_name" content="サイト名">
    <meta property="og:title" content="<title>と同じ">
    <meta property="og:description" content="<meta name='description'>と同じ">
    <meta property="og:type" content="サイトのトップページのときはwebsite、記事ページのときはarticle">
    <meta property="og:url" content="ページのURL">
    <meta property="og:image" content="サムネイル画像URL">

    <!-- twitter関係 -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@ユーザー名">
    
</head>

制御系の説明

<head prefix="og: http://ogp.me/ns#">

殆どおまじない状態ですが、「ogpタグを使います。」という宣言になります。

付けていないサイトも時々見かけますが、公式にも書かれているので従っておきましょう。

http://ogp.me/#metadata

<meta charset="utf-8">

サイトの文字コードです。作っているHTMLの文字コードに合わせた内容を指定しておきましょう。

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

IEの最新バージョンの標準モードで表示させるためのモードです。

IEの場合は、バージョンによって表示のされ方が微妙に変わったりするので、ここは明示的に書いておくのが得策です。

指定していないと、サイトを見る人の環境次第になってしまいます。

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

レスポンシブ対応です。

<meta name="format-detection" content="telephone=no">

スマホを使っていると数字の羅列が電話番号として認識されてしまい、間違って電話をかけてしまうことがあります。

それを防止できます。

SEO対策の説明

<title>ページのタイトルを32文字程度でかく</title>

Googleの検索結果に表示される最大約32に文字を想定して、サイトの内容を表す文章を入れましょう。

SEO的にも重要なタグになります。

<meta name="keywords" content="SEO的効果はないらしいが、「,」で区切って3個前後のキーワード">

その昔、SEO的な効果があったとかなかったとか、現在は効果がないと説明されいているサイトが多いです。

入れすぎるとスパム扱いされるという情報もあったりとなかなか怪しいです。

必要を感じなければ除去して大丈夫です。

<meta name="description" content="120字程度でページの説明を書く">

検索結果の記事タイトル下に表示されるようになります。この部分を指定しないとサイト内の文章から適当に抽出した文章が表示されますので、意図的に説明文を表示したい場合は入れましょう。文字数は最大約120文字までで、これを超えると「…」になります。

<meta name="author" content="作者名">

ページの作者名です。複数人でコンテンツを作成している場合は、ライターの名前を入れておくと良さそうです。

<link rel="canonical" href="ページのURL">

このページの正しいURLを書きます。

OGP系の説明

OGPタグとは「Open Graph protocol」の略です。

SNSサイトでシェアされたときに、ページの情報として表示されるようになります。

この設定をしていないとせっかくシェアされても、URLリンクが表示されるだけの寂しい感じになります。

<meta property="og:site_name" content="サイト名">

シェアされたときのサイト名になります。

<meta property="og:title" content="<title>と同じ">

シェアされたときのページタイトルになります。titleタグと同じ内容を入れておくと良いです。

<meta property="og:description" content="<meta name='description'>と同じ">

シェアされたときのページ説明になります。descriptionタグと同じ内容を入れておくと良いです。

<meta property="og:type" content="サイトのトップページのときはwebsite、記事ページのときはarticle">

og:typeで検索するとどんな値が設定できるか調べられれます。

基本で基には、topページにはwebsite、各ページにはarticleを設定しておけばOKです。

<meta property="og:url" content="ページのURL">

シェアされたときのURLを設定します。

<meta property="og:image" content="サムネイル画像URL">

シェアされたときのサムネイル画像を設定します。

美しい画像をしてしておくとシェアされたときにいい感じになります。

twitter関係の説明

ツイッターでツイートされたときの見え方を設定できます。

<meta name="twitter:card" content="summary">

ツイートされたときに表示される形式を指定できます。

summary:よく見かける一般的な見た目。

summary_large_image:summaryよりも画像が大きくなったバージョン。

photo:summary_large_imageよりもさらに大きな画像を表示するバージョン。

特にこだわりがなければ、summaryを指定しておくと画像と文章のバランスが良いです。

<meta name="twitter:site" content="ページのURL">

ツイッターのアカウントを持っている場合は、アカウントのIDを設定しましょう。

Facebook App IDどうするか

<meta property="fb:app_id" content="Facebook App IDを設定" />

フェイスブックページを持っている人には多少価値があるとか、ないとか。

IDを取得しなければらならないなど少し手間がかかりますが、今の所それほど効果があるようでもないので、必要性は低いです。

まとめ

調べると他にもたくさん出てきますが、今回紹介した程度の内容を抑えておけば、とくに困ることや不足を感じることもないでしょう。

HTMLとCSS関連記事





これからブログなどのサイトを作りたいと思っている人は、お名前.comでのドメイン取得がオススメです。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■
     ■お名前.com

アマゾンの2019年本屋大賞一覧

そして、バトンは渡された
ひと
ベルリンは晴れているか
熱帯
ある男

楽天市場のおすすめ商品一覧

お金2.0 新しい経済のルールと生き方 [ 佐藤航陽 ]
全部レンチン!やせるおかず 作りおき 時短、手間なし、失敗なし
「読む力」と「地頭力」がいっきに身につく 東大読書 [ 西岡 壱誠 ]