内部リンク実装の手順とHTMLコード例|SEOとAI検索で評価される設定

内部リンク実装の手順とHTMLコード例|SEOとAI検索で評価される設定

内部リンクの実装とは、同一サイト内のページ同士を`a`タグと`href`属性で結び、クローラビリティと回遊性を高める作業です。テキストリンク・画像リンク・ボタン・ブログカード・ページ内リンクの5種類を、目的に合ったHTMLコードで正しく設置することが基本になります。本記事はコピペで使えるコード例に加え、SEOとAI検索(LLMO/GEO)の両面で評価される設定ルール、飛ばない・ずれるといった不具合の対処までを一気通貫でまとめました。実装を今日中に完了させ、評価される構造へ整えたい方に向けた実務ガイドです。

この記事でわかること
  • 目的別のコピペ可能なHTMLコード例
  • ページ内リンクの不具合を直す設定
  • SEOとAI検索で評価される設計原則

テキスト・画像・ボタン・ブログカード・ページ内リンクを正しいHTMLで実装できます。飛ばない、位置がずれるといった不具合はCSS一行で解決でき、アンカーテキスト最適化や正規URLへのリンクなど評価される設定判断も身につきます。

目次

内部リンクの実装とは?外部リンクとの違いは?

内部リンクの実装とは?外部リンクとの違いは?

内部リンクの実装とは、同じサイト内のページ同士を`a`タグでつなぐ設置作業のことです。外部リンクが別ドメインへ向かうのに対し、内部リンクはドメイン内の回遊とクロールを設計する役割を担います。まずは3つのリンクの違いを整理しておきましょう。

内部リンクは検索エンジンのクローラーにページの関係性を伝え、ユーザーの回遊率や滞在時間を高めます。加えて生成AIが文脈を理解する手がかりにもなるため、「貼り方」だけでなく「実装まで正しく行う」ことが評価に直結します。

内部リンクとページ内リンクの違いは?

内部リンクは別ページへ、ページ内リンクは同じページ内の特定位置へ移動する仕組みです。内部リンクはサイト構造を、ページ内リンクは1ページ内の可読性を設計する役割を持ちます。目的が異なるため、実装するHTMLも使い分けが必要です。共起語で言えば、内部リンクはクローラビリティやリンクジュース分配に関わり、ページ内リンクはアンカーリンクとして目次や長文記事の導線に使われます。

なぜ実装まで正しく行う必要があるのか?

概念だけ理解しても、`href`の指定ミスやalt漏れがあると評価は伝わらないためです。正しいHTML実装こそが、SEOとAI検索の評価を受け取るための土台になります。特に近年はAI検索(生成AI)流入が増え、GEO/LLMO対策は関連性や分かりやすい構造という点でSEOと大きく重なると整理されています(ミエルカ)。実装品質が両方の入口になるわけです。

TechSuite株式会社の「AI検索パートナーズ」は、サイト・コンテンツ・検索導線・組織運用の構造を捉え、業種や課題に合わせて内部リンク設計まで顧客ごとに個別最適化しています。テンプレートではなく、ボトルネックを特定して実行まで伴走する進め方です。

内部リンクは概念より実装が本番。正しく貼ってこそ評価が届くと覚えておきましょう。

内部リンクのHTMLコード例は?種類別に解説

内部リンクのHTMLコード例は?種類別に解説

内部リンクの基本は`a`タグと`href`属性で、テキスト・画像・ボタン・ブログカードの4種類をコピペで実装できます。テキストリンクの基本形は<a href=”https://example.com/target-page/”>アンカーテキスト</a>で、画像リンクは`a`タグ内に`img`を入れる形が定番です(CROCO)。以下で目的別に見ていきましょう。

まずは種類ごとの特徴を表で整理します。設置する場所や意図に応じて選ぶと、過不足のない導線になります。

種類主な用途要点
テキストリンク本文中の文脈リンク具体的なアンカーテキスト
画像リンクバナー誘導alt属性を必ず設定
ボタンCTA導線視認性を高める
ブログカード関連記事の紹介タイトルが伝わる

テキストリンクの基本形はどう書く?

最もシンプルで、`a`タグの`href`に遷移先URLを入れ、囲んだ文字がリンクになります。テキストリンクは文脈に溶け込み、内容が伝わる語をアンカーテキストにできる点が強みです。記述は<a href=”https://example.com/guide/”>内部リンクの設計手順</a>のように、リンク先が想像できる言葉を選びます。曖昧な「こちら」ではなく、キーワードを含む具体的な表現にすると、リンク先の内容を検索エンジンにも伝えられます。

画像・バナーリンクはどう実装する?

`a`タグの中に`img`要素を入れ、`alt`属性で画像の内容を説明します。画像リンクにはaltを適切に設定することで、テキストと同様に文脈を検索エンジンへ伝えられます。記述例は<a href=”https://example.com/lp/”><img src=”banner.jpg” alt=”内部リンク実装ガイドのバナー”></a>です。alt属性はアクセシビリティにも寄与し、画像が表示されない環境でも意味が伝わります。バナーやアイキャッチには必ず設定しましょう。

ボタンとブログカードはどう作る?

ボタンは`a`タグにclassを付けCSSで装飾し、ブログカードはタイトルや抜粋を含む囲み型リンクにします。CTAはクリックされやすい位置に置き、ブログカードは記事タイトルが伝わる文言を含めると効果的です。ボタンは<a href=”/contact/” class=”btn”>お問い合わせ</a>のように書きます。WordPressやSWELLなどのブロックエディタでは、ブログカードや関連記事ブロックを使えばHTMLを書かずに設置でき、実装が簡単です。

TechSuite株式会社の「AI検索パートナーズ」は、AIを活用した高度なコンテンツ制作の仕組みを「バクヤスAI記事代行」で培っており、その制作エンジンを転用して検索意図の分解に沿った内部リンク設計とコンテンツを高速に整えられます。導線とコンテンツを同時に最適化できる点が特徴です。

種類別コード実装のチェックリストです。

  • hrefに正しいURLを指定した
  • 画像リンクにaltを設定した
  • アンカーテキストが具体的である
  • ボタンは視認できる位置にある

4種類のコードは目的で使い分けるのがコツ。altとアンカーテキストは特に丁寧に。

AI検索パートナーズでは、
AIに”選ばれる”ための戦略設計から実行まで支援!

ページ内リンクの実装と不具合対処はどうする?

ページ内リンクの実装と不具合対処はどうする?

ページ内リンクは着地点に`id`を設定し、リンク元を`href=”#id”`で指定するのが基本手順です。HTML5では`name`より`id`が推奨され、`h2`や`div`など任意の要素に付与できます(GMO TECH)。目次や長文記事の導線として実装しましょう。

不具合の大半は「飛ばない」と「位置がずれる」の2系統です。原因が明確なので、順に切り分ければ短時間で解決できます。以下で手順とコードを示します。

id設定とhref指定の基本手順は?

着地させたい見出しに`id`を付け、リンク元は`#`付きで同じ名前を指定します。着地点は<h2 id=”section1″>、リンク元は<a href=”#section1″>目次項目</a>という対応で動きます。HTML5では`name`属性より`id`が推奨されており、見出しだけでなく`div`など任意の要素にも付与できます。目次から本文へ、本文からページ上部へと双方向に設計すると、長文でも読者が迷いません。

WordPressやスムーススクロールはどう設定する?

WordPressは見出しブロックの「HTMLアンカー」に任意の文字列を入れるだけでid設定が完了します。CSSにscroll-behavior: smoothを一行加えると、なめらかにスクロールする動きを実装できます。JavaScriptを使わずCSSだけで滑らかな移動を実現でき、実装負荷が小さいのが利点です。ブロックエディタなら目次ブロックが自動でページ内リンクを生成するため、手書きのHTMLは最小限で済みます。

飛ばない・ずれるときの原因と対処は?

飛ばない主因は「#の付け忘れや付け間違い」「idの重複」「jQuery mobileの利用」で、まず#の有無を確認します(GMO TECH)。固定ヘッダーで着地位置が隠れてずれる問題は、CSSのscroll-margin-topを対象要素に指定すると一行で解決します。scroll-margin-top: 80px;のようにヘッダー高さ分を確保するのが定石です(mucca design)。ページ全体へ効かせたい場合はscroll-padding-topを使います。

TechSuite株式会社の「AI検索パートナーズ」は、生成AIが引用・推薦する仕組みを構造化データやエンティティ認識といった技術面から捉え、ページ内リンクや見出し設計を含めた一次情報設計まで踏み込んで支援します。仕様変化にも研究とデータで追従します。

症状主な原因対処
飛ばない#の記述ミスhrefの#を確認
飛ばないidの重複id名を一意にする
位置がずれる固定ヘッダーscroll-margin-top

ページ内リンクは「idと#」が基本。ずれはCSS一行で直せると知っておくと安心ですね。

AI検索パートナーズでは、AI検索の専門知識と支援実績を持つ専任コンサルタントが、AIに“引用される・選ばれる”ための戦略設計からコンテンツ最適化、効果測定・改善まで一気通貫でご支援いたします。
ご興味のある方は、ぜひ資料をダウンロードして詳細をご確認ください。

SEOとサイト構造で評価される設定ルールは?

SEOとサイト構造で評価される設定ルールは?

評価される内部リンクは、具体的なアンカーテキスト・正規URLへのリンク・dofollow・画像altという4点を満たします。加えて、サイト全体を3クリック以内で到達できる階層に設計することが理想とされています(CROCO)。設定と構造の両輪で考えましょう。

内部リンクを通じてリンクジュース(SEOパワー)が分配され、どこからもリンクされない孤立ページは評価が伝わりにくくなります(LANY)。順位を上げたいページへ意図的にリンクを集める発想が重要です。

アンカーテキストと正規URLはどう設定する?

「詳しくはこちら」を避け、キーワードを含む具体的な語をアンカーテキストにします。リンク先の内容が伝わる語を使い、リンクは正規URLへ向け、リンク先には自己参照canonicalを設定します。曖昧な表現はリンク先の主題を検索エンジンに伝えられず、機会損失になります。パラメータ付きURLや重複URLではなく、canonicalで指定した正規URLへ統一してリンクすることで、評価の分散を防げます。

リンク構造はどう設計する?

記事型メディアはトピッククラスターモデル、データベース型やサービスサイトはピラミッド型が定石です。ピラーページとクラスターページを相互リンクで束ね、テーマの網羅性を検索エンジンに示します。関連性の高いページ同士をつなぐことが前提で、クリックされやすい位置のリンクほど価値が高いというリーズナブルサーファーモデルも意識します。LLMO対策の具体的な進め方とあわせて、重要ページへの導線を設計するとよいでしょう。

設置場所ごとの実装ポイントは?

効果的な設置場所はグローバルナビ・パンくずリスト・サイドバー/フッター・記事内で、関連箇所のそばに置くとクリックされやすくなります(SEO HACKS)。パンくずリストとグローバルナビは階層を伝え、本文内の文脈リンクは回遊を生む主役です。HTMLサイトマップは全ページへのクロール経路を補い、孤立ページの発生を防ぎます。役割の違う場所を組み合わせると、構造が立体的になります。

TechSuite株式会社の「AI検索パートナーズ」は、露出や順位そのものより受注という成果に直結させることを重視しており、AI検索経由での受注率は従来のSEO経由の約3倍という実績があります。構造設計も最終的な成果から逆算して行います。

評価される設定ルールのチェックリストです。

  • アンカーテキストが具体的である
  • 正規URLへリンクしている
  • 基本はdofollowになっている
  • 孤立ページを作っていない

設定ルールと構造設計はセット。重要ページへ評価を集める発想が効いてきます。

AI検索で引用される内部リンクとNG実装は?

AI検索で引用される内部リンクとNG実装は?

AI検索で引用されやすい内部リンクは、明確なアンカーテキストと関連性の高い文脈でつながれた構造を持ちます。逆に、隠しリンクやキーワード乱用、リンクの詰め込みはスパムとされペナルティ対象になります(SEO HACKS)。評価される型と避ける型を対で押さえましょう。

GEO/LLMOはSEOと本質的に重なる部分が大きく、関連性・分かりやすい構造・明確なリンク文脈という土台は共通します。内部リンクの整備は、そのままAI検索最適化の一部として機能します。

なぜ明確なアンカーテキストが引用に効くのか?

生成AIはリンク周辺の文脈から、ページ同士の意味的な関係を推測するためです。具体的なアンカーテキストは、AIにリンク先の主題とエンティティを明確に伝えます。関連ページを文脈でつなぐ構造は、AIがテーマの一貫性を理解する助けになり、引用や推薦の判断材料になります。GEO(生成エンジン最適化)の考え方AI検索対策の進め方とあわせて、意味のつながりを設計するとよいでしょう。

やってはいけないNG実装とは?

隠しテキストや隠しリンク、アンカーテキストへのキーワード乱用、リンクの詰め込みはスパムとして扱われます。貼りすぎや関連性のないリンク、リンク切れは評価を下げ、AIの文脈理解も妨げます。Googleは1ページのリンク数を妥当な範囲に抑えるよう示しており、極端に多すぎない限りは問題ないものの、無関係なリンクの乱立は逆効果です。関連性を軸に、必要な導線だけを残す姿勢が安全です。

実装後の検証はどう行う?

Googleサーチコンソールでクロール状況やインデックスを確認し、リンク切れや孤立ページを点検します。内部リンク改善の実務は、関連ページへのリンクを増やし、アンカーテキストを見直し、リンク切れを直すことに集約されますTechnical SEO)。公開後は定期的にリンク切れと孤立ページをチェックし、構造が崩れていないか運用で維持します。検証を仕組み化すると評価の目減りを防げます。

TechSuite株式会社の「AI検索パートナーズ」は、自社サイトでAI Share of Voiceが高水準にあり、支援事例でAI Overviewの引用率を改善した実績を持ちます。内部リンクの文脈設計を含め、引用されやすい構造づくりを支援します。

AI検索対応と検証のチェックリストです。

  • 関連性の高いページ同士をつないだ
  • 隠しリンクや詰め込みをしていない
  • リンク切れを修正した
  • サーチコンソールで確認した

AIに引用される内部リンクは、明確な文脈と関連性が命。NGを避けつつ検証を回しましょう。

よくある質問

テキストリンクとブログカードはどちらがSEOに良いですか

本文の文脈で自然につなぐならテキストリンク、関連記事をまとめて示すならブログカードが向いています。両者に優劣はなく、内容が伝わるアンカーテキストや明確なタイトルであることが評価の鍵です。設置意図で使い分けるのが実務的です。

内部リンクは何本まで貼ってよいですか

Googleは1ページのリンク数を妥当な範囲に抑えるよう示しており、最大で数千個程度までとされています。極端に多すぎない限りペナルティ対象にはなりませんが、無関係なリンクの乱立は避け、関連性を基準に必要な導線だけを残すことが望ましいです。

内部リンク対策と外部リンク対策はどちらが重要ですか

どちらも役割が異なり優先順位は一概に決められませんが、内部リンクは自分でコントロールできる分、着手しやすく改善効果を得やすい施策です。まずは内部リンク構造を整え、正規URLへのリンクや孤立ページの解消から進めるとよいでしょう。

ページ内リンクが飛ばないときはまず何を確認しますか

最初にhrefの#の有無と、着地点のidが一致しているかを確認します。多くの不具合は#の付け忘れやidの重複が原因です。固定ヘッダーで位置がずれる場合はCSSのscroll-margin-topで調整できます。

まとめ

内部リンクの実装は、テキスト・画像・ボタン・ブログカード・ページ内リンクを目的別に正しいHTMLで設置することが出発点です。画像リンクのalt、具体的なアンカーテキスト、正規URLへのリンクといった基本を満たすことで、SEOの評価が正しく伝わります。

ページ内リンクはidと#が基本で、飛ばない・ずれる不具合はCSS一行で解決できます。サイト全体では3クリック設計やトピッククラスターで重要ページへ評価を集め、孤立ページをなくすことが効果的です。

さらに明確な文脈と関連性を持つ内部リンクは、AI検索での引用にも寄与します。隠しリンクや詰め込みを避け、公開後の検証を仕組み化することで、SEOとAI検索の両面で評価される構造を維持できます。

参考にした情報源

参考にした情報源
監修者情報

TechSuite株式会社
COO AI×マーケティング事業統括

倉田 真太郎

大学在学中よりWEBディレクターとして実務経験を開始。生成AI活用型SEO記事代行事業を立ち上げ、同カテゴリ内で市場シェアNo.1を獲得。同サービスで30,000記事超のAIライティング実績。0から1年間で月間300万PVのメディアを立ち上げ、月間1億円超の売上創出に寄与した経験を有する。

AI検索パートナーズでは、AI検索の専門知識と支援実績を持つ専任コンサルタントが、AIに“引用される・選ばれる”ための戦略設計からコンテンツ最適化、効果測定・改善まで一気通貫でご支援いたします。
ご興味のある方は、ぜひ資料をダウンロードして詳細をご確認ください。

Form CTA
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

製品・サービス

目次