SEO観点で選ぶHTMLのhead部分に書いておきたい要素を徹底解説！
近年、SEOの順位決定ロジックに「Webページの使い勝手」という項目が追加されました。
また、SEO以外にもUX・UIにこだわることで新規ユーザ獲得や再訪ユーザを増やすことが見込めます。
htmlのheadに記載する項目もどんどん増えてきているため、今回は、Web制作の枠組みとなるhtml head部分へ書くおすすめの設定をタグを解説します。
HTMLのhead部分に書いておきたい要素
HTMLは主に検索エンジンやブラウザが読み取るための「head」と内容について記載する「body」から構成されます。
headに書いておきたい内容は、主に以下の２つです。
枠組みに関する部分
metaタグ・titleタグ・linkタグを書く部分の3つに分かれます。
見た目やコンテンツ読み込みに関する部分
「style」タグ内にて見栄えの設定や、「script」タグで読み込むコンテンツの設定をします。
上記2つは読み込まれる順序を意識して記載すると、有利になる可能性があります。
metaタグ内に書いておきたい要素3選
Webブラウザが読み込むための最も重要な部分です。
レスポンシブデザインの設定
スマートフォン、パソコンなどどのような端末でも画面に最適なサイズで表示を行います。
<meta name="viewport" content="width=device-width, initial_scale=1.0">| viewport | レスポンシブデザイン対策のコマンド |
|---|---|
| content | 幅や高さについて調整する |
| device-width | 画面サイズ自動取得 大抵はこちらを利用 ※widthやheighで固有の値にすることも可能ですが、推奨されておりません。 |
| initial-scale | 表示倍率1倍 |
サイト巡回ロボットへの対策
例えば、占いサイトの判定ページ・スコア別の結果判定ページや、画面遷移のためページや、仕掛けのネタバレを避けたいページ・セール情報のページなどに利用します。反対に、検索してほしいときは、書かなくてもよい項目です。
<meta name="robots" content="noindex">| robots | サイト巡回ロボットの動きを制御するコマンド |
|---|---|
| noindex | 検索結果に表示させない |
以下、必要に応じてcontent欄にカンマ区切りで追加
| nofollow | ページ内のリンクと関連性を持たせない |
|---|---|
| noarchive | キャッシュを残さない (期間限定コンテンツの再アクセス防止、最新情報のみ表示等） |
| none | nofollow,noarchiveを両方同時に設定可能 |
SNSでシェアされたときのための設定
OGP（Open Graph Protocol）は、Webサイトのサムネイルに相当する部分を作成できます。
Twitter向けとFacebook向けに専用の記述方法があり、それぞれサムネイルとなる画像のサイズごとに設定がわかれます。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# prefix属性: http://ogp.me/ns/ prefix属性#">
<!--headを利用する場合のOpen Graph Protocol利用宣言-->
<meta property="og:type" content=" ページの種類">
<!--Topページなら website, 記事・ブログは article-->
<meta property="og:url" content=" ページのURL">
<meta property="og:title" content=" ページのタイトル">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content=" 概要（120文字程度）">
<meta property="og:image" content=" サムネイルにする画像の URL"><meta name="twitter:card" content="summary"> <!--カードの種類①-->
<meta name="twitter:site" content="Twitterユーザー名">
<meta name="twitter:title" content="ページタイトル">
<meta name="twitter:description" content="説明文20文字程度">
<meta name="twitter:image" content="サムネイル画像のURL">Summary Card with Large Image
サムネイル画像を強調したいとき、大きくスペースを取りたいときに便利です。
<meta name="twitter:card" content="summary_large_image">のようにSummaryカードの該当部分を変更し、サムネイル画像の部分に適用させます。
また、動画コンテンツ配布用のPlayer Cardやアプリ配布用のApp CardはTwitter内で設定します。
必要に応じて一般のOGPコマンドと組み合わせることが可能です。
<meta name="og:image" content="サムネイル画像URL">
<meta property="fb:app_id" content="FacebookアプリID">| 大画面表示 | 画像サイズ600×315以上 |
|---|---|
| 高解像度画面 | 1,200×630以上、8MB以下が推奨されます。 |
linkタグ内に書いておきたい要素4選
タブに表示するアイコン画像（ファビコン）
設定しておくと、お気に入りやブラウザのタブで表示されるようになります。
ただし、OS・ブラウザ・端末でサイズが異なるため、現状では何種類かの併記がおすすめです。
<link rel="icon" sizes="32x32" href="/favicon.ico">
<!--画像は「ルートディレクトリ直下」に置かないと読み取れない場合があります-->
<link rel="icon" type="img/svg+xml" href="/favicon.svg">
<!--バックグラウンドで処理するため、サイズ記入不要-->
<link rel="apple-touch-icon" href="/a-favicon.png">
<!--背景は角の丸い四角に切り取られます-->
<!--pngは古いタイプのブラウザでサポートされていないため、.icoや.svgと併用-->
<link rel="manifest" href="/manifest.json">
<!--円形や透過の背景アイコンにおすすめ-->
<!--別途、.json形式のファイルに名前・形式・サイズ・リンク・背景色設定-->
<!--サイズ設定は192×192と512×512を設定-->URLの正規化と、前後のページへのリンク
複数ページにわたって類似した内容の説明を行っている場合に有効です。
正規化を行わないと、「コピーコンテンツ」であるとみなされてSEO順位が下がる、もしくは浮上されない可能性があります。
また、アクセス解析の際に集計が取りにくくなる要因となる場合もあります。
<link rel="canonical" href="正規化するページURL">
<link rel="prev" href="前ページURL">
<link rel="next" href="次ページURL">お気に入りなどに登録されたサイトの最新情報を取得
RSSフィードはニュースサイトアプリやECサイトに最適な機能です。RSSフィードを利用すれば、ページが更新される度にユーザへ通知がいくためサイトの購読者を増やせます。
<link rel="alternate" type="application/rss+xml" title="RSS" href="ページURL">他のマークアップ言語によるコンテンツのファイル読み込み
scriptやstyleタグを用いて背景やフォント、差し込むコンテンツを設定します。
ただし、多用するとページが重くなってしまうため、Webデザインとの両立には頭を悩ませることもあるでしょう。SEOのポイントとなる部分を2点に分けて紹介します。
styleタグ
Webフォント表示に関する設定や文字色、背景の設定を行います。
Webフォントはコアウェブバイタルスコアの低下を招くため、以下4点に着目するとよいでしょう。
- 表示形式をWoff2にする
- どのコンテンツ読み込みよりも先にフォントのプリロードを行う
- font-display: optional でフォントのオプション化
- 通常使う文字だけをフォント利用登録する（サブセット化）
scriptタグ
別の言語にて作成されたコンテンツを読み込みます。なるべく軽量化させるため、回転や振動など単調な動きのコンテンツはCSSで、細かく動きを制御するコンテンツはJavaScriptを用います。
JavaScriptファイルを作成する際に、記述順や同期・非同期の設定をして読み込み時間を調整するなどの対応をすれば、軽量化したコンテンツ作成が可能です。
TANE-beが標準でいれてるタグの例
近年、TwitterのようなSNS上でWebサイトが共有・拡散されることが広く一般的になりました。それに伴い、headタグのトレンドとして上がっているものがOGPです。
OGPとは「Open Graph Protcol」の略称で、SNS上でWebサイトのURLを共有した際に、画像やWebサイトの情報が表示される機能です。
以前までは、URLを共有されても、アクセスをするまではそのサイトがどのようなものかがわからず、アクセスを喚起することが難しいとされていました。
OGPは必ず設定しなければいけないものではありませんが、URLだけでそのサイトが有用か否かを判断することは難しいため、Twitterからの流入を狙う場合には設定しておくことが望ましいでしょう。
サイトによって不必要な分、必要で追加する分はありますが、標準として下記内容は入れております。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial_scale=1.0">
<meta name="format-detection" content="telephone=no">
<title></title>
<meta name="description" content="">
<link rel="apple-touch-icon" href="">
<link rel="icon" href="">
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href="">まとめ
HTMLのhead部分にはサイトを構成する枠組みの最も重要な項目が記載されます。
ただ、Webサイトのパフォーマンスとデザインは相反するものです。デザイン性を重視するのであれば、コアウェブバイタルスコアが標準に収まる範囲でユーザーにとって有益な仕掛けがあると満足度を高められるでしょう。
自身の運営するWebサイトのテーマや特徴を考慮し、どの程度何を設定するかを意識するとコンテンツ制作のポイントを掴めることでしょう。
この記事の執筆者
TANE-be Engineer
大阪・京都にあるWebサイト制作の株式会社TANE-beのエンジニアが日々の業務で使っている知識や技術を紹介します。