【UX向上】内部リンクと外部リンク（画像）の開き方使い分け術

内部リンク・外部リンク・画像リンクの最適な開き方｜Cocoon初心者向けUX改善ガイド

私もWordPressで記事を執筆中に内部・外部・画像リンクの開き方やテキスト・カードリンクの使い方など迷いますので私のノウハウを含め初心者にわかりやすく解説します。
WordPressで記事を書くとき、リンクの貼り方は読者の利便性（UX）に大きく影響します。

特に 内部リンク（サイト内リンク）、外部リンク（他サイトへのリンク）、画像リンク（画像をクリックして移動するリンク） の使い分けを正しく設定することで、読者の迷いが減り、SEOにも良い影響があります。

Cocoonではリンクの開き方を簡単に設定できますが、初心者向けサイトでは「どれを新しいタブで開くべきか？」がわかりにくいという声が多いです。

この記事では、内部リンク・外部リンク・画像リンクの最適な開き方と、Cocoonでの設定方法を初心者向けにわかりやすく解説します。

初心者の方でも、この記事を参考にサイト作成を進める手助けになれば幸いです。

こうしたトラブルは、WordPressの基本操作＋Cocoonの仕様を理解すればすべて解決できます。

この記事では、初心者でも迷わず設定できるように内部リンク・外部リンク・画像リンクの設定方法を解説し、さらに 実際に私が遭遇したトラブルとその解決方法も紹介します。

内部リンク・外部リンク・画像リンクの違い（初心者向けのやさしい説明）

私もWordPressを使い始めのころ、下記リンクの使い分けを知りませんでした。

まずはそれぞれのリンクの役割を下記に記載しました。

• 内部リンク：サイト内の記事へ移動するリンク。
• 外部リンク：他のサイトへ移動するリンク。
• 画像リンク：画像をクリックすると別ページへ移動するリンク。

この3つは目的がまったく違うため、開き方も変える必要があります。

内部リンクは“同じタブで開く”のが最適（UX向上）

私の過去の経験より、初心者向けサイトでは、内部リンクは 同じタブで開くのが最適です。
なぜ同じタブで開く方が最適かを、下記に詳しく解説します。

理由
メリット：同じタブで開くと、読者は「サイト内を移動している感覚」になります。スマホでは「同じタブの方がストレスがありません。」
デメリット：新しいタブが増えると、初心者は混乱しやすくなります。スマホでは「タブが増えると戻りづらくなります。」

サイトの回遊率が上がる

• 内部リンクはサイト内の導線です。
• 同じタブで開くことで、自然に記事を読み進められます。

SEOにもプラス

• 内部リンクはサイト構造をGoogleに伝える重要な要素です。
• 読者が自然に回遊することで滞在時間が伸び、SEOにも良い影響があります。

外部リンクは“新しいタブで開く”のが最適（離脱防止）

外部リンクは 新しいタブで開く のが最適です。

最適な理由は以下の通り。

読者があなたのサイトに戻りやすい

• 外部サイトに移動しても読者は、戻るボタンを押す必要がありません。
• 初心者でも戻り方がわかりやすく、そのままあなたのサイトから離れません。（離脱防止になります。）

読者の離脱を防げる

• 外部リンクを同じタブで開くと、あなたのサイトから完全に離れてしまいます。
• 新しいタブなら、読者は外部サイトのタブは閉じてもあなたのサイトを閉じません。

UX（ユーザーの利便性）が向上する

• 初心者は「どこから来たか」を忘れやすいです。
• 新しいタブなら迷わず戻れます。

信頼性が上がる

外部リンクは「補足情報」なので、別タブで開く方が自然です。

画像リンクの最適な使い方（内部・外部で使い分ける）

画像リンクは、内部リンク・外部リンクのどちらにも使えます。
しかし、画像リンクは「視覚的な誘導」になるため、使い方を間違えると読者が迷います。

内部リンクの画像は“同じタブ”

画像をクリックしてサイト内を移動する場合は、同じタブが自然です。

外部リンクの画像は“新しいタブ”

画像リンクは視覚的に強い誘導になるため、外部サイトへ移動する場合は新しいタブで開く方が最適です。

画像リンクで注意すべき点

• 画像リンクは「どこへ飛ぶか」がわかりにくい。（画像だけな為、具体的なリンク場所が判断しずらい。）
• 画像の著作権等の法規への注意が必要。
• 外部リンクの場合はアイコンや説明文を付ける。
• 内部リンクの場合は「詳しくはこちら」などのテキストを併用する。

画像だけでリンクを貼ると、初心者は迷いやすいため注意が必要です。

Cocoonでリンクの開き方を設定する方法

Cocoon設定ではリンクの設定を簡単に設定できます。

内部リンクを同じタブで開く設定

「新しいタブで開く」にチェックを入れない。（下図赤枠参照）

外部リンクを新しいタブで開く設定

「新しいタブで開く」にチェックを入れる。（下図赤枠参照）

私の場合、リンク先を画像にしたときは、WordPressのメディアライブラリーにアップロードした画像のURLまたはクラウドにアップした図のURLをテキスト文のリンクを貼るときに「新しいタブで開く」に✓しました。※クラウドにアップした画像は、アクセス権の設定が必要です。

Cocoonの自動設定（便利機能）

個別にリンク設定をした場合は、Cocoon設定では下図のように「変更しない」とする。
ただし私の場合、内部リンクはサイト内リンクで、外部リンクは外部サイトへのリンクなので、この設定を、内部リンク⇒「同じタブで開く」・外部リンク⇒「新しいタブで開く」にし一括設定しました。

参考：個別設定とCocoon設定が競合すると意図しない動作になるため注意してください。

リンク設定方法（内部・外部・画像・同じページ内）

ここでは、個別のリンクとは別に、グローバルメニューやフッター項目のリンクを「新しいページより開く」に設定する場合について解説します。
Cocoonテーマでは下記及び下図の設定を行うと完了します。

操作方法：「外観」⇒「メニュー」⇒オプション表示（右上）を展開し「リンクターゲットを✓」⇒「リンクを新しいタブで開く」

下図の「メニュー構造」内の「□リンクを新しいタブで開く」が表示されない場合：オプション表示⇒リンクターゲットに✓を入れてください。

フッターに固定ページリンクを貼る

私も初めてWordPressを使って固定ページのリンクを貼る場合で、「最近」のタブに固定ページが表示されなく焦ったので記載しました。
本当に初歩的で恥ずかしいのですが、下図の（「すべて表示」タブ）をクリックすると解決しました。

本当にはじめてWordPressを体験では、「普通の事ができなくストレス」になる事を実感した瞬間でもありました。

解決方法：メニュー編集画面で「すべて表示」タブを見ると表示されていました。（汗！

外部サイトおよび画像ファイルにリンク

外部サイトおよび画像ファイルを別ウィンドウで開くリンク設定方法。
自分のサイトから離脱してほしくない為、「新しいタブで開く」としました。

リンクの編集⇒高度の中の「新しいタブで開く」に✓を付け⇒「適用」をクリックする。

同じページ内にリンクする場合

ここでは目次のリンクとは別にどうしてもリンクさせたい項目が同一ページ内に存在しましたのでその時の設定方法などノウハウとして下記に記載します。

同じページにリンクを飛ばす場合、下図（赤枠）のようにリンク元・リンク先の設定が必要です。

リンク元の設定：リンク欄に「#ID名」を入力します。例）「#kino」（下図：「リンク元」の赤枠を参照ください。）
リンク先の設定：リンク先となるブロックをクリックし右側の「ブロック」⇒「高度な設定」⇒「HTMLアンカー」に上記のID名を記入する。例）「kino」（下図：「リンク先」の赤枠を参照ください。）

ただし、同じページで同一IDは使えません。（Webの標準ルールで決められている為。）

リンク設定で注意すべきポイント

内部リンクを新しいタブで開くのはNG

タブが増えすぎて読者が迷います。
スマホでタブが量産されると、ブラウザの「戻るボタン（←）」が効かなくなり、読者が元の記事に戻れなくなって離脱します。

ただし、申し込みフォームや、PDFのダウンロード、別記事を見ながら作業を進める『マニュアル記事』の場合は、新しいタブで開いた方が親切なケースもあります。

外部リンクを同じタブで開くのは離脱率が上がる

あなたのサイトから完全に離れてしまいます。
読者が別のサイトに行ってしまうと、あなたのブログの「滞在時間（セッション時間）」が極端に短くなります。

対策：WordPressのリンク挿入画面で「新しいタブで開く」にチェックを入れます。

画像リンクは「どこへ飛ぶか」を明確にする

画像だけのリンクは初心者が迷いやすいです。
画像だけのリンクは、視覚障害者向けの「画面読み上げブラウザ」や、Googleの検索ロボット（クローラー）が「どこに繋がっているリンクなのか」を正しく理解できません（アクセシビリティの低下）。

画像にリンクを貼る際は、「alt属性（代替テキスト）」に必ずリンク先の詳細を書き込むこと、または画像の下に「テキストリンク」も併記する。（下図参照）

外部リンクは信頼できるサイトだけにする

初心者向けサイトでは、外部リンクの品質がサイトの信頼性に影響します。
「誰にリンクを貼っているか（リンクの質）」も見ています。怪しいアフィリエイトサイトや低品質なサイトへリンクを貼っていると、あなたのブログの信頼性（E-E-A-T）まで連動して下がってしまいます。

リンク先を選ぶ基準として、「政府機関（.go.jp）」「企業の公式サイト」「大手メディア」など、信頼できる一次情報を発信しているURLを選びましょう。

テキストリンクとカード型リンクの使い分け

基本的にはテキストリンクにする。（同じテキストリンクでもテキストがリンク先項目名が表示されている方がSEOの観点では〇です。例）テキストが「ここにリンク」と表示され△△項目名がリンク先の場合表示名も「△△項目名」とした方が良いという意味です。）

カード型リンクは、目立つリンクにしたい場合はカード型にする。しかしGoogleクローラ等ロボットでは認識しない。人間の視認性では良い印象だが。

外部リンクは、カード型は避けた方が無難です。
理由：外部サイトの場合デザインや記事の説明が詳しくされているか不明な為です。

最適なリンクの開き方例（初心者向けサイト）

私の場合、リンクの開き方は、リンク先の状態で区別されると思うので下記のように定義しています。

リンク先	開き方
同じサイト内	同じタブで開く
外部サイト	新しいタブで開く
画像	新しいタブで開く

画像でYouTube動画などにリンクを貼るのは、著作権・商標権等に抵触する可能性があるので注意してください。
WordPressの標準機能でのYouTubeの埋め込みでは問題ありません。（ブロックエディターやカスタムHTML）

まとめ

最後まで記事を見ていただきありがとうございました。
この記事では、下記のようにWordPress初心者がつまずきやすい内部リンク・外部リンク・画像リンクの設定方法 を解説しました。必要な場面に遭遇しましたらご活用いただけると幸いです。
リンクは、スラッグに対してつきますので「非公開」及び「下書き」時点で記事に付けた内部・外部リンクは公開されてもリンク切れ等起こしません。（リンク先のURLが必ず存在するためです。リンクを貼った時期のURLと公開時期のURLが同じであることが前提です。）

• 内部リンク⇒同じタブで開く（回遊率UP）
• 外部リンク⇒「新しいタブで開く」（離脱防止）
• Cocoonで設定が自動化できる
• 画像リンク⇒内部は同じタブ／外部は新しいタブ
• 個別にリンクを設定しない場合は、Cocoonのリンク設定を「変更しない」にする。
• UX・SEOの両方が改善される

リンクの開き方を最適化するだけで、読者の迷いが減ります。

あわせて読みたい関連記事

ここでは本記事との、親子記事のリンクをまとめて下記に記載します。

全体の流れを詳しく知りたい方は、まず「【Cocoon】初心者が最初に設定すべき基本機能と重要項目まとめ」からご覧ください。