BetterLink Logo 比隣
言語を切り替える
中文 English 日本語
テーマを切り替える

技術ブログ SEO の三本柱：内部リンク、構造化データ、Core Web Vitals 実践

技術ブログを 50 本書いても、月間の自然流入が 1000 PV に届かない——そんな経験、ありませんか。2023 年当時の私のブログがまさにそうでした。内容も技術的な深さも悪くないのに、検索エンジンが評価してくれない。

原因はテクニカル SEO の基本設定にありました。SEMrush の調査では、約 80% のサイトにテクニカル SEO の問題があり、多くは基本的な設定ミスです。記事がどれだけ良くても、検索エンジンに見つけられず、理解されず、表示が遅ければ意味がありません。

本記事では、技術ブログ SEO の三本柱——内部リンク、構造化データ、Core Web Vitals——を実践例で解説します。用語は怖く聞こえても、一つずつ分解すれば大丈夫です。Astro を使っている方には、最後にそのまま使える設定テンプレートも用意しました。

1. 内部リンク：コンテンツの権威を流す血管

内部リンクは、SEO で最も過小評価されているレバーです。

ブログを図書館に例えましょう。各記事は一冊の本、内部リンクは本棚をつなぐ通路です。通路がうまく設計されていれば、読者は「React Hooks 入門」から「状態管理の実践」、さらに「パフォーマンス最適化ガイド」へと自然に移動できます。設計が悪ければ、入り口で迷子になります。検索エンジンのクローラーも同じです。

ピラークラスタ構成：技術ブログの定番アーキテクチャ

ピラーコンテンツ（Pillar Content）とクラスタコンテンツ（Cluster Content）という考え方を押さえましょう。ピラーはテーマの「総合ガイド」（例：「React 完全ガイド」）。クラスタはその配下の個別記事（例：「useState 詳解」「useEffect ベストプラクティス」）です。

両者の間には双方向リンクが必要です。ピラーから関連クラスタへ、クラスタからピラーへ。こうしてページオーソリティ（Page Authority）がネットワーク全体に流れ、孤立ページに閉じ込められません。

孤立ページはランクインしにくい
Upward Engine の調査
Source: Upward Engine

孤立ページ——内部リンクが一切ないページ——は、基本的にランキングを獲得できません。クローラーもユーザーも見つけられないからです。記事を書きっぱなしにして内部リンクを張らないのは、もったいない。

アンカーテキスト：「ここをクリック」はやめよう

アンカーテキストは、リンク上のクリック可能な文字列です。適当に書く人が多いですが、影響は大きい。

「完全なチュートリアルはここをクリック」——これは SEO にほとんど効きません。検索エンジンはアンカーからリンク先の内容を推測します。「React 状態管理チュートリアル」なら状態管理の記事だとわかりますが、「ここをクリック」では何も伝わりません。

SearchScaleAI の調査でも、説明的なアンカーテキストは SEO と UX の両方を改善すると報告されています。

階層管理：3 クリック原則

「3 クリック原則」——重要ページは 3 クリック以内で到達できるべき、という古いルール。今も有効です。

ナビゲーションは詰め込みすぎない。認知心理学の「7±2 法則」どおり、メインメニューは 5〜7 項目が目安です。カテゴリページ、タグページ、シリーズページなどの中間層でコンテンツを整理しましょう。

技術ブログの特例：シリーズ記事と API ドキュメント

シリーズ記事は特殊ケースです。私の「Next.js 完全ガイド」シリーズでは、各記事がシリーズ索引にリンクし、前後記事ナビもあります。クローラーにもユーザーにも優しい構造です。

API ドキュメントはツリー構造が多く、パンくず（Breadcrumb）が特に重要です。今どの階層にいるかを常に示せます。

あるフレームワーク公式ドキュメントの失敗例：各ページに「関連リンク」が乱立し、ユーザーが迷子、クローラーもぐるぐる。明確なサイドバーを追加したら、2 ヶ月で順位が改善しました。

2. 構造化データ：検索エンジンに内容を理解させる

構造化データは、検索エンジン向けの「ラベル」です。「これはチュートリアル」「著者は ○○」「公開日は 2026 年 4 月」と伝えることで、表示精度が上がります。

Google は JSON-LD を推奨します。HTML から独立したスクリプトブロックなので、ページ構造を汚さず保守も楽。記事に機械可読の説明書を添えるイメージです。

構造化データの直接効果：CTR 向上

数字は嘘をつきません。

35%
CTR 向上
Source: Digital Applied 調査

構造化データ付きページの CTR は約 35% 向上します。検索結果の見え方が変わるからです。

通常はタイトルと説明だけ。Schema を入れると著者アバター、公開日、評価、FAQ 折りたたみなどが付くことがあり、目立ちやすくなります。

技術ブログに必須の Schema タイプ

最低 4 種類：

1. Article Schema：各記事に必須。タイトル、著者、公開日、更新日、カバー、要約。

2. BreadcrumbList Schema：サイト階層の理解を助けるパンくず。

3. Person Schema：著者情報で E-E-A-T（経験、専門性、権威性、信頼性）を強化。

4. Organization Schema：ブランド名とロゴでブランド認知を補強。

JSON-LD テンプレート（コピペ可）

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "技術ブログ SEO の三本柱：内部リンク、構造化データ、Core Web Vitals 実践",
  "description": "内部リンク戦略、構造化データ Schema、Core Web Vitals 最適化を最小投資で最大効果に。",
  "image": "https://yourdomain.com/images/tech-blog-seo-guide.jpg",
  "author": {
    "@type": "Person",
    "name": "あなたの名前",
    "url": "https://yourdomain.com/about"
  },
  "publisher": {
    "@type": "Organization",
    "name": "あなたのブログ名",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yourdomain.com/logo.png"
    }
  },
  "datePublished": "2026-04-26",
  "dateModified": "2026-04-26",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://yourdomain.com/posts/tech-blog-seo-guide"
  }
}
</script>

<head> または <body> に配置。Astro ならレイアウトコンポーネントで自動生成できます。

検証フロー

公開前に必ず検証：

  1. Google Rich Results Test：URL またはコードを入力し、解析可否を確認。
  2. Search Console 構造化データレポート：公開後もエラーを監視。

技術ブログの特例：HowTo とコード例

チュートリアルには HowTo Schema が使えます。ステッププレビューで UX が向上。ただし Google の表示方針は変わることがあり、現状は政府・健康系で優先されやすいです。

コード例用の公式 Schema はありません。<pre><code> とシンタックスハイライトを使い、Article Schema の articleBody でコードを含むことを示すのが現実的です。

3. Core Web Vitals：技術ブログの性能ベースライン

Core Web Vitals は Google が UX を測る指標群。2021 年からランキング要因です。2024 年 3 月、FID が INP に置き換わり、現在は LCP、INP、CLS の 3 つ。

読み込み速度、操作の滑らかさ、レイアウトの安定性——この 3 点を測っています。

LCP（Largest Contentful Paint）

LCP はメインコンテンツの描画速度。ビューポート内で最大の画像またはテキストブロックが完全に描画されるまでの時間です。

目安は 2.5 秒以内。4 秒超は要改善。

技術ブログのボトルネック：

画像：カバーや図解が大きい。

  • WebP で 25〜30% 軽量化
  • <link rel="preload"> でファーストビュー画像をプリロード
  • CDN キャッシュ

コードブロック：JS シンタックスハイライトが LCP を遅らせることがあります。highlight.js の自動読み込みで首屏が遅かった経験があり、Astro の静的プリレンダリングに切り替えて LCP が 3.2s → 1.8s に改善しました。

INP（Interaction to Next Paint）

INP は操作後、次フレームが描画されるまでの時間。

目安 200ms 以内。500ms 超は要改善。

検索：フロントエンドフィルタは長タスクの原因。デバウンス、Web Worker への移譲が有効。

コピーボタン：clipboard API 利用時に同期 DOM 更新をしていると INP が悪化。非同期更新に切り替えて改善。

長タスク：50ms 超の JS は分割。requestIdleCallback や setTimeout(fn, 0) を活用。

CLS（Cumulative Layout Shift）

CLS は読み込み中のレイアウトの「跳ね」。

目安 0.1 未満。0.25 超は要改善。

画像：width/height または aspect-ratio でサイズ確保。

フォント：font-display: swap に加え、size-adjust でシステムフォントとの差を抑える。

コードブロック：描画前に高さが不定だと下の要素が跳ねる。min-height や Skeleton で先にスペースを確保。

静的生成 vs 動的レンダリング

コンテンツ型ブログなら SSG が第一候補。Astro、Hugo、Next.js 静的エクスポートなど。サーバー応答が速く、JS 実行も少ないため LCP/INP に有利。

SSR が必要ならキャッシュを適切に設定し、毎回再計算しないように。

4. 三本柱統合：実践チェックリスト

理論のあとは、すぐ実行できるチェックリスト。優先度順に並べています。

内部リンク（10 項目）

チェック項目ツール/方法所要時間
1. 孤立ページ検出Screaming Frog / Ahrefs Site Audit30 分
2. ピラーページ特定手動でテーマ整理1 時間
3. ピラークラスタリンククローラーで双方向確認30 分
4. アンカーテキスト手動サンプル + Search Console30 分
5. ナビ項目数5〜7 項目10 分
6. クリック深度重要コンテンツ ≤3 クリック30 分
7. パンくず全ページに実装20 分
8. シリーズナビ前後リンクの完全性30 分
9. カテゴリ/タグリンクコンテンツへ正しくリンク20 分
10. リンク切れSearch Console + ツール30 分

孤立ページ検出が最重要。Screaming Frog の「Orphan Pages」や Ahrefs で洗い出し、削除するかピラーへリンクします。

構造化データ（8 項目）

チェック項目ツール/方法所要時間
1. Article 必須フィールドGoogle Rich Results Test各 5 分
2. 著者情報Person Schema + 著者ページ30 分
3. 日付の正確性実際の公開日と照合10 分
4. パンくず SchemaBreadcrumbList 検証20 分
5. Organizationロゴ + 名称20 分
6. リッチリザルトRich Results Test各 5 分
7. Search Console レポートエラー監視週 5 分
8. 配置位置head または body 末尾10 分

headline、author、datePublished、dateModified、image、publisher は欠けないように。公開前に各記事を検証。

Core Web Vitals（12 項目）

チェック項目ツール/方法所要時間
1. PageSpeed Insights全体 LCP/INP/CLS10 分
2. Search Console CWVURL 単位10 分
3. LCP 要素特定Chrome DevTools20 分
4. 画像プリロードpreload タグ30 分
5. 画像最適化WebP + 圧縮各 20 分
6. CDN キャッシュCloudflare/Vercel30 分
7. コードブロック静的プリレンダリング1 時間
8. 長タスクChrome DevTools30 分
9. イベント処理デバウンス/スロットル1 時間
10. 画像サイズwidth/height / aspect-ratio30 分
11. フォントfont-display + size-adjust1 時間
12. 動的コンテンツSkeleton / min-height1 時間

PageSpeed Insights から始め、数値と改善提案を確認。不合格なら項目ごとに深掘り。

ROI：何から始める？

最適化期間期待効果
構造化データ1〜2 週間CTR 10〜15% 向上
内部リンク2〜4 週間トラフィック 15〜20% 向上
Core Web Vitals2〜3 週間ランキング 5〜10% 向上

順序は構造化データ → 内部リンク → Core Web Vitals の継続監視。Schema は変更が小さく効果が早い。内部リンクは設計の見直しが必要。CWV は一度きりではありません。

5. Astro ブログ実践

Astro なら SEO 最適化の多くを自動化できます。「性能優先」の設計と Content Collections、画像最適化が、前述の課題に直結します。

Content Collections で Schema 自動生成

frontmatter スキーマを定義し、レイアウトで JSON-LD を描画：

---
title: "技術ブログ SEO 三本柱実践"
description: "内部リンク、構造化データ、Core Web Vitals 最適化"
pubDate: 2026-04-26
category: "media"
tags:
  - "SEO最適化"
  - "コンテンツ運営"
author: "default"
heroImage: "/images/media/tech-blog-seo.jpg"
---
---
// src/layouts/PostLayout.astro
const { title, description, pubDate, heroImage } = Astro.props;
const schema = {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": title,
  "description": description,
  "datePublished": pubDate.toISOString(),
  "image": heroImage,
  // ... その他のフィールド
};
---

<script type="application/ld+json" set:html={JSON.stringify(schema)} />

記事ごとに Schema が自動生成され、追加記事でも忘れません。

画像最適化：@astrojs/image

  • WebP 自動変換
  • レスポンシブサイズ生成
  • 遅延読み込みデフォルト
  • サイズ推論で CLS 対策
// astro.config.mjs
import { defineConfig } from 'astro/config';
import image from '@astrojs/image';

export default defineConfig({
  integrations: [
    image({
      serviceEntryPoint: '@astrojs/image/sharp',
    }),
  ],
});

<Image /> が最適化画像と width/height を出力し、CLS 問題を大幅に減らせます。

シリーズ記事の自動ナビ

series: "seo-analytics-guide"
seriesOrder: 4
---
// src/components/SeriesNav.astro
import { getCollection } from 'astro:content';

const { series, currentOrder } = Astro.props;
const allPosts = await getCollection('posts', ({ data }) => data.series === series);
const sorted = allPosts.sort((a, b) => a.data.seriesOrder - b.data.seriesOrder);
const prevPost = sorted.find(p => p.data.seriesOrder === currentOrder - 1);
const nextPost = sorted.find(p => p.data.seriesOrder === currentOrder + 1);
---

<nav class="series-nav">
  {prevPost && <a href={`/posts/${prevPost.slug}`}>前の記事：{prevPost.data.title}</a>}
  {nextPost && <a href={`/posts/${nextPost.slug}`}>次の記事：{nextPost.data.title}</a>}
</nav>

レイアウトに置くだけで、シリーズナビが自動完成。

SSG の性能メリット

Astro はデフォルト SSG。JS オーバーヘッドが少なく、応答も速い。

実測：LCP 平均 1.5s、INP はほぼ 0、CLS 0.05 以下。以前の Next.js SSR より明らかに良好。

ログインやリアルタイムデータが不要なコンテンツブログなら、SSG を強く推奨します。

結論

技術ブログ SEO は継続的な取り組みですが、三本柱を一度整えれば保守コストは低い。

ステップ 1：Rich Results Test で Schema を確認。なければ Article Schema を追加。半日で CTR 改善の兆しが見えます。

ステップ 2：Screaming Frog / Ahrefs で孤立ページを洗い出し、削除または関連記事へリンク。1 週間以内にトラフィック変化が出やすい。

ステップ 3：PageSpeed Insights で CWV を分析。第 4 章のチェックリストで改善。2〜3 週間かかっても価値あり。

週 30 分、3 ヶ月続ければ検索可視性は確実に上がります。私のブログもこの順で改善してきました。

Astro 利用者は第 5 章のテンプレートをそのまま流用できます。ドメインと著者情報を差し替えるだけです。

技術ブログ SEO 三本柱の最適化フロー

内部リンク、構造化データ、Core Web Vitals を体系的に最適化する手順

⏱️ 目安時間: 180 分

  1. 1

    ステップ1: 構造化データ Schema を追加

    効果が最も早い項目。1〜2 週間で完了：

    • Google Rich Results Test で既存ページに Schema があるか確認
    • 各記事に Article Schema を追加（必須：headline、author、datePublished、dateModified、image、publisher）
    • パンくず用 BreadcrumbList Schema を追加
    • 著者表示用 Person Schema を追加
    • すべての Schema が正しく解析されるか検証
    • 期待効果：CTR 10〜15% 向上
  2. 2

    ステップ2: 内部リンク構造を最適化

    コンテンツ設計の見直し。2〜4 週間：

    • Screaming Frog または Ahrefs Site Audit で孤立ページを検出
    • ピラーコンテンツ（各テーマの「総合ガイド」記事）を特定
    • ピラークラスタの双方向リンクを構築
    • アンカーテキストを最適化。「ここをクリック」ではなく説明的な文言に
    • 重要コンテンツが 3 クリック以内で到達できるように
    • リンク切れを確認・修正
    • 期待効果：トラフィック 15〜20% 向上
  3. 3

    ステップ3: Core Web Vitals 指標を最適化

    継続的な監視と改善。初期完了まで 2〜3 週間：

    • PageSpeed Insights で LCP/INP/CLS のベースラインを取得
    • LCP：画像を WebP に、CDN 設定、ファーストビュー画像をプリロード
    • INP：デバウンス、長タスクの分割、非同期 DOM 更新
    • CLS：画像サイズ確保、フォント読み込み戦略、コードブロック高さの確保
    • SSG フレームワーク（Astro など）を優先
    • 期待効果：ランキング 5〜10% 向上
  4. 4

    ステップ4: 継続監視と改善

    長期モニタリング。週 30 分：

    • Google Search Console で構造化データエラーを監視
    • Search Console の Core Web Vitals レポートを定期確認
    • 毎月、内部リンクの健全性（孤立ページ、リンク切れ）をレビュー
    • 新記事公開時に Schema テンプレートを自動適用
    • データに基づき最適化の優先順位を調整

FAQ

技術ブログ SEO はどの柱から始めるべき？
おすすめ順序は、構造化データ → 内部リンク → Core Web Vitals です。構造化データは変更が小さく効果が早い（1〜2 週間、CTR 10〜15% 向上）。内部リンクはコンテンツ設計の整理が必要（2〜4 週間、トラフィック 15〜20% 向上）。Core Web Vitals は継続的な改善項目（2〜3 週間、ランキング 5〜10% 向上）。
内部リンクのピラークラスタ構造とは？どう実装する？
ピラークラスタはコンテンツの組み方です：

• ピラーコンテンツ：テーマの「総合ガイド」（例：「React 完全ガイド」）
• クラスタコンテンツ：ピラー配下の個別記事（例：「useState 詳解」「useEffect ベストプラクティス」）
• 双方向リンク：ピラーから全クラスタへ、クラスタからピラーへ

手順：ピラーテーマを特定 → 各ピラーに総合記事を作成 → クラスタ記事を量産 → 双方向リンクを張る
技術ブログに必須の Schema は？
最低 4 種類：

• Article Schema：タイトル、著者、日付、カバー画像など
• BreadcrumbList Schema：サイト階層の理解を助けるパンくず
• Person Schema：著者情報で E-E-A-T シグナルを強化
• Organization Schema：ブログのブランド情報（あれば）

Google Rich Results Test で検証し、公開後は Search Console でエラーを監視してください。
Core Web Vitals の 3 指標の閾値と最適化方法は？
閾値：

• LCP（最大コンテンツ描画）：良好 <2.5s、要改善 >4s
• INP（操作応答）：良好 <200ms、要改善 >500ms
• CLS（レイアウト安定性）：良好 <0.1、要改善 >0.25

技術ブログの定番対策：WebP 化とサイズ確保、コードブロックの静的プリレンダリング、フォント戦略、SSG（Astro は特に有利）。
Astro は SEO 面でどんな強みがある？
主な強み：

• Content Collections：Article Schema を自動生成
• @astrojs/image：WebP 変換、遅延読み込み、サイズ推論（CLS 対策）
• SSG モード：JavaScript オーバーヘッドが少なく、LCP と INP に有利
• シリーズナビ：前後記事リンクをコンポーネントで自動生成

実測例：Astro ブログで LCP 平均 1.5s、INP はほぼ 0、CLS は 0.05 以下。
孤立ページの検出と修正方法は？
手順：

• ツール：Screaming Frog の「Orphan Pages」または Ahrefs Site Audit
• 検出：URL を入力し、内部リンクのないページを一覧化
• 対処：
- 古い内容：削除またはアーカイブ
- 価値ある内容：関連ピラー記事へリンク
- 重複：301 リダイレクトまたは canonical
• 予防：新記事公開時に最低 1 本の内部リンクを張る
技術ブログのアンカーテキストはどう書く？
ベストプラクティス：

• 「ここをクリック」「詳細を見る」などの無意味な文言は避ける
• リンク先がわかる説明的なテキストにする
• 例：「ここをクリック」→「React 状態管理チュートリアル」
• 文脈に自然に組み込み、キーワード詰め込みはしない
• 同一 URL でもアンカーは表現を変えてよい

説明的なアンカーは SEO とクリック率の両方を高めます。

7分で読めます · 公開日: 2026年4月26日 · 更新日: 2026年6月15日

Easton Easton
デジタルクリエイション
シリーズの読書導線 第 3 / 3 記事

SEOアナリティクスツール実践ガイド

検索からこのページに来た場合は、前後の記事もあわせて読むと同じテーマの理解がかなり早く深まります。

シリーズ全体を見る

前の記事

GA4 レポート設定実践：クリエイター必見の 12 指標

GA4 レポート設定から指標の読み方まで。5 つのコアレポートと 12 指標に絞り、週次データ振り返りのワークフローを構築し、データでコンテンツ改善の方向性を決める完全ガイド。

第 2 / 3 記事

次の記事

現時点ではこれがシリーズの最新記事です。

関連記事

G
2026年4月29日 デジタルクリエイション

GA4 高度設定の実践：イベントトラッキングとコンバージョンファネル完全ガイド

GA4 の高度設定画面。イベントトラッキングとコンバージョンファネル分析を表示
2026年4月29日 デジタルクリエイション

GA4 高度設定の実践：イベントトラッキングとコンバージョンファネル完全ガイド

S
2026年6月14日 デジタルクリエイション

SaaSの海外展開：ChatGPTとAdsterraでMVPの売り上げテストを低コストで行う方法

SaaS海外展開ガイド：ChatGPTで売り上げ仮説と広告文案を生成、Adsterraでキャンペーンを作成して実際のトラフィックを獲得、CTR、コンバージョン率、フィードバック品質を分析し、少額でMVP売り上げを迅速検証
2026年6月14日 デジタルクリエイション

SaaSの海外展開：ChatGPTとAdsterraでMVPの売り上げテストを低コストで行う方法

技
2026年5月26日 デジタルクリエイション

技術ブログの高インプレッション低クリックをどう直す？GA/GSC 週次運用 SOP

GA/GSC データ分析画面のスクリーンショット。高インプレッション低クリックページの診断フローと最適化効果の比較チャート
2026年5月26日 デジタルクリエイション

技術ブログの高インプレッション低クリックをどう直す？GA/GSC 週次運用 SOP

コメント

GitHubアカウントでログインしてコメントできます

広告🔥 需要のない製品に3ヶ月も無駄にするな！少額の予算で Adsterra を使い、SaaS の訴求を今すぐ検証 ➡️