サイトのユーザービリティを高めるためには、アンカーリンクの設定が有効です。
アンカーリンクはとても便利な機能で、使用するとサイトのコンテンツの閲覧が楽になり、Googleの検索結果でも有利になることがあります。
そこで今回は、アンカーリンクとは何なのか?作成・設定方法や注意点についても解説しますので参考にしてみてください。
WordPress(ワードプレス)のアンカーリンクとは?
アンカーリンクというと聞きなれないかもしれませんが、「ページ内リンク」のことを指します。
クリックするとページ内の指定した場所に移動することができる機能です。
サイトの目次部分によく設定されているのを見かけたことがある人も多いのではないでしょうか?
アンカーリンクは、HTMLやプラグインで作成可能です。
記事内でリンクを作成すると読者にとってとても読みやすい記事になります。
WordPress(ワードプレス)のアンカーリンクのメリット・デメリットは?
ワードプレスのサイトの記事内で移動できて便利なアンカーリンクですが、メリットやデメリットはあるのでしょうか?
それぞれ見ていきましょう。
メリット
- ユーザービリティの向上
- サイトの離脱防止
- 回遊率を高めて直帰率を下げる
- 誘導したい場所に直接移動させられる
アンカーリンクを設置すれば、ユーザーがサイト内で情報を探しているとき見つけやすくなります。
ページの情報量が多すぎてしまうと見にくく、サイト離脱の原因になることも。
アンカーリンクは情報のところへ素早く移動できるし、サイトの回遊率をアップして直帰率を下げることにもつながります。
また、アフィリエイトサイトなどの場合には、購入ボタンなどに直接移動させられるのでCTRの増加にもつながります。
デメリット
- 使いすぎると読みにくくなる
アンカーリンクはメリットが多く、デメリットはあまりありません。
しかし、挙げるなら使いすぎには注意ということです。
リンクばかりのページになってしまうと、逆に読みにくくなってしまいますよね。
アンカーリンクは、適当な場所に設置するようにしましょう。
WordPress(ワードプレス)でアンカーリンクを作成する方法は?
ワードプレスのサイトページにアンカーリンクを作成する方法について解説します。
ブロックエディターでは、HTMLを編集することなくアンカーリンクを作成することができます。
クラシックエディターでアンカーリンクを作成するよりもとても簡単です。
アンカーリンクの作成は次の2ステップで行います。
- リンク先(アンカー)を設定する
- リンク元を設定する
ブロックエディター
ブロックエディターでアンカーリンクを作成する方法は次の通りです。
- リンク先にしたいブロックを選択する
- サイドバーの「高度な設定」タブを開き、HTML アンカー欄に好きなテキストを入力する
- リンク元のブロックを選択し、「リンク」のアイコンをクリックする
- 「#」を先頭に付けて、アンカー欄に入力したテキストを入力する
これで、ページ内のアンカーリンクの設定は完了です。
次に、別の記事にリンクをつける方法を見ていきましょう。
- リンクを設置したい記事のブロックにHTMLアンカーを入力する
- リンク元のブロックの「リンク」に記事のURLと「#」と入力したHTMLアンカーを入力する
これで完了です。
この機能を活用すれば、目次にアンカーリンクを作成することも可能です。
HTML
- リンク元に設定したいテキストを選択し、リンク挿入のアイコンをクリックする
- 「#」から始まる任意の英数字を入力し、設定する
- リンク先に設定したいテキストに「<a id=“a”></a>」」のHTMLを記入する
- “a”の部分に、リンク元で設定した任意の英数字を入力する
これで、アンカーリンクの設定は完了です。
記事内で複数のアンカーリンクを設定したい場合は、#よりあとの英数字の文字列はすべて異なるものにしましょう。
WordPress(ワードプレス)でアンカーリンクを作成できるおすすめのプラグイン
ブロックエディターは、アンカーリンクの作成がとても簡単ですが、クラシックエディターだと少し面倒ですよね。
そこで便利なのが、プラグインです。
アンカーリンクを作成してくれるプラグインもあります。
ワードプレスのサイトでアンカーリンクを簡単に作成できるおすすめのプラグインは「Advanced Editor Tools」です。
「Advanced Editor Tools」のプラグインをインストールしたら、設定から「Advanced Editor Tools」を選択し、「使用しないボタン」の中にある「アンカー」をツールバーにドロップしましょう。
これで、記事作成の画面に「Advanced Editor Tools」のツールバーが表示されるようになります。
実際にプラグインを使う場合は、次のように作成しましょう。
- リンクを設置したいテキストを選択し、「リンクの挿入ボタン」をクリックする
- 「#」から始まる任意の英数字を入力する
- リンク先のテキストを選択し、アンカーボタンをクリックする
- ID欄に任意で入力した英数字を「#」抜きで入力する
これでOKです。
WordPress(ワードプレス)でアンカーリンクを作成する際の注意点
ワードプレスでアンカーリンクを作成する際、気を付けなければいけない点について解説します。
id名は同じものを使わないようにする
id名は固有の識別子です。
ページ内でリンクさせるときは、id名を重複させないようにしましょう。
ユーザビリティを考慮する
ユーザーがアンカーリンクをクリックするときにどこに移動するのか分かりやすいように作成しなければいけません。
サイトを分かりにくくすると、ブラウザバックを使用したり無駄な行動をしてしまうことに繋がります。
リンクがどこに移動するのかを確認する
アンカーリンクを作成した場合、目的の場所にジャンプするかどうかプレビューなどで必ず確認しましょう。
「#」は半角で入力する
アンカーリンクを作成する場合、「#」は必ず半角で入力しましょう。
全角だとリンクが機能しません。
リンクのテキストは分かりやすいものにする
アンカーリンクのリンク元のテキストはユーザーにとってもGoogleにとっても分かりやすいものにしなければいけません。
WordPress(ワードプレス)でアンカーリンクとは?作成方法や注意点を解説!まとめ
ワードプレスでアンカーリンクを作成する方法や注意点について解説しました。
アンカーリンクを作成すれば、ユーザービリティが高くなりユーザーにとってもGoogleにとっても分かりやすいサイトになります。
特に、情報量の多いページの場合はアンカーリンクを活用することをおすすめします。
ブロックエディターではとても簡単に作成できますが、プラグインを使うとより簡単にアンカーリンクの作成が可能です。
アンカーリンクは作成方法を間違えてしまうとうまく機能しなくなるので注意しましょう。
自分のやりやすい方法でアンカーリンクを作成してみてくださいね。
ホームページを今より活用して集客に繋げたい方、
WEBマーケティングを展開してきたい方はWebHEROにお任せください!
ホームページを活用して、もっと売上アップしたい…!
そう考えているあなたは、こんなお悩みをお持ちではないでしょうか?
そのお悩み、WebHEROにお任せください!
WEBマーケティングにおける重要なポジションを担っている「ホームぺージ」を
優秀なWEBマーケターの視点をいれて制作をさせていただきます!
まずは無料相談!
いつでもお気軽にご相談ください!