WordPressテーマのSWELLを入れてみたものの、「外部サイトへのリンクってどうやって貼ればいいの?」と止まってしまっていませんか。
この記事では、SWELLで外部リンクを貼る基本から、テキスト・画像・ボタン・関連記事ブロックまで、よく使うパターンをまとめて紹介します。
一言でまとめると「SWELLの標準機能だけで、外部リンクまわりはほとんど完結するので、よく使う型さえ覚えればOK」です。
SWELLで外部リンクを貼る前に知っておきたい基本

ここからは具体的な貼り方に入っていきますが、その前に「そもそも外部リンクとは何か」を軽く整理しておきます。内部リンクとの違いや、SEOとの関係をざっくりつかんでおくと、あとでどの貼り方を選ぶか決めやすくなります。
内部リンクと外部リンクの違いをサクッと整理
まずは、よく混ざりがちな内部リンクと外部リンクの違いです。
| 項目 | 内部リンク | 外部リンク |
|---|---|---|
| 行き先 | 自分のサイト内のページ | 他のサイトや別ドメイン |
| 主な目的 | サイト内を回遊してもらう | 参考情報や公式情報に案内する |
| SEOのイメージ | 自分のサイト内で評価を回す役割 | 相手サイトに評価の「票」を送るイメージ |
| 代表例 | 関連記事へのリンク、カテゴリーページ | 公式サイト、引用元記事、アフィリエイトリンク |
この記事で扱うのは右側の外部リンクです。
とはいえ、内部リンクとのバランスもSEOでは大事なので、「内部リンクは自分のサイトを回ってもらうため」「外部リンクは補足情報や商品紹介のため」というイメージを持っておくと判断しやすくなります。
外部リンクがSEOとユーザーに与える影響
外部リンクというと「出しすぎると検索評価が落ちそう」と感じる人もいますが、ポイントを押さえていればむしろプラスに働きます。
- 信頼できるサイトへの外部リンクは、「きちんと調べているサイトだ」という安心感につながる
- 公式サイトや一次情報に案内することで、あなたの記事の説得力も高まる
- ただし、怪しいサイトやスパムっぽいページへのリンクを大量に貼ると、マイナス評価につながる可能性がある
- アフィリエイトリンクは、rel属性でnofollowやsponsoredを付けておくのが一般的
外部リンクは「読者の役に立つ範囲で」「信頼できるサイトだけに絞って」貼る、くらいの感覚で使うとちょうどいいです。
SWELLでできる外部リンクの主なパターン
SWELLでは、外部リンクの貼り方だけでもいくつか選択肢があります。
- 本文中のテキストリンク
- 画像(バナー)にリンクを付ける画像リンク
- ボタンブロックやSWELLボタンで作るボタンリンク
- 関連記事ブロックで表示するブログカード型リンク
- リンクリストや投稿リストなど、一覧で外部リンクを並べる方法
このあと、それぞれの貼り方を順番に見ていきます。
「これが正解」というものではなく、記事の目的や読者の行動をイメージしながら、最適な型を選ぶのがコツです。
SWELLの外部リンク貼り方【テキストリンク編】

ここからは、具体的なSWELLでの外部リンクの貼り方を解説していきます。まずは一番ベーシックなテキストリンクです。ブログ初心者の方も、まずはこのテキストリンクをしっかり押さえておくと、ほかのパターンにも応用しやすくなります。
ブロックエディタでテキスト外部リンクを作る手順
Gutenberg(ブロックエディタ)でテキストの外部リンクを作る流れを整理しておきます。
| ステップ | 操作内容 | ポイント |
|---|---|---|
| 1 | リンクにしたい文章をドラッグで選択する | 「こちら」だけではなく、内容が分かるテキストを選ぶ |
| 2 | 選択したテキスト上に出るツールバーの「リンク」アイコンをクリック | 鎖のようなマークのボタンです |
| 3 | 外部サイトのURLを入力してEnterキーを押す | httpsから始まるURLをコピペするのが確実 |
| 4 | 必要に応じて「新しいタブで開く」をオンにする | 読者が元の記事に戻りやすくなる |
| 5 | アフィリエイトリンクなら詳細設定でrel属性も確認する | nofollowやsponsoredを付けておくと安心 |
私が最初につまずいたのは、「リンクアイコンがどこにあるか分からない」という点でした。
テキストを選択すると小さなツールバーがポンと出てくるので、その中の鎖マークを探してみてください。
新しいタブ・nofollowなどの細かい設定
外部リンクを貼るときによく聞かれるのが、「新しいタブで開いた方がいいのか」「nofollowはどこまで必要か」という話です。
- 参考情報に飛ばすようなリンク
基本的には新しいタブで開く設定にしておくと、読者があなたのブログに戻りやすくなります。 - アフィリエイトリンク
新しいタブで開く設定にしておきつつ、rel属性でnofollowやsponsoredを付けておくのが一般的です。 - 公式サイトなどへの案内リンク
広告ではないので、必ずしもnofollowは必須ではありませんが、新しいタブで開く方が読みやすい場面は多いです。
ブロックエディタでは、リンクの歯車マークや詳細設定から「新しいタブで開く」の切り替えができます。
SWELLでは、ボタンや関連記事ブロックなど一部のブロックで、ブロック設定のパネルからrel属性を指定できるようになっているので、コードを直接触らなくても設定しやすいです。
読まれるテキスト外部リンクのアンカーテキストのコツ
同じリンクでも、テキストの書き方次第でクリック率が変わります。
- 「こちら」「ここをクリック」だけにしないで、行き先が分かる言葉を入れる
- 「SWELL公式サイトはこちら」「WordPress公式の解説はこちら」など、一目でリンク先のイメージが伝わるようにする
- 前後の文章とつながる自然なフレーズにして、浮いたリンクにしない
- やたら長いアンカーテキストは読みづらいので、短めのフレーズに収める
私も昔は「詳しくはこちら」だらけの記事を書いていて、後から読み返すと自分でもどこに飛ぶのか分からなくなっていました。
読者の目線で一度読み直して、「リンク先が想像できるか」をチェックしてみるだけでも、アンカーテキストはかなり良くなります。
画像・ボタンでSWELL外部リンクを貼る方法

つぎは「文章だけだと少し寂しいな」と感じるときに便利な、画像リンクとボタンリンクです。商品紹介やサービス紹介に使う外部リンクを、見た目の印象から変えたいときに役立ちます。
画像(バナー)に外部リンクを設定する手順
アイキャッチ画像やバナー画像に外部リンクを付ける流れは次のとおりです。
| ステップ | 操作内容 | ポイント |
|---|---|---|
| 1 | 画像ブロックを追加し、使いたい画像をアップロードする | 商品バナーやサービスのロゴ画像などを用意しておく |
| 2 | 画像をクリックし、ツールバーの「リンク」アイコンを選択する | テキストリンクと同じ鎖マークです |
| 3 | 外部サイトのURLを入力してEnterキーを押す | アフィリエイトリンクの場合はコピペミスに注意 |
| 4 | ブロック設定から「新しいタブで開く」をオンにする | 外部サイトから戻りやすくするための設定 |
| 5 | 画像の「代替テキスト(alt)」も入れておく | 画像が何を表しているかを短く説明する |
画像リンクは目立つ一方で、ぱっと見では「どこに飛ぶのか」が分かりづらいこともあります。
そのため、画像の下に小さくテキストリンクを添えたり、「公式サイトへ」「詳細はこちら」など一言そえてあげると、読者が安心してクリックしやすくなります。
SWELLボタンでアフィリエイト外部リンクを貼る
SWELLには専用のボタンブロックが用意されていて、アフィリエイトリンクとの相性も良いです。
- ブロック追加ボタンから「SWELLボタン」または「ボタン」を選ぶ
- ボタンに表示したいテキスト(例:公式サイトを見る)を入力する
- ボタンを選択してリンクアイコンから外部URLを設定する
- 右側のブロック設定で色や角丸などデザインを調整する
- 必要に応じて「クリック率を計測する」や「新しいタブで開く」をオンにする
SWELLボタンにはクリック数やクリック率を計測する機能もあり、どの外部リンクが押されやすいかを数字で確かめることもできます。
ただ、ボタンを多用しすぎると「押してほしい感」が強くなりすぎるので、1記事につき数個までに絞ると読みやすくなります。
画像リンクとボタンリンクの使い分け
画像リンクとボタンリンクは、なんとなく好みで選びがちですが、役割を整理しておくと使い分けがしやすくなります。
| 用途 | 画像リンクが向いているケース | ボタンリンクが向いているケース |
|---|---|---|
| 商品・サービス紹介 | ビジュアル重視で雰囲気を伝えたいとき | レビューを読んだ後に最後のひと押しをしたいとき |
| 読者の印象 | パッと見で内容がイメージしやすい | 「ここを押せば行ける」と行動を促しやすい |
| レイアウト | 特集記事やランキング記事など、デザインを作り込みたいとき | ページの最後をスッキリ締めたいとき |
よくあるパターンとしては、「画像でイメージを伝えて、その下にボタンで外部リンクを置く」という2段構成です。
ブログ全体のデザインがゴチャつかない範囲で、自分のサイトの雰囲気に合う組み合わせを探してみてください。
SWELL関連記事ブロックで外部リンクをブログカード化する貼り方

関連記事ブロックで内部リンクと外部リンクを切り替える
関連記事ブロックの基本的な使い方は次のとおりです。
- ブロック追加から「関連記事」を選ぶ
- スタイル(ブログカード・スリム・テキスト)を選択する
- 内部リンクにしたい場合は、検索窓から自分のブログ記事タイトルを探して選ぶ
- 外部リンクにしたい場合は、URL入力欄に外部サイトのURLを貼り付ける
- ラベル(あわせて読みたいなど)やキャプションを好みに合わせて調整する
外部サイトをブログカード化した場合、多くの環境では自動的に別タブで開くようになっているので、読者が戻りやすい点でも安心です。
私も、長めの記事では重要な外部ページだけブログカード化して、それ以外はテキストリンクにする、といった形で使い分けることが多いです。
ブログカード・スリム・テキストの違い
関連記事ブロックには、いくつかの表示タイプがあります。
それぞれの特徴を簡単にまとめておきます。
| 表示タイプ | 見た目の特徴 | 向いている使い方 |
|---|---|---|
| ブログカード | サムネイル画像とタイトル、抜粋文が表示される | 特に目立たせたい外部リンクや、公式サイトへの誘導 |
| スリム | コンパクトなカードで、タイトル中心の表示 | 本文中に自然な流れで差し込みたいリンク |
| テキスト | シンプルなテキストリンクに近い見た目 | リンクが多いときや、目次のように並べたいとき |
外部リンクまで全部ブログカードにしてしまうと、どこまでが自分のサイトの記事なのかが分かりにくくなります。
例えば「内部リンクはブログカード」「外部リンクはスリムかテキスト」というように、自分なりのルールを決めておくと、デザインが安定して読者も迷いにくくなります。
ブログカードが表示されないときのチェックポイント
外部リンクをブログカード表示しようとしても、うまくカードにならないことがあります。
よくある原因をざっくりまとめておきます。
| 症状 | 考えられる原因 | 確認のポイント |
|---|---|---|
| タイトルやサムネイルが出ない | 相手サイトでOGPが正しく設定されていない | 他のSNSなどでも同じような表示になっていないか試す |
| URLを入れてもただのテキストになる | そのURLがブログカードの仕組みに対応していない | 自分の別記事のURLでも同じブロックで試してみる |
| デザインが崩れてしまう | テーマのカスタマイズやプラグインのCSSが干渉している | 一度プラグインやカスタマイズをオフにして確認する |
まずは自分の記事への内部リンクをブログカード表示してみて、問題なく表示されるか確認してみてください。
内部リンクのカード表示には問題がなく、特定の外部リンクだけおかしい場合は、相手サイト側の設定の影響という可能性が高いです。
その場合は、無理にブログカード化にこだわらず、テキストリンクやボタンリンクでシンプルに誘導してあげる方が、結果として親切なことも多いです。
SWELL外部リンクの貼り方とSEO・ユーザビリティのバランス

ここからは、テクニックというより「どれくらい外部リンクを貼るか」「どう見せるか」といった運用面の話です。SWELLでの外部リンクの貼り方を覚えたあと、読者目線で差がつきやすい部分なので、ざっと目を通してみてください。
外部リンクを貼るときに意識したいこと
外部リンクを増やしていくとき、私が意識しているのは次のような点です。
- そのリンクは本当に読者の役に立つかどうか
- 本文の流れの中で、自然なタイミングでリンクが出てくるかどうか
- 内部リンクより外部リンクばかり目立っていないか
- 広告やアフィリエイトリンクであることが、読者にとって分かりやすいか
アフィリエイトの外部リンクは、ボタンや派手な画像にするとクリックは増えますが、やりすぎると「売り込み感」が強くなってしまいます。
「ここまで読んだ人なら、きっとこのリンク先も知りたいはず」という位置を狙って、そっと置いてあげるくらいがちょうどいいバランスです。
内部リンクと外部リンクのデザインをどう差別化するか
SWELLはブログカードなどのデザインがきれいなので、つい内部リンクも外部リンクも同じ見た目にしてしまいがちです。
ですが、読者としては「この先も自分のサイトの中なのか」「全く別のサイトに移動するのか」が分かった方が安心です。
- 内部リンク
ブログカードスタイルで少し大きめに表示して、自分のサイトの導線だと分かるようにする。 - 外部リンク
スリムタイプやテキストタイプにして、主役になりすぎないように見せる。 - アフィリエイト外部リンク
ボタンや画像を使いつつ、小さく補足テキストを添えておく。
このように、内部リンクと外部リンクで「見た目の階層」に差をつけておくと、読者はどこをクリックしても迷いにくくなります。
運用で使えるSWELL外部リンクチェック表
最後に、記事を公開する前にサッと見直すときに使えるチェック表を置いておきます。
| チェック項目 | OKの状態 | NGの例 |
|---|---|---|
| URLの貼り間違いがないか | すべて正しい外部ページに飛ぶ | 404ページや違う商品ページに飛んでしまう |
| 新しいタブ設定 | 外部リンクは基本的に新しいタブで開く | 外部リンクなのに同じタブで開き、読者が戻りづらい |
| rel属性の設定 | アフィリエイト外部リンクにnofollowなどが付いている | 広告リンクなのにrelがまったく設定されていない |
| デザインバランス | 内部リンクと外部リンクの見た目がほどよく分かれている | 外部リンクのカードばかりが目立ち、記事の主役が分からない |
| アンカーテキスト | 行き先がイメージできる言葉になっている | 「こちら」「詳しくはこちら」だけのリンクがたくさんある |
記事を公開する前に、この表を上から順にチェックしていくだけでも、外部リンクまわりのトラブルをかなり減らせます。
よくある質問(SWELLの外部リンク貼り方)

最後に、SWELLで外部リンクを貼るときによくある質問を、Q&A形式でまとめます。
Q1. SWELLの外部リンク貼り方では、nofollowは必ず付けないといけませんか?
A. すべての外部リンクにnofollowが必須というわけではありません。
アフィリエイトリンクや、報酬が発生する広告リンクについては、rel属性でnofollowやsponsoredを付けておくのが一般的です。
一方で、公式サイトや参考文献など、純粋に読者のための案内リンクであれば、必ずしもnofollowを付ける必要はありません。
どちらにしても、「この外部リンクは何のために貼っているのか」が読者に説明できるかどうかを基準に考えると、迷いにくくなります。
Q2. SWELLで外部リンクを新しいタブで開くにはどうすればいいですか?
A. テキストリンク、画像リンク、SWELLボタンなど、基本的な考え方は同じです。
リンクを設定したあとに、リンクの詳細設定やブロックの設定パネルを開くと、「新しいタブで開く」系のスイッチやチェックボックスが表示されます。
そこをオンにしておくだけで、外部サイトへのリンクを別タブで開くことができます。
読者があなたの記事に戻りやすくなるので、外部サイトへ飛ばすリンクでは基本的にオンにしておくのがおすすめです。
Q3. SWELLで外部リンクをブログカード表示しようとしても、うまく表示されません
A. ブログカード表示は、あなたの設定だけでなく、相手サイト側の設定にも影響を受けます。
まずは、自分の別記事のURLを関連記事ブロックに設定してみて、内部リンクのブログカードが問題なく表示されるか確認してみてください。
内部リンクではきちんとカードが出るのに、特定の外部リンクだけ崩れる場合、そのサイトのOGP設定や仕組みが原因になっている可能性が高いです。
そのときは無理にカード表示にこだわらず、テキストリンクやボタンリンクでシンプルに案内した方が、読者にとっても分かりやすいことが多いです。
まとめ|SWELLの外部リンクの貼り方をマスターして読みやすい記事にしよう
この記事の内容を振り返っておきます
- SWELLには、テキスト・画像・ボタン・関連記事ブロックなど、外部リンクの貼り方がいくつも用意されている
- テキストリンクは「中身の分かるアンカーテキスト」「新しいタブ」「必要に応じたrel属性」を意識するのが基本
- 画像リンクやSWELLボタンを使うと、商品紹介やアフィリエイトリンクを視覚的に分かりやすくできる
- 関連記事ブロックで外部リンクをブログカード化すると、リンク先のイメージが伝わりやすくなり、クリックもされやすい
- 内部リンクと外部リンクでデザインに差をつけ、チェック表で最終確認すれば、読みやすく安全な記事に近づける
今日からできる一歩として、まずは自分のブログでよく読まれている記事を1本選んで、外部リンクまわりだけ見直してみてください。
テキストリンクの言葉を少し整えたり、目立たせたいリンクを関連記事ブロックに変えてみるだけでも、記事の印象は大きく変わります。
SWELLでの外部リンクの貼り方を少しずつ試しながら、自分のサイトに合ったスタイルを育てていきましょう。




