SEO CheckerSEO Checker
# SEO# HTML# 入門

エンジニア視点で押さえるSEOのためのHTML基本要素

SEO対策にあたり、エンジニア視点で絶対に抑えておきたいHTML要素を、初心者・非エンジニアにもわかりやすく解説。後半ではSEOチェックに使えるツールも紹介します。

株式会社サードスコープ 開発部読了 約8分

はじめまして、株式会社サードスコープ 開発部です。今回はSEO対策にあたり、エンジニアの視点から絶対に抑えておきたいHTMLの要素について解説します。

SEO初心者の方や、非エンジニアの方にも分かりやすくまとめているためご活用ください。また、後半はSEOチェックのツールについてもご紹介します。

必須要素を詰め込んだテンプレート解説

まずはHTMLに絶対に外せない要素のテンプレートを抑えましょう。

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タイトル</title>
  <meta name="description" content="説明文">
  <link rel="canonical" href="https://example.com/" />
</head>
<body>コンテンツ</body>
</html>

この「型」は必須ですが、サイトによって少し調整の余地があるため詳しく解説します。

1. html lang属性

html
<html lang="ja">

lang属性はサイトの言語を指定するため必須です。jaやenなど、言語に対応したものを使用しましょう。多言語対応のサイトを作る場合などは、指定ミスが無いよう特に注意する必要があります。

2. viewport設定

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

viewportはスマホ用に表示を最適化するのに必須な要素です。基本はサンプルコードの書き方で問題ないですが、スマホのズームを許したくない場合などには調整の余地があります。

3. titleタグとdescription

html
<title>ページタイトル</title>
<meta name="description" content="ページの説明文" />
場所
<head>の中
重要度
必須

ページタイトルと説明文を設定します。SEOを意識する場合は、サイト共通のものではなく、各ページの内容に合ったものを個別に設定しましょう。

4. <link rel="canonical"> と、 <link rel="alternate">

html
<!-- canonical -->
<link rel="canonical" href="https://third-scope.com/" />

<!-- alternate でスクリーンサイズが小さい場合のページを示す -->
<link rel="alternate" media="only screen and (max-width: 720px)" href="https://third-scope.com/sp/" />
場所
<head>の中
重要度
canonicalは必須／alternateは用途次第

類似するページがある場合の、正規のページをhrefに示します。

  • 例えばABテストをする場合、AのページのURLを正規として2つのページのcanonicalに書きます。
  • PC版とSP版のページが分かれているケースでは、両方にPCのURLをcanonicalに書きます。加えて、alternateでPC ⇒ SP のURLを指定します。
  • 1つしかページがない場合でも書くのが無難です（ドメインのwwwのあり/なしや、URL末尾の/のあり/なしなど、システムで統一されないケースが多いため）。

SEOの評価に関連する要素4点

次の要素たちは、サイトによって重要性が異なりますが、SEOの評価に大きく関わるため把握しましょう。

1. meta name="robots" と content の適切な指定

html
<meta name="robots" content="noindex nofollow" />
場所
<head>の中
重要度
基本不要、むしろ置きっぱなしにしないこと

このタグはサイトを検索可能にしたい場合は、書く必要はありません。

!
WordPressの公開設定などを忘れた場合、noindexやnofollowがついたままの状態で公開されているケースがあります。本番公開時は必ずチェックしましょう。

2. favicon

html
<link rel="icon" href="https://third-scope.com/favicon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://third-scope.com/favicon-180x180.png" />
場所
<head>の中
重要度
icon はほぼ必須／apple-touch-icon はツール系に優先度高

iconはGoogle検索結果に表示されるため、SEOにおいて重要です。画像は黒一色や白一色だとブラウザのテーマによっては背景と同化してしまうため、背景色をつけたり、特徴的な有彩色を採用しましょう。

3. OGP画像（og:image）

html
<meta property="og:title" content="サイトのタイトル" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page-url" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:site_name" content="サービス名や会社名" />
<meta property="og:description" content="ページの説明文（80〜120文字程度）" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ユーザー名" />
<meta property="og:locale" content="ja_JP" />
場所
<head>の中
重要度
中

SNS上でのシェアが行われた場合の説明文や画像などを設定します。SEOにおいての重要度は高くないですが、Googleの評価に部分的に関わっているタグなので、設定をおすすめします。

4. JSON-LD（構造化データ）

html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "株式会社サードスコープ",
  "url": "https://third-scope.com",
  "logo": "https://third-scope.com/logo.png",
  "sameAs": [
    "https://twitter.com/your-account",
    "https://github.com/your-account"
  ]
}
</script>
場所
<head>の中
重要度
中〜高

JSON-LD（構造化データ）は、検索エンジンにより深くサイトの構造を理解させ、Google検索結果の表示形式により整理した情報を表示することに利用されます。複雑なサイトでは、どうJSON-LDを設計するかがクリック率に影響を与えます。

✓
例：検索機能、パンくずリスト、商品一覧の表示など。サイトの種類に合わせて適切な@typeを選ぶことがリッチリザルト対応の第一歩です。

SEOのチェック用ツール3選

タグ周りの設定が正しいかどうか、また、ページがクローラーに見られているか、以下のツールを使いチェックしましょう。

1. SEOチェッカー

https://seo-checker.third-scope-dev.com/

サードスコープの開発したSEOチェッカーです。今回紹介した基本的なSEOタグに漏れがないことをまとめてチェックするのに適しています。

  • metaタグの設定漏れ検知
  • 見出し構造のチェック
  • JSON-LD内容チェック
  • sitemap.xml に登録されたページの一括チェック

などの機能を含みます。

2. Google Search Console

https://search.google.com/search-console/about?hl=ja

サイトマップを登録することで、クローラーを積極的に稼働させ、Googleの検索に登録（インデックス）されているかどうかをチェックできます。コードの不具合でインデックスされない理由も調べることができます。

また、どういった内容で検索流入があったかを可視化し、コンテンツの改善につなげることができます。

3. PageSpeed Insights

https://pagespeed.web.dev/

JavaScriptや画像などをチェックし、ページの表示が重い原因を調査するのに役立ちます。

ページの表示速度が十分であればユーザーの離脱率を下げられ、SEOにも好影響がありますが、SEO上での評価はあくまでもコンテンツの"質"が重要な点に注意してください。

i
基本的な検索流入を狙う上では、80点以上で十分なケースが多いです。

まとめ

今回の内容を抑えることで、SEOの検索順位を上げるための入場資格が手に入ります。その後の順位アップについては、キーワード選定やコンテンツのブラッシュアップなども必要になってくるため、別のツールも駆使して改善を行っていきましょう。