LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Mr-J

【SEO】Webエンジニアが最低限抑えておくべきSEO知識

Posted at

こんな方におすすめの記事です

  • Web制作や開発に関わるエンジニア
  • SEOの基本を技術的に理解したい方
  • マークアップや構造化でSEOに貢献したい方

結論：SEOは技術力で差がつく

SEOはライターやマーケターだけの仕事と思われがちですが、Webエンジニアの対応次第で成果が変わることも多々あります。特に以下の技術的要素は、押さえておくとSEOに非常に有利です。

よく使うSEO用語の詳細解説

meta description

「SEOとUXの橋渡し」
meta descriptionは、HTMLの<head>内に記述する そのページの要約（説明文） を指定するメタタグです。
検索エンジンはこれを「検索結果一覧（スニペット）」に表示する場合があり、ユーザーがページを訪れるかどうかの判断材料 になります。

基本構文

<meta name="description" content="この記事ではWebエンジニアが知っておくべきSEOの基本を解説します。" />

SEOにおける効果と役割

  • 検索順位（直接的な影響は少ない）
    • Google公式によれば、meta description はランキング（順位）に直接影響するシグナルではないとされています。
      しかし、間接的にはSEOに大きく関わる要素です。
  • クリック率（CTR）を上げる
    • 一番大きな効果はここになります
      • ユーザーが検索結果でページを選ぶ際の決め手になる
      • 説明が魅力的だとクリック率が上がる
      • クリック率が高いと、間接的にGoogleがそのページを「有益」と判断する可能性がある

title

「SEOの顔」であり「入口の看板」

HTMLドキュメントのタイトル（ページタイトル）を指定するタグです。
<head>タグの内部に1つだけ記述できます。

基本構文

<title>Webエンジニア向けSEOの基本</title>

SEOにおける効果と役割

  • ランキングに直接影響する最重要タグのひとつ
    • Googleは公式に、タグの内容を検索順位決定の重要なシグナルとして使用していると明言しています。

      • タイトルに検索キーワードが含まれていれば、検索エンジンはそのページが「関連性がある」と判断しやすくなる

      • ただし「キーワードを詰め込みすぎる」と逆効果（スパムと判断）

  • クリック率（CTR）を大きく左右する
    • 検索結果の中で一番目立つ要素がタイトル
    • ユーザーは「自分の疑問に答えてくれそうなタイトルかどうか」でクリックを判断
    • 興味を引く・具体的・簡潔なタイトルはクリック率を高める
  • ブランド名やサイト名の認知向上にも効果
    • 末尾に「| サイト名」などを加えることで、検索結果からのブランド認知にも貢献できます。

canonical（カノニカル）タグ

「SEOの交通整理係」
canonicalタグとは、検索エンジンに対して「このページの正規URLはこれです」と伝えるHTMLタグです。
正式名称は Canonical URL（正規化URL） で、重複コンテンツが複数存在する場合に、検索エンジンの評価を一つのURLに集約させる役割を持っています。

基本構文

<link rel="canonical" href="https://example.com/article" />

このように指定することで、たとえば以下のようなページでも「評価はすべて /article に集めてね」と伝えられます：

  • https://example.com/article?ref=twitter
  • https://example.com/article?page=1
  • https://example.com/article?utm_source=newsletter

SEOにおける効果と役割

  • 検索評価の分散を防ぐ（ランキングが上がりやすくなる）
    • Googleは「重複コンテンツ」が多いと、評価を分散したり、どのページをインデックスすべきか判断しにくくなります。
      カノニカルで1ページに評価を集約できれば、検索順位が安定し、正しく評価されやすくなります。
  • 重複コンテンツによるペナルティを回避
    • Googleは「意図しない重複コンテンツ」が多いサイトに対し、検索順位を下げることがあります。
      カノニカルタグを適切に使えば、同じ内容のページでも正規ページを明示でき、ペナルティの回避につながります。
  • クローラビリティとインデックス最適化
    • Googlebotが同じ内容のページを何度もクロールするのは効率が悪いため、クロールの無駄を減らす効果もあります。
      これは特に大規模サイトにおいて、サイト全体のクロール効率とSEOに好影響をもたらします。

meta robots

「検索エンジンへの通行許可証」
検索エンジンのクローラーに対して「このページをインデックスするか」「リンクをたどるか」などの指示を出すHTMLタグです。

基本構文

<meta name="robots" content="noindex, nofollow">

このように指定することで、ページをインデックスさせない & リンクもたどらないようにできます。

SEOにおける効果と役割

  • ページのインデックスコントロールが可能
    • noindex を使うことで、検索結果から除外したいページを確実にブロックできます。
    • robots.txtと違い、noindexはクロールした上での制御なので、metaタグによる制御は「精度が高い除外方法」 です。
  • 不要ページの評価を防ぎ、サイト全体の質を保てる（noindex）
    • noindexにすることで、重複コンテンツとしての評価低下を防ぎ、コアコンテンツの品質を守ることができます。
  • 意図しないリンク評価の拡散を防げる（nofollow）
    • 一部の外部リンクに対してnofollowを指定すれば、評価のパス（リンクジュース）の流出を防止できます。
      ただし、metaタグで全ページnofollowにするのはSEO的にはおすすめできません。

robots.txt

「検索エンジンの案内板」
検索エンジンなどのクローラーに対して、どのページやディレクトリをクロール（巡回）して良いかを制御するためのテキストファイルです。

  • サイトルート（https://example.com/robots.txt）に設置する
  • ユーザーエージェント（＝クローラー）ごとにルールを設定できる
  • SEOの「インデックス最適化」や「サーバー負荷軽減」に役立つ

基本構文

User-agent: *
Disallow: /admin/
Allow: /admin/help.html
Sitemap: https://example.com/sitemap.xml
  • User-agent: * すべてのクローラーに対して
  • Disallow: /admin/ /admin/ 以下はクロール禁止
  • Allow: /admin/help.html ただし help.html はクロール許可
  • Sitemap: サイトマップの場所を指定（Google推奨）

SEOにおける効果と役割

  • 不要なページのクロールを防ぐ（クロールバジェットの節約）
    • Googleなどのクローラーは、1サイトあたりクロール回数に**「上限（クロールバジェット）」**があります。
      • 重要でないページ（例：管理画面・検索結果・絞り込みページなど）をクロール対象から除外
      • 重要ページにクロールを集中させることができる
  • サイト全体のクロール効率を最適化
    • サイト構成が複雑な場合でも、robots.txtを使うことでクローラーの動きをガイドできる
    • サーバー負荷が高いときも、一時的にクロールを制限可能

robots.txt と meta robots の違い

項目 robots.txt meta robots
書く場所 /robots.txt（ファイル） HTMLの<head>タグ内
クロール制御 ✅可能 ❌不可（読み込まれる必要がある）
インデックス制御 ❌不可 ✅可能（noindexなど）

sitemap.xml

「検索エンジンへの道案内図」
Webサイト内のURL構造を検索エンジンに伝えるためのXML形式のファイルです。
特に以下の情報をクローラーに効率的に伝える役割があります：

  • どのページが存在するか
  • いつ更新されたか
  • 更新頻度はどのくらいか
  • どのURLを優先的にクロールしてほしいか

Googleなどのクローラーは、このファイルを読み取ってサイトを理解しやすくし、インデックス精度を上げることができます。

基本構文

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2025-04-01</lastmod>
    <changefreq>monthly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/about</loc>
    <lastmod>2025-03-20</lastmod>
    <changefreq>yearly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>
  • <loc> ページのURL（必須）
  • <lastmod> 最終更新日（任意）
  • <changefreq> 更新頻度の目安（任意）
  • <priority> 相対的重要度（0.0～1.0、任意）

SEOにおける効果と役割

  • インデックスの効率向上（特に大規模サイトで有効）
    • クローラーは自然なリンク構造からもページを発見できますが、sitemap.xmlがあると優先的に見に行ってくれます
    • 内部リンクが少ないページや、新しく追加されたページを素早くインデックスさせることができます
  • クロールの精度向上（クロールバジェットを有効活用）
    • Googleのクローラーには クロール予算（1サイトあたりの上限） があります。
      sitemap.xmlによって「このページを優先的に見てほしい」という意図を伝えることで、無駄なクロールを避けつつ重要なページに集中できます。
  • 検索エンジンとの信頼性の向上
    • Google Search Consoleにsitemap.xmlを登録すると、サイトの更新を通知する仕組み（Ping）も自動化可能
    • サイトが構造的に整っていると判断され、SEO全体に良い影響を与えることも

ALT属性（代替テキスト）

「画像の意味を伝える翻訳者」
画像（<img>タグ）に対して代替テキスト（Alternative Text）を指定するためのHTML属性です。
主な目的は以下の3つ：

  • 画像が表示されない場合の代替表示
  • 視覚障がい者向けのスクリーンリーダー対応
  • 検索エンジンに画像の内容を伝える（SEO）

基本構文

<img src="cat.jpg" alt="白い毛並みの猫が寝ている様子" />

SEOにおける効果と役割

  • 検索エンジンに画像の意味を伝えられる
    • 検索エンジンは画像の中身を直接理解できない
    • 画像の内容・意図・関連性を伝えるヒントになる
    • Google画像検索で上位表示されやすくなる
  • アクセシビリティ向上（≒SEOの品質シグナル）
    • スクリーンリーダーに読み上げられるため、視覚障がい者にもページ内容を伝えられる
    • アクセシビリティに配慮したサイトは、Googleからも 「ユーザー体験に優れる」と評価 されやすい

Core Web Vitals（コアウェブバイタル）

「ユーザー体験の見える化」
Googleが定めた「ユーザー体験（UX）」を評価するためのウェブパフォーマンス指標です。
2021年から検索ランキングの評価基準に正式に組み込まれ、SEOに直接影響を与える要素の一つとなっています。

ページの表示速度・安定性・インタラクティブ性を測るGoogleの指標

  • LCP（Largest Contentful Paint）：ページで一番大きなコンテンツ（画像やテキストなど）が表示されるまでの時間
  • FID（First Input Delay）：ユーザーが初めて何か操作したときに、その操作に反応するまでの時間
  • CLS（Cumulative Layout Shift）：ページのレイアウトがどれだけズレたかの指標（広告や画像の遅延読み込みなど）

SEOにおける効果と役割

  • 検索ランキングに直接影響
    • Google公式が明言：「ユーザー体験を重視する時代」＝ページの読みやすさ・安定性・応答性が検索順位に関与
    • コンテンツの質が同等であれば、Core Web Vitalsが良い方が上位に表示されやすい
  • ユーザー満足度・直帰率にも影響
    • 表示が遅い／ガタガタ動くページは、すぐ離脱される（＝SEO的にマイナス）
    • Core Web Vitals改善は、SEO・CVR（コンバージョン率）・エンゲージメントすべてに良い効果

構造化データ（Structured Data）

「SEO強化とUX向上のためのマイクロマークアップ」
Webページの内容を検索エンジンに「意味付き」で伝えるマークアップのことです。
通常のHTMLでは「何が書かれているか」しか伝わりませんが、構造化データを使えば、それが商品なのか、記事なのか、レビューなのかを明示できます。
※使用されるマークアップ形式は主に JSON-LD（Google推奨）、他にMicrodataやRDFaもあります。

基本構文（JSON-LD）

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Webエンジニアが抑えておくSEO",
  "author": {
    "@type": "Person",
    "name": "Yamada Taro"
  },
  "datePublished": "2025-04-05",
  "mainEntityOfPage": "https://example.com/seo-for-engineers"
}
</script>

SEOにおける効果と役割

  • リッチリザルト（検索結果の強化表示）を得られる
    • Googleは構造化データを元に、検索結果に 「リッチリザルト」と呼ばれる拡張表示（星・価格・FAQなど） を追加します。
  • Googleがページ内容をより正確に理解する
    • 構造化データによって、検索エンジンがページ内容のコンテキストを理解しやすくなり、
      インデックス精度・ランキングの安定性が向上する可能性があります。

Open Graph（OGP）タグ

「SNSにおける第一印象を制御する名刺」
Facebook社（現Meta）が定めた
SNS上でWebページの内容を適切に表示させるためのメタタグの仕組みです。

  • 主に Facebook、X（旧Twitter）、LINE、LinkedIn などのSNSで使われる
  • SNSにURLを貼ったときに表示される 「タイトル・画像・説明文」などを制御 できる

基本構文

<meta property="og:title" content="SEOの基本" />
<meta property="og:description" content="構造化データを5分で解説" />
<meta property="og:image" content="https://example.com/ogp.jpg" />

SEOにおける効果と役割

  • 直接的なSEO効果は「ない」
    • OGPは検索エンジンのランキングには直接関係しません。
      しかし、SNS上でのクリック率（CTR）・エンゲージメント向上 → 間接的にSEOに貢献します。
  • SNSからの流入数・拡散力を最大化する
    • 見栄えの良いリンクプレビューは信頼性と注目度をUP
    • OGPが正しく設定されているだけで、ブランド力や情報の印象が圧倒的に向上

WebエンジニアができるSEO対策

各SEOメタタグの推奨設定

description

項目 推奨内容
文字数 120〜160文字程度
内容 ページの要点・訴求ポイントを簡潔にまとめる（より具体的・魅力的に）
重複 各ページごとにユニークな内容を設定する
キーワード 無理なく自然に含めるとハイライト表示されやすい
  • 良い例：Webエンジニアが最低限知っておくべきSEOタグ・技術・対策を5分で解説します。
  • 悪い例：このページではいろんなことを紹介しています。

description が設定されていないとどうなるか？

  • Googleが自動で本文から抜き出して生成します
  • 意図しない文章や文脈が表示される可能性が高く、CTRが下がる恐れがあります

title

項目 推奨内容
文字数 30〜60文字程度（長すぎると末尾が省略される）
キーワード配置 なるべく先頭に主要キーワードを置く
一貫性 ページ内容と一致させる（釣りタイトルはNG）
ユニーク性 各ページで重複しないタイトルを設定
  • 良い例：Webエンジニアが抑えるべきSEOタグ5選 | TechBlog
  • 悪い例：SEOについてのあれこれといろんな話をまとめたページ

canonical

推奨内容 補足
noindexと併用しない 矛盾が生じる（noindexで除外しつつcanonicalで正規URLにするとGoogleが混乱）
URLは絶対パスで記述 相対パスだと正しく解釈されないことがある
他人のサイトにcanonicalを向けない クロスドメインのcanonicalは基本NG（悪用・評価の搾取になる）

ALT属性

項目 推奨内容
内容 画像の内容や目的を的確に簡潔に表現
長さ 80文字以内が目安（長すぎると読みにくい）
装飾画像 装飾のみの画像は空のalt（alt=""）でOK（スクリーンリーダーに読み上げさせない）

Core Web Vitals改善

GoogleのUX評価改善、検索順位安定化

  • LCP（Largest Contentful Paint）
    ページで最も大きなコンテンツ（画像やテキスト）が表示されるまでの速度を改善する
    • 画像の最適化
      • WebPやAVIFなどの軽量フォーマットを使用
      • 適切なサイズ（出力解像度に対して大きすぎない）にする
      • srcset でレスポンシブ対応し、モバイルでも軽量画像を表示
      <img src="hero.webp" srcset="hero-small.webp 480w, hero.webp 1024w" alt="..." />

    • ファーストビュー内のリソースを遅延読み込みしない
      • LCP要素が loading="lazy" だと、逆に表示が遅れるためNG
      • ファーストビュー以外の画像にだけ loading="lazy" を使う
    • font-display: swap でWebフォントの遅延を抑える
      • フォント読み込み中に「空白」になるのを防ぎ、FOIT（Flash of Invisible Text） を回避
    • preload を使って重要画像を優先読み込み
      • ヒーロー画像やメインフォントなど、LCP要素を事前に読み込むよう指示
    • CSS/JSの遅延・分割読み込み
      • 不要なスタイルやスクリプトは初期描画から外す
      • critical CSS をインライン化してレンダリングブロックを回避
  • FID（First Input Delay）
    ユーザーの初回操作に対する応答の速さ（＝JavaScriptの実行効率）を改善する
    • JSの分割（code-splitting）
      • 必要な機能ごとにモジュールを分離し、初期ロードを最小化
    • 非同期読み込み（async、deferの活用）
      • ライブラリや分析ツールなど、即時実行不要なJSは遅延読み込み
    • 重いライブラリの見直し
    • サーバー応答速度の改善
      • APIレスポンスの高速化
      • SSR・SSGの適切な使い分け（Next.jsなど）
      • CDN活用、キャッシュ戦略
  • CLS（Cumulative Layout Shift）
    読み込み中のコンテンツのズレやジャンプを防ぐ
    • 画像・iframeには常に幅・高さを指定
      • レイアウト確保がされないと、読み込み後に「ガクッ」とズレる
    • 広告エリアの固定サイズ確保
      • div に高さを確保し、動的に挿入されてもズレが起きないようにする
    • WebフォントのCLS対策
      • フォールバックフォントとサイズ差があるとズレる
      • font-display: optional の活用や、font metrics による調整も検討

改善のステップと優先順位

  1. PageSpeed Insights や Lighthouse で測定し、対象ページ・要素を特定
  2. LCP → FID → CLS の順に優先対応（Googleも推奨）
  3. 検証ツール（Web Vitals拡張、Chrome DevTools）でローカルでも実測確認
  4. ABテストで効果測定しつつ、リリース／監視を継続

適切なHTML構造（見出しの順序など）

クローラーにページ構造を明確に伝える

  • h1タグは1ページ1つ
  • h2タグ → h3タグ の階層構造を正しく
  • セクションごとに <section> や <article> を活用

モバイル対応とレスポンシブデザイン

スマホ対応の有無はSEO評価に直結

  • モバイルファーストインデックス対応済みかチェック
  • viewportの設定忘れずに
<meta name="viewport" content="width=device-width, initial-scale=1.0">

まとめ

SEOは 検索エンジンとの会話 、エンジニアはその 翻訳者

SEOは単なるマーケティング施策ではありません。
むしろ、検索エンジンに「このページは誰の、何のためのものか？」を技術で正しく伝えることが本質です。

そのためには、Webエンジニアがコードの中に意味を込める必要があります。

  • 適切なHTML構造でページの「骨格」を示し
  • metaタグや構造化データで「意図」を伝え
  • パフォーマンス改善で「体験」を届ける

SEOはコンテンツだけでは完結しません。「伝わるコード」こそが、検索でも選ばれるWebをつくります。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?