長いWordPressの記事を開いて、必要なものを見つけようとして迷ったことはありませんか？私たちは皆、経験があります。自分にとって重要な部分にたどり着くために、大量のテキストをスクロールするのはフラストレーションがたまることがあります。
それがまさにWPBeginnerでアンカーリンクを使用している理由です。ガイドでも専門家リストでも、読者は関心のあるセクションに直接スキップできます。
私たちの経験では、アンカーリンクは読書を容易にするだけでなく、訪問者が求めているものをすばやく見つけられるようにすることで、サイトに長く滞在するのに役立ちます。さらに、コンテンツはより整理され、プロフェッショナルに見えます。
このガイドでは、WordPressの投稿やページにアンカーリンクを追加する方法を説明します。読者にとって大きな違いを生む小さな変更です。
アンカーリンクとは？
アンカーリンクとは、別のページやWordPressウェブサイトではなく、同じページの特定のセクションにユーザーを誘導する特別な種類のリンクです。
これらのリンクはショートカットのように機能し、読者がページ全体をスクロールすることなく、最も関心のあるコンテンツの部分に直接ジャンプするのを助けます 。
例えば、長い記事やガイドの目次でアンカーリンクが使用されているのを目にすることがあります。クリックすると、ユーザーは関連セクションにすぐに移動します。
アンカーリンクを使用するもう1つの方法は、WordPressサイトにブックマークリンクを作成することです。
これにより、ソーシャルメディアやメールニュースレターでブックマークリンクを共有できます。そうすれば、ページが読み込まれたときに、ユーザーはあなたが彼らに見せたいセクションにすぐにジャンプできます。
アンカーリンクはなぜ、いつ使用すべきですか？
平均的なユーザーは、サイトに滞在するかどうかを決定する前に数秒しか費やしません。ユーザーに滞在してもらうために説得できる時間はわずか数秒です。
そのための最善の方法は、探している情報をすばやく確認できるようにすることです。
アンカーリンクを使用すると、ユーザーはコンテンツの残りをスキップして、興味のある部分に直接ジャンプできるようになり、これをより簡単に行えます。これにより、ユーザーエクスペリエンスが向上し、新しい顧客/読者を獲得するのに役立ちます。
アンカーリンクは、WordPress SEOにも最適です。Googleは検索結果にいくつかのアンカーリンクをジャンプリンクとして表示できます。
これは検索結果でのクリック率を向上させることが証明されており、その結果、ウェブサイトへのより多くのトラフィックをもたらします。
アンカーリンクを使用して目次を作成すると、Googleはフィーチャー スニペットで見出しを表示できます。
これを踏まえて、WordPressでアンカーリンクを簡単に追加する方法を見ていきましょう。
以下は、このガイドで取り上げるすべてのトピックのリストです。これらのアンカーリンクのいずれかをクリックすると、その特定のセクションに移動します。
- WordPressにアンカーリンクを手動で追加する方法
- クラシックエディターでアンカーリンクを手動で追加する方法
- HTMLでアンカーリンクを手動で追加する方法
- WordPressでヘッダーをアンカーリンクとして自動追加する方法（推奨）
- ボーナスヒント：アンカーリンクと内部リンクを組み合わせてSEOを向上させる
- よくある質問：WordPressでアンカーリンクを追加する方法
- 追加リソース：WordPress SEOを改善する
WordPressにアンカーリンクを手動で追加する方法
記事に少数のアンカーリンクまたはブックマークリンクを追加したいだけであれば、手動で簡単に行うことができます。
基本的に、アンカーテキストが意図したとおりに機能するには、次の2つを追加する必要があります。
- アンカーテキストの前に#記号を付けてアンカーリンクを作成します。
- ユーザーを移動させたいテキストに
id属性を追加します。
まず、アンカーリンクの部分から始めます。
ステップ1. アンカーリンクの作成
まず、投稿またはページを編集するか、新規作成する必要があります。次に、リンクしたいテキストを選択し、WordPress ブロックエディターの挿入リンクボタンをクリックします。
ここで通常URLを追加したり、投稿やページを探したりする「リンク挿入」ポップアップが表示されます。
ただし、アンカーリンクの場合は、HTTPの代わりに#をプレフィックスとして使用するだけです。その後、ユーザーにジャンプさせたいセクションのキーワードを入力します。
次に、Enterボタンをクリックしてリンクを作成します。ただし、まだどこにも移動しません。次のステップでIDを作成する必要があります。
アンカーリンクとして使用するテキストを選択するための役立つヒントをいくつかご紹介します。
- リンク先のセクションに関連するキーワードを使用してください。
- アンカーリンクを不必要に長くしたり複雑にしたりしないでください。
- 単語を区切るためにハイフンを使用すると、読みやすくなります。
- アンカーテキストに大文字を使用すると、読みやすくなります。例：
#Best-Coffee-Shops-New-York。
適切なリンクテキストを選択したら、アンカーリンクをクリックしたときに表示したいページ内の領域、セクション、またはテキストにそれをアンカーする時間です。
ステップ2.リンクされたセクションにID属性を追加する
コンテンツエディターで、アンカーリンクをクリックしたときにユーザーに移動させたいセクションまでスクロールします。通常、これは新しいセクションの見出しです。
次に、ブロックを単純に選択します。次に、左側のパネルのブロック設定で、「詳細」タブをクリックして展開します。
その後、「HTMLアンカー」フィールドの下に、アンカーリンクとして追加したのと同じテキストを追加する必要があります。
#プレフィックスなしでテキストを追加するようにしてください。
これで投稿を保存し、プレビュータブをクリックしてアンカーリンクが機能していることを確認できます。
表示したいセクションが見出しではなく、通常の段落やその他のブロックの場合はどうなりますか？
その場合、ブロック設定の3点メニューをクリックし、「HTMLとして編集」オプションを選択する必要があります。
これにより、特定のブロックのHTMLコードを編集できるようになります。リンクしたい要素のHTMLタグを選択する必要があります。例えば、段落の場合は<p>、テーブルブロックの場合は<table>などです。
次に、次のようなコードを使用して、アンカーをそのタグのID属性として追加する必要があります。
<p id="best-coffee-shops-manhattan">
次に、「ビジュアル編集」ボタンを再度クリックするだけで、アンカーリンクをクリックするとユーザーはそのブロックに移動します。
クラシックエディターでアンカーリンクを手動で追加する方法
WordPressで古いクラシックエディターを使用している場合は、アンカーリンク/ジャンプリンクを追加する方法は次のとおりです。
ステップ 1. アンカーリンクを作成する
まず、投稿または固定ページを編集または新規作成します。次に、アンカーリンクに変更したいテキストを選択し、「リンクを挿入」ボタンをクリックします。
その後、#プレフィックスとリンクに使用したいスラッグに続くアンカーリンクを追加する必要があります。
ステップ2.リンクされたセクションにID属性を追加する
次のステップは、アンカーリンクをクリックしたときに表示したいセクションにブラウザを向けることです。
これを行うには、クラシックエディターで「テキスト」モードに切り替える必要があります。その後、リンクしたいセクションまでスクロールします。
次に、ターゲットにしたいHTMLタグを見つけます。たとえば、<h2>、<h3>、<p>などです。
アンカーリンクのスラッグを#プレフィックスなしでID属性に追加する必要があります。例：
<h2 id="best-coffee-shops-new-york">
これで変更を保存し、プレビューボタンをクリックしてアンカーリンクが機能していることを確認できます。
HTMLでアンカーリンクを手動で追加する方法
WordPressの古いクラシックエディターのテキストモードで記述することに慣れている場合は、HTMLでアンカーリンクを手動で作成する方法は次のとおりです。
まず、通常の<a href="">タグを使用して、次のように「#」プレフィックスでアンカーリンクを作成する必要があります。
<a href="#best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</a>
次に、リンクをクリックしたときに表示したいセクションまで下にスクロールする必要があります。
通常、このセクションは見出しですが、他のHTML要素や単純な段落の<p>タグでも構いません。
HTMLタグにID属性を追加し、次に#プレフィックスなしのアンカーリンクスラッグを追加する必要があります。
<h2 id="best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</h2>
これで変更を保存し、ウェブサイトをプレビューしてアンカーリンクをテストできます。
WordPressでヘッダーをアンカーリンクとして自動追加する方法（推奨）
WordPressでアンカーリンクを自動的に追加する最良の方法は、All in One SEO (AIOSEO)を使用することです。これはWordPress向けの最高のSEOプラグインです。
この方法は、長文記事を定期的に公開し、アンカーリンク付きの目次を作成する必要があるユーザーに適しています。さらに、AIOSEOには目次を追加するための組み込みWordPressブロックが付属しています。
私たち自身も大ファンであり、XMLサイトマップ、FacebookおよびX用のOpenGraph設定、メタディスクリプション、タイトルタグの管理を含む様々なSEOタスクにAIOSEOを利用してきました。詳細については、当社の詳細なAIOSEOレビューをご覧ください。
このチュートリアルでは、目次ブロックが含まれているため、無料の AIOSEO Lite バージョンを使用します。検索エンジンでのランキングを向上させるための追加機能が含まれる AIOSEO Pro バージョンもあります。
まず、AIOSEO Lite プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
アクティベーション後、セットアップウィザードが表示されます。「開始する」ボタンをクリックし、画面の指示に従ってください。
詳細については、WordPressのAll in One SEOの設定方法に関するガイドをご覧ください。
次に、アンカーリンクを追加したい新しい投稿またはページを作成または編集できます。コンテンツエディターに入ったら、単に「+」ボタンをクリックして「AIOSEO – 目次」ブロックを追加します。
このプラグインは、ページ上のさまざまな見出しを自動的に検出し、目次に表示します。
ブロック内の各アンカーリンクはさらにカスタマイズできます。たとえば、右側の設定パネルでは、「リストスタイル」を箇条書きから番号付きに変更するオプションが提供されています。
さらに、見出しの名前を変更したり、目次ブロックでの順序を並べ替えたり、特定の見出しを非表示にしたりすることもできます。
変更を保存して記事をプレビューできるようになりました。プラグインは、目次としてアンカーリンクのリストを自動的に表示します。
WordPress投稿や固定ページに目次を追加する方法に関する記事をご覧ください。WordPressに目次を追加する方法については、詳細な手順をご覧ください。
ボーナスヒント：アンカーリンクと内部リンクを組み合わせてSEOを向上させる
アンカーリンクはユーザーが単一のページ内を移動するのに役立ちますが、内部リンクはサイト上の他の関連投稿やページにユーザーを誘導します。これらの戦略を組み合わせることで、シームレスなブラウジング体験を作成し、WordPress SEOを向上させることができます。
内部リンクは、Googleのような検索エンジンがサイトをクロールし、新しいコンテンツを発見し、ページをランク付けするのに役立ちます。より多くのリンクが指しているページは、検索結果でより高くランク付けされることがよくあります。
内部リンクを戦略的に使用することで、訪問者を最も重要なページに誘導し、より多くのトラフィックを促進できます。
アンカーリンクを追加するとコンテンツがユーザーフレンドリーになり、内部リンクは読者がさらに探索することを奨励します。これらを組み合わせることで、訪問者を惹きつけ、ページビューを増やし、直帰率を減らすことができます。これらすべてが、より良いユーザーエクスペリエンスと強力なSEOに貢献します。
詳細については、SEOのための内部リンクに関する究極のガイドをご覧ください。
よくある質問：WordPressでアンカーリンクを追加する方法
WordPressでアンカーリンクを使用することについて、まだ質問がありますか？読者からよく寄せられる質問と、それに対する簡単な回答を以下に示します。
アンカーリンクとは何ですか、そしてなぜそれらを使用すべきですか？
アンカーリンクとは、ユーザーを同じページ内の特定のセクションに移動させるリンクのことです。
ナビゲーションを改善し、長い投稿の閲覧を容易にし、読者にとって全体的なエクスペリエンスを向上させるのに役立ちます。コンテンツを検索エンジンがよりアクセスしやすくすることで、SEOにも役立ちます。
コーディングに慣れていなくてもアンカーリンクを追加できますか？
もちろんです！HTMLで手動で追加することもできますが、All in One SEO（AIOSEO）のようなSEOプラグインを使用すると、コーディング経験がなくても非常に簡単になります。
アンカーリンクはサイトのSEOに影響しますか？
はい、良い意味で！アンカーリンクは、ユーザーが必要なものをより速く見つけるのに役立ち、ページ滞在時間の延長と直帰率の低下につながる可能性があります。これらはすべてSEOにとってポジティブなシグナルです。
アンカーリンクを自動的に追加できるプラグインはありますか？
はい！All in One SEO (AIOSEO) のようなプラグインには、アンカーリンク付きの目次を自動生成する機能が含まれています。これにより、時間の節約になり、間違いの可能性が減ります。
アンカーリンクを使用してサイトのナビゲーションを改善できますか？
もちろんです！アンカーリンクは、長文コンテンツを分割し、読者が最も重要なセクションに直接ジャンプするのに役立つ優れた方法です。
追加リソース：WordPress SEOを改善する
この記事が、WordPressにアンカーリンクを簡単に追加する方法を学ぶのに役立ったことを願っています。次に、以下のガイドも参照してください。
- WordPressにFAQスキーマを追加する方法
- WordPressのURLから数字を削除する方法
- ブログ記事をSEOのために適切に最適化する方法
- WordPressでサイト全体の完全なリダイレクトを行う方法
- Google検索ペナルティからWordPressサイトを回復する方法
- WordPress向けの最適なスキーママークアッププラグイン
- The Ultimate WordPress SEO Guide
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Mrteesurez
これは素晴らしいです。この投稿で、アンカーリンクとそのエディターへの追加方法について理解が深まりました。ページビルダーを編集する際にしか使用していませんでしたが、ブロックエディターでの使い方がわかっていませんでした。
また、SEOのメリットのためにアンカーリンクのテキストを選択する際のヒントもありがとうございます。アンカーリンクにこのようなSEOのメリットがあり、Googleの検索結果の強調スニペットにコンテンツが表示されることを知りませんでした。
WPBeginnerサポート
You’re welcome
管理者
デニス・ムトミ
最近、ナビゲーションメニューにアンカーリンクがあるマイクロSaaSのウェブサイトを見ました。メニュー項目をクリックすると、新しいページに移動するのではなく、現在のページが特定のセクションにスクロールされました。
これは、ユーザーを同じページに留めるために、ナビゲーションバーでアンカーリンクを効果的に使用する方法だと思います。
Mrteesurez
はい、メニュー項目からサイトの他の部分にリンクするスマートな方法だと思います。個人ポートフォリオのようなサイトでは、about、services、skillsなどの異なるセクションを含むページサイトを使用し、アンカーを実装してそれらを単一のページでリンクアップしています。
Dayo Olobayo
これについてありがとうございます。また、アンカーリンクを適切に使用することで、ウェブサイトの内部リンク戦略に役立つと考えています。同じページ内の異なるセクションや、他のページの関連コンテンツにリンクすることで、訪問者をより長く惹きつけ、サイト全体にリンクエクイティを分散させることができます。
イジー・ヴァネック
質問させてください。メニューに末尾に#が付いたリンクが設定されている項目がいくつかあります。これは意図的にこのようにしています。例を挙げます。メニューに「価格リスト」という項目があり、#が付いていますが、どこにもリンクしません。マウスをホバーするとメニューが展開し、個々の価格リストが表示されます。Google Search Consoleはこの慣行に悩まされています。なぜなら、リンクがどこにもリンクしないからです。何か解決策はありますか？
WPBeginnerサポート
そのためには、価格設定ページを作成し、メニュー内のサブページにリンクすることを検討できます。
管理者
イジー・ヴァネック
つまり、どこにもつながらない#の代わりに、少なくともいくつかのテキストを含む情報ページを作成します。はい、それは非常に良い、シンプルで迅速な解決策のように聞こえます。ありがとうございます。私の解決策が非アクティブなリンクとしてGoogleに迷惑をかけるとは思っていませんでした。
Mrteesurez
メニューのプレースホルダーリンクで同様の問題が発生しました。ドロップダウンのためにいくつかのメニュー項目に「#」を使用していましたが、このアプローチは検索エンジンにとって悪いプラクティスとしてもフラグが立てられました。これを解決するために、トップレベルの各項目が有効なURL（クリックできないアンカーや同じページの特定のセクションであっても）にリンクされていることを確認することで、メニュー構造を調整しました。これにより、Googleは各リンクがどこかに繋がっていると認識し、ドロップダウンの機能も維持されました。この変更により、警告が解消され、サイト全体のユーザーエクスペリエンスが向上しました。
Pavlína Radochová
こんにちは、投稿ありがとうございます。
質問があります。ページタイトルにHTMLアンカーを作成するにはどうすればよいですか？
WPBeginnerサポート
ほとんどのページタイトルはページの先頭にあるため、テーマが別の場所に配置していない限り、アンカーリンクを必要とせずに目的を達成するためにページに直接リンクできるはずです。
管理者
Ahmed Abo Rwash
こんにちは、皆さん
ナビゲーションメニューの項目をアンカーリンクにしたのですが、ホームページでは機能するものの、他のページに移動してナビゲーションメニューのその項目をクリックしても、ホームページの同じエリアに移動しません。どうすれば修正できますか？
WPBeginnerサポート
アンカーリンクを他のページでも機能させたい場合は、メニューリンクにhttpsから最後まで完全なURLが含まれていることを確認する必要があります。そうすれば、この問題は解決するはずです。
管理者
Bushra Muzaffar
役に立ちました… WordPressの新しいブロックエディターには、右側のサイドバーに「高度」タブがあります
WPBeginnerサポート
当社の記事がお役に立てて嬉しいです！
管理者
Jennifer
Thank you!! Worked perfectly
WPBeginnerサポート
ガイドがお役に立てて嬉しいです！
管理者
Jo
私には機能しません – 他のページからサイドバーウィジェットにリンクしようとしていますが、これは私をイライラさせています
WPBeginnerサポート
その問題については、リンクが別のページにある場合、機能させるためには、その別のページの完全なURLに#アンカーを末尾に追加する必要があります。
管理者
Chalvonia Bock
ありがとうございます。長い間苦労して助けを探していましたが、これらの指示に従った後、うまくいきました。
WPBeginnerサポート
Glack our guide was helpful
管理者
スティーブン・ムイルリ
非常に役立つ記事です。ブログに長めのコンテンツを含める予定ですが、アンカーリンクがあればナビゲーションとユーザビリティがより効率的になります。どうもありがとうございます。
WPBeginnerサポート
Glad our guide was helpful
管理者
Nico
素晴らしい、包括的な記事をありがとうございます！
WPBeginnerサポート
Glad you found our guide helpful
管理者
Megan
ボタンから同じページのヘッダーにアンカーリンクを追加するにはどうすればよいですか？
WPBeginnerサポート
そのためには、このガイドの手動方法を使用する必要があるかもしれません。
管理者
ロヒット・メータ
とても助かりました、ありがとうございます！
WPBeginnerサポート
Glad our guide was helpful
管理者
ロバート
良いプレゼンテーションです。ただし、内部リンクされた各段落の最後に「ホーム」ボタンを提案することをお勧めします。
WPBeginnerサポート
That is a personal preference but thank you for sharing your recommendation
管理者
マディ・シェーファー
とても参考になりました、ありがとうございます。アンカーリンクを簡単にコード化できました。
WPBeginnerサポート
Glad our guide was helpful
管理者
Francesco
こんにちは。投稿は非常に良いです。アンカーを使用して、ページから別のページへのリンクを作成するにはどうすればよいですか？別の特定のページ部分にリンクを作成したいです。
WPBeginnerサポート
アンカーリンクのあるページにリンクし、URLの末尾にidを追加します。
管理者
サミール
こんにちは、このチュートリアルをありがとうございます。
質問があります。私のホームページには、「私について」や「お問い合わせ」などのアンカーがいくつかあります。これらのアンカーはメニューヘッダー（WordPressのヘッダーを使用）にあります。
問題は、モバイルサイトで、ホームページでユーザーがメニューを開き、アンカーを選択すると、基本的に同じページを下にスクロールしますが、メニューバーが開いたままになることです。
アンカーをクリックしたときにメニューバーを閉じるにはどうすればよいですか？
ありがとうございます。
WPBeginnerサポート
メニューが正しく閉じられるように、現在使用しているテーマのサポートに問い合わせることをお勧めします。
管理者
Don Johnson
コンテンツエディタにアクセスする方法はどこに書いてありますか？
WPBeginnerサポート
投稿または固定ページを作成または編集する際に、コンテンツを編集できるようになります
管理者
NanPad
ページの上部に3つのアンカーリンクがあります。視聴者がアンカーリンク#1をクリックしてリンクが指すページ上の場所に移動した後、視聴者はどのようにして戻ってきて、アンカーリンク#2と#3をクリックできますか？
WPBeginnerサポート
それには、サイトに追加するためにカスタムJavaScriptまたはプラグインが必要になります。
管理者
Gopal
非常に役立つ投稿
WPBeginnerサポート
Thank you
管理者
Diane
これは、あるページから別のページのアンカーへのリンクオプションには対応していないようです。WordPressで可能ですか？
WPBeginnerサポート
このガイドを使用してから、ウェブ上の任意のページの特定のセクションへのアンカーリンクを使用できます。
管理者
ジョン
かなり良い記事ですが、別のページにアンカーを配置するために必要なステップが抜けています！非常に重要です。
WPBeginnerサポート
これらの手順に従えば、リンクが別のページにあっても機能するはずです。
管理者
Okila Jaames
皆さん、この投稿をありがとうございます。このプラットフォームを見つけてから毎日学んでいます。
WPBeginnerサポート
You’re welcome, glad you found our content helpful
管理者
Sheila
あなたが話しているブロックとは何ですか？このチュートリアルを理解できませんでした。
WPBeginnerサポート
このチュートリアルでは、Gutenberg/ブロックエディターを使用しています。ご質問の内容からすると、おそらくクラシックエディターを使用されていると思われます。
管理者
Amos Struck
非常に役立つ情報です。ビデオを使って説明していただけるとさらに良いでしょう。
WPBeginnerサポート
We will look into creating a video as we are able
管理者