これだけは設定しておくHTMLのhead

2020/03/23

こんにちは。たまおさ(@tamaki_osamu)です。

web サイトを公開する際に html のheadに設定しておくと良い項目をメモします。

head とは

web サイトの情報を記述する役割を担っています。Google のクローラー等はここからサイトの情報を取得します。したがってheadは SEO 対策にとって重要な項目です。

<head>
  <!-- ここに書く -->
</head>

書いておくと良い項目

タイトル

ページタイトルを設定をします。検索結果やタブのタイトルとして利用されます。

<title>タイトル</title>

文字コード

web サイトの文字コードを指定します。日本語の場合は特に設定しておいた方が良さそうです。shift-jis 等々面倒ですし。

<meta charset="utf-8" />

description

web サイトの概要を設定します。検索結果の説明文なんかに利用されます。

<meta name="description" content="概要" />

概要って書くの難しい...

viewport

vhvwなんかを利用するときに必要です。Let's レスポンシブ!!

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

上記では横幅をデバイス幅として viewport を作成します。

アイコン(ファビコン)

web サイトのアイコンを設定します。アイコンは検索結果からスマホのホーム画面など様々な場面で利用されます。理想的にはそれぞれの用途に応じたサイズの画像を用意したいところですが、実際のところは.ico, 180x180, 256x256 の 3 つ程度あれば必要十分なようです。

<link rel="icon" href="favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="180x180.png" />
<link rel="icon" type="image/png" sizes="256x256" href="256x256.png" />

また、こちらのサイトのような自動生成サイトを利用するととても便利です。

OGP, Twitter card

SNS でリンクがシェアされた際にサムネイル等を表示できるようにするための設定です。人はサムネイルが設定してあるリンクの方がポチっとします(個人談)。

<meta property="og:url" content="<URL>" />
<meta property="og:title" content="title" />
<meta property="og:type" content="website" />
<meta property="og:description" content="概要" />
<meta property="og:image" content="<画像URL>" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@アカウント名" />

上から web サイトの URL、タイトル、種類(ホームページなら website、個別記事は article)、概要、サムネイル画像 URL、twwiter card の種類指定("summarylargeimage"がサムネイル大き目の設定でおすすめ)、twwiter アカウント名です。これで twitter の表示は上手くいくはずです。

正規 URL

URL が重複している場合は指定します。

<link rel="canonical" href="<URL>" />

その他

CSS, JavaScript 等を読み込む場合もここで行います。例えば Goole フォントを読み込むなら

<link
  href="https://fonts.googleapis.com/css?family=M+PLUS+1p"
  rel="stylesheet"
/>

とすると"M+PLUS+1p"が利用できるようになります。

まとめ

上記をまとめたテンプレがこちらです!

<head>
  <title>タイトル</title>
  <meta charset="utf-8" />
  <meta name="description" content="概要" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" href="favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="180x180.png" />
  <link rel="icon" type="image/png" sizes="256x256" href="256x256.png" />
  <meta property="og:url" content="<URL>" />
  <meta property="og:title" content="title" />
  <meta property="og:type" content="website" />
  <meta property="og:description" content="概要" />
  <meta property="og:image" content="<画像URL>" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@アカウント名" />
  <link rel="canonical" href="<URL>" />
  <link
    href="https://fonts.googleapis.com/css?family=M+PLUS+1p"
    rel="stylesheet"
  />
</head>
logo

たまおさ

釣りとか登山とか好きです。(@tamaki_osamu)