WordPressサイトでアンカーリンクを作成・設定する方法（4つの簡単なやり方）

アンカーリンクは、あまりたくさん議論されるトピックではありませんが、実はとても便利です。今回は、WordPressでアンカーリンクを作成する方法とそれを今後使用した方がよい理由を、深掘りしてご紹介します。経験から言って、アンカーリンクの使用により、ユーザー体験の向上につながり、長文のコンテンツを閲覧するのが飛躍的に楽になり、Googleの検索結果でも若干有利になります。無料でGoogleの検索結果（つまりSEO）の改善をしたいと思いませんか？😉

アンカーリンクの例

まだアンカーリンクがなんなのかよく分からないという方も、ご安心ください。次の画像の例をご覧ください。箇条書きの文章の全てにアンカーリンクを使用しています。クリックすると、そのコンテンツを含むH2見出しへと移動します。実際にこの記事内で試してみることもできます。アンカーリンクはテキスト、画像、H1-H6見出しなど、どんなものにでも使用できます。

多くのサイトではアンカーリンクは長文記事のはじめの目次くらいでしか使用されていません。当社のランディングページの例のようにCSSを少し使用すれば、よりクリエイティブでスタイリッシュなものを作ることもできます。

また、アンカーリンクの表示はせず、見出しにアンカーリンクを設定しておいて、リンクを直接特定のセクションへの誘導のために使っているサイトもあります。

アンカーリンクのメリットとデメリット

アンカーリンクはどんな時でも使うべきというわけではありません。アンカーリンクをWordPressサイトで使用する際のメリットとデメリットをご紹介します。

メリット

• アンカーリンクの最も大きなメリットの一つはユーザーがサイトを閲覧する際に、より快適なユーザー体験を得られるということです。特に長文記事に当てはまります。詳細な長い記事（例えば4,000〜6,000文字以上）を公開するとスクロールするのが苦痛になることがあります。アンカーリンクを使用すると、サイト訪問者は、興味のあるセクションに瞬時に移動することができます。ユーザーが求めるものをすぐに見つけられるというメリットです。
• 見出しにアンカーリンクを設定しておくと、記事内の様々なセクションに直接移動できるリンクのシェアが可能になります。これはSNSでの投稿やサポートチームによるリンク共有の際に便利です。例えば、Kinstaのサポートチームは、ナレッジベースのリンクを共有する際に、適切な項目を確認できるようアンカーリンクを利用しています。また、当社営業チームもKinsta関連の問い合わせに、迅速に答えられるようアンカーリンクを活用しています。
• 検索エンジンの検索結果（SERP）については、表示されてみないとわかりませんが、それでも、記事内で使用したことでアンカーリンク（ジャンプリンク）が検索結果に表示されることがこれまでに幾度もありました。これは実質、オーガニック検索結果に1つ多くの文字列が表示されることを意味し、素晴らしいことです。また、メタディスクリプションやタイトルに含まれていなくても、ユーザーの検索内容に関連したものが表示されるかもしれないため、CTR（クリック率）の増加にもつながります。

  

• アンカーリンクはさらに、（Wikipediaを例として）引用^や脚注[1]とともに、「トップへ戻る」リンクなどに使用されることもあります。

デメリット

メリットがデメリットを確実に上回っていると思いますが、念のため使用する前に知っておきたいデメリットをご紹介しておきます。

• アンカーリンクや目次は訪問者1人あたりのサイトでの平均滞在時間を減らす可能性があります。というのは、記事全体を読まずに興味のある部分に直接飛んでしまうからです。ただし、すぐに満足させることで、ニュースレターへ登録したり販売している商品をもっと調べてくれたりする可能性が上がります。そのため、これはデメリットともメリットともとることができます。
• 上記と直接関連しますが、アンカーリンクが直接収益に影響を与える可能性もあります。訪問者が特定のセクションに直接移動することでインプレッションとクリックが減少することがあります。広告を多用しているサイトでは、アンカーリンクや目次を使用するときにA/Bテストを行った方がよいかもしれません。
• ドメインを変更する場合や、301リダイレクトを使用しなければならない場合は、フラグメント識別子（#以後の文字列）がサーバーに届かないことを覚えておきましょう。アンカーリンクに関わる変更を加えると、後々複雑になることがあります。JavaScriptを使って回避することはできますが、決して簡単な作業ではありません。

アンカーリンクの移動方法

また、アンカーリンクのジャンプ（移動）方法を変更したいという方もいるかもしれません。デフォルトでは、アンカーリンクはページ下部のidへ一瞬でジャンプします。これを不快に感じる方もいるかもしれません。これを滑らかなスクロールでの移動に変更することができます。実際、Kinstaのブログでもこの方法を採用しています。 Page scroll to idなどの無料プラグインを使用してもいいですし、 scroll-behavior: smooth;などのCSSをサイトに追加してもいいでしょう。こちらのStack Overflowの記事では開発者向けの情報が確認できます。

WordPressではよくあることですが、アンカーリンクを追加する方法はいくつかあります。簡単に実施できる次の4つの方法を見ていきましょう。ちなみに次のリンクにはアンカーリンクを使用しています😁

• 手動でWordPressにアンカーリンクを作成する方法
• プラグインを利用してWordPressでアンカーリンクを作成する方法
• グーテンベルクを利用してWordPressでアンカーリンクを作成する方法
• Chromeの拡張機能を利用してWordPressでアンカーリンクを作成する方法

手動でWordPressにアンカーリンクを作成する方法

最初にご紹介する方法は、各記事にHTMLを使用して手動でアンカーリンクを追加する方法です。仕組みを理解するために実際に作成してみましょう。

ステップ1

リンクのテキストを作成し、そこに他のリンクで行うのと同じようにハイパーリンクを追加します。

ステップ2

URLや記事、固定ページへリンクする代わりに、アンカー名を指定します。URLには「#」、そしてアンカー名がつきます。名前はなんでも構いませんが、短く、実際の見出しと関連のあるものにすることをおすすめします。

テキストビュー（HTML）を確認すると次のようになっています。

<a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a>

次の例はこの記事内で使用している全てのアンカーリンクです。

<ul>
<li><a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a></li>
<li><a href="#anchor-links-wordpress-plugin">How to Create Anchor Links in WordPress with a Plugin</a></li>
<li><a href="#anchor-links-wordpress-gutenberg">How to Create Anchor Links in WordPress with Gutenberg</a></li>
</ul>

ステップ3

次に、アンカーリンクのジャンプ先の見出しにidを追加する必要があります。そのためにはWordPressエディタのテキストビュー（HTML)に切り替えます。見出しに（今回の場合H2）idとステップ2で指定したアンカー名を追加します。リンクが正常に機能するにはアンカー名とid属性が完全に一致している必要があります。

<h2 id="manually-create-anchor-links-wordpress">How to Manually Create Anchors Link in WordPress</h2>

プラグインを利用してWordPressでアンカーリンクを作成する方法

毎回HTMLを編集するのが面倒だという方も心配はいりません。記事にアンカーリンクや目次を簡単に追加できる素晴らしい無料のWordPressプラグインも存在します。

プラグインを使ってアンカーリンクを追加する

アンカーリンクを最も簡単に追加する方法の一つは無料のプラグインTinyMCE Advancedを利用する方法です。プラグインを使用すると、エディタにショートカットボタンによる機能が追加されます。この記事を執筆している時点での有効インストール数は200万以上、評価は5つ星中4.5となっています。

ステップ1

プラグインをインストール、有効化したら記事へ移動し、アンカーテキストにハイパーリンクを作成します。URLや記事、固定ページにリンクする代わりに、#で始まるアンカー名を指定します。

ステップ2

リンク先に指定したい見出しを選択した状態で、上部のボタンの「挿入」をクリックし、「アンカー」を選択します。TinyMCE Advancedをインストールすることで、このボタンがエディタに表示されるようになります。

ステップ3

ステップ1でつけたアンカー名を入力し、OKをクリックします。このプラグインを使用するとビジュアルエディタから離れる必要が一切ないため、時間を節約できます。HTMLを使用し手動で行う場合、ビジュアルエディタとテキストエディタ（HTML）の両方を行き来する必要があります。

プラグインを使って目次を追加する

さらに作業をスピードアップしたいという方もいるかもしれません😄 常に長文のコンテンツを作成し、必ず記事内に目次（アンカーリンク一覧／ジャンプメニュー）を含めたいという方は目次プラグインを活用するといいでしょう。

おすすめの無料プラグインの一つはEasy Table of Contentsです。このプラグインでは見出しのアンカーリンクを自動で作成し、シンプルなショートコードを使って記事内の好きな場所に自由に挿入することができます。この記事を執筆している時点で、プラグインの有効インストール数は30,000以上、評価は5つ星中4.5です。

ステップ1

プラグインをインストールし、有効化した後に、いくつか変更しておいた方がいい設定があります。「設定」→「目次」から変更が可能です。

• 「サポートを有効化」では、目次を挿入する投稿タイプを選択できます。大抵の場合は「投稿」でしょう。
• その後、目次を自動挿入するか手動で挿入するかを選択します。記事がそれぞれ少しずつ異なる場合は手動で行うことをおすすめします。
• 「表示条件」では目次を表示するには記事内に何件以上見出しがなければならないかを設定できます。短いブログ記事では目次は必要ないでしょうから、少なくとも４つ以上で設定しておくとよいでしょう。

ステップ2

目次を手動で挿入するには記事内の表示したい場所に[ez-toc]のショートコードを挿入するだけOKです。

すると、記事の目次が自動で作成されます。便利ですね。

表示のされ方、除外、外観など他にもたくさんの設定を変更できます。例えば、記事の最後に必ず「まとめ」という見出しがあるとします。この見出しを除外のリストに追加すると、目次から除外されます。

もう一つのお勧めしたいプラグインはShortcode Table of Contentsです。比較的新しいプラグインですが、KinstaでもインタビューをしているJames Kemp氏の開発したプラグインです。

プラグインを使用して見出しにアンカーリンクを自動で追加する

単純に全ての見出しに自動でアンカーリンクを追加したいという方は、無料のプラグインWP Anchor Headerをチェックしてみてください。全てのH1-H6見出しにアンカーリンクが追加できます。

とても基本的なプラグインで設定もあまり多くありません。インストールし、有効化するだけですぐに利用できます。各見出しには自動で（見出し名から派生した）アンカー名がつけられ、見出しの上にマウスを合わせると小さなアンカーのアイコンまで表示されます。こうすることで、サイト訪問者は、「コピーできるリンクがそこにある」ということが簡単に分かります。

グーテンベルクを利用してWordPressでアンカーリンクを作成する方法

WordPress 5.0に搭載予定の新しいグーテンベルクエディタ。機能が改善され、アンカーidを見出しに追加することができます。

ステップ1

グーテンベルクブロックの見出しを選択し、右側にある「高度な設定」をクリックします。HTMLアンカーを追加できる画面が表示されます。

ステップ2

そこにリンクしたい場合は、アンカーテキストにハイパーリンクを設定するだけでOKです。URLや投稿、固定ページにリンクする代わりに、#で始まるアンカー名を指定します。

Chromeの拡張機能を利用してWordPressでアンカーリンクを作成する方法

HTMLを利用したり、プラグインを利用したりせずにアンカーリンクを作成したいという方は、無料のChromeの拡張機能であるAnchor Linksをお試しください。セルフホスティング型WordPress（WordPress.org）、WordPress.com、Medium と完全に互換性があります。

ステップ1

Chromeの拡張機能をインストールしたら、アンカーリンクを追加したい見出しを選択します。次にブラウザのツールバーにある、Anchor Linkのアイコンをクリックします。

背景でアンカーID（見出し名から派生）が作成されます。上記の例では#Header_1となっています。アイコンをクリックすると自動でクリップボードにコピーされます。

ステップ2

次にアンカーリンクを追加したいテキストに移動し、通常通りハイパーリンク設定のために、「ペースト」します。

これで完了です！Chromeの拡張機能では外部のプラグインを使用せずに簡単にアンカーリンクが追加できます。

まとめ

ご覧の通り、WordPressでアンカーリンクを追加する方法はたくさん存在し、手軽さもそれぞれ異なります。長いコンテンツをたくさん公開しているサイトでは、アンカーリンクを追加することで、訪問者が見たいコンテンツにすぐに移動することができるようになります。また、アンカーリンクを使用することで、検索結果画面に「個々のリンク先」が追加で表示されるケースも確認できています。オーガニック検索結果におけるクリック率増加が期待できます。

あなたのWordPressサイトではアンカーリンクを使用していますか？使用しているという方は是非ご自身の体験やご意見をお聞かせください。