webページのheadタグに書くべき内容
はじめに
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 タグを使います。」という宣言になります。
付けていないサイトも時々見かけますが、公式にも書かれているので従っておきましょう。
<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 を取得しなければらならないなど少し手間がかかりますが、今の所それほど効果があるようでもないので、必要性は低いです。
まとめ
調べると他にもたくさん出てきますが、今回紹介した程度の内容を抑えておけば、とくに困ることや不足を感じることもないでしょう。