長いWordPressの記事を開いて、必要なものを見つけようとして迷ったことはありませんか？私たちは皆、経験があります。自分にとって重要な部分にたどり着くために、大量のテキストをスクロールするのはフラストレーションがたまることがあります。
それがまさにWPBeginnerでアンカーリンクを使用する理由です。ガイドでもエキスパートリストでも、読者が関心のあるセクションに直接スキップしやすくなります。
私たちの経験では、アンカーリンクは読書を容易にするだけでなく、訪問者が求めているものをすばやく見つけられるようにすることで、サイトに長く滞在するのに役立ちます。さらに、コンテンツはより整理され、プロフェッショナルに見えます。
このガイドでは、WordPressの投稿やページにアンカーリンクを追加する方法を説明します。読者にとって大きな違いを生む小さな変更です。⚓
📚 概要: WordPressでアンカーリンクを追加するには2つの方法があります。1) HTMLアンカー（ID）をヘッダーに手動で追加し、#記号でリンクする、または2) AIOSEOのような目次プラグインを使用して自動生成する。
アンカーリンクとは？
アンカーリンクは、別のページやWordPressサイトではなく、同じページの特定のセクションにユーザーを誘導する特別な種類のリンクです。
これらのリンクはショートカットのように機能し、読者がページ全体をスクロールすることなく、最も関心のあるコンテンツの部分に直接ジャンプするのを助けます 。
たとえば、長い記事やガイドの目次でアンカーリンクが使用されているのを目にすることがあります。クリックすると、ユーザーは関連セクションにすぐに移動します。
アンカーリンクを使用するもう1つの方法は、WordPressサイトにブックマークリンクを作成することです。
これにより、ブックマークリンクをソーシャルメディアやメールニュースレターで共有できます。そうすれば、ページが読み込まれると、ユーザーはあなたが彼らに見せたいセクションにすぐにジャンプします。
アンカーリンクはなぜ、いつ使用すべきですか？
平均的なユーザーは、サイトに滞在するかどうかを決定する前に数秒しか費やしません。ユーザーに滞在してもらうために説得できる時間はわずか数秒です。
そのための最善の方法は、探している情報をすばやく確認できるようにすることです。
アンカーリンクを使用すると、ユーザーはコンテンツの残りをスキップして、興味のある部分に直接ジャンプできるようになり、これをより簡単に行えます。これにより、ユーザーエクスペリエンスが向上し、新しい顧客/読者を獲得するのに役立ちます。
アンカーリンクはWordPress SEOにも最適です。Googleは、検索結果にいくつかのアンカーリンクをジャンプリンクとして表示できます。
これは検索結果でのクリック率を向上させることが証明されており、ひいてはウェブサイトへのトラフィック増加につながります。
アンカーリンクを使用して目次を作成すると、Googleは注目のスニペットに見出しを表示できます。
これを踏まえて、WordPressでアンカーリンクを簡単に追加する方法を見ていきましょう。
以下は、このガイドで取り上げるすべてのトピックのリストです。これらのアンカーリンクのいずれかをクリックすると、その特定のセクションに移動します。
WordPressにアンカーリンクを手動で追加する方法
記事に少数のアンカーリンクまたはブックマークリンクを追加したいだけであれば、手動で簡単に行うことができます。
基本的に、アンカーテキストが意図したとおりに機能するには、次の2つを追加する必要があります。
- アンカーテキストの前に#記号を付けてアンカーリンクを作成します。
- ユーザーを移動させたいテキストに
id属性を追加します。
まず、アンカーリンクの部分から始めます。
ステップ1. アンカーリンクの作成
まず、投稿またはページを編集または新規作成する必要があります。次に、リンクしたいテキストを選択し、WordPressブロックエディターのリンク挿入ボタンをクリックします。
ここで通常URLを追加したり、投稿やページを探したりする「リンク挿入」ポップアップが表示されます。
ただし、アンカーリンクの場合は、httpの代わりに#をプレフィックスとして使用するだけです。その後、ユーザーをジャンプさせたいセクションのキーワードを入力します。
次に、送信矢印をクリックするか、キーボードのEnterキーを押してリンクを作成します。ただし、まだどこにも移動しません。次のステップでIDを作成する必要があります。
アンカーリンクとして使用するテキストを選択するための役立つヒントをいくつかご紹介します。
- リンクしているセクションに関連するキーワードを使用してください。
- アンカーリンクを不必要に長くしたり複雑にしたりしないでください。
- 単語を区切るためにハイフンを使用すると、読みやすくなります。
- アンカーテキストで大文字を使用すると、読みやすくなります。例: #Best-Coffee-Shops-New-York。
適切なリンクテキストを選択したら、アンカーリンクをクリックしたときに表示したいページ内の領域、セクション、またはテキストにそれをアンカーする時間です。
ステップ2.リンクされたセクションにID属性を追加する
コンテンツエディターで、アンカーリンクをクリックしたときにユーザーに移動させたいセクションまでスクロールします。通常、これは新しいセクションの見出しです。
次に、ブロックを単純に選択します。次に、左側のパネルのブロック設定で、「詳細」タブをクリックして展開します。
その後、「HTMLアンカー」フィールドの下に、アンカーリンクとして追加したのと同じテキストを追加する必要があります。
#プレフィックスなしでテキストを追加するようにしてください。
これで投稿を保存し、プレビュータブをクリックしてアンカーリンクが機能していることを確認できます。
代替案: 表示したいセクションがヘッダーではなく、通常の段落やその他のブロックの場合はどうなりますか？
プロセスはまったく同じです。HTMLアンカーオプションは、段落、画像、グループなど、WordPressエディターのほとんどのブロックで利用できます。
リンクしたいブロックを選択し、ブロック設定の「詳細」タブを展開して、「HTMLアンカー」フィールドにアンカーテキストを入力します。例: best-coffee-shops-manhattan:
💡 注記: アンカーIDは一意であることを確認してください。同じページ上の2つの異なるブロックに同じアンカーテキストを使用しないでください。
次に、「ビジュアル編集」ボタンを再度クリックするだけで、アンカーリンクをクリックするとユーザーはそのブロックに移動します。
クラシックエディターでアンカーリンクを手動で追加する方法
WordPressの古いクラシックエディターをまだ使用している場合は、アンカーリンク/ジャンプリンクを追加する方法は次のとおりです。
ステップ 1. アンカーリンクを作成する
まず、投稿または固定ページを編集または新規作成します。次に、アンカーリンクに変更したいテキストを選択し、「リンクを挿入」ボタンをクリックします。
その後、#プレフィックスとリンクに使用したいスラッグに続くアンカーリンクを追加する必要があります。
ステップ2.リンクされたセクションにID属性を追加する
次のステップは、アンカーリンクをクリックしたときに表示したいセクションにブラウザを向けることです。
これを行うには、クラシックエディターで「テキスト」モードに切り替える必要があります。その後、リンクしたいセクションまでスクロールします。
次に、ターゲットにしたいHTMLタグを見つけます。たとえば、<h2>、<h3>、<p>などです。
ここに示すように、#プレフィックスなしのアンカーリンクのテキストでID属性を追加する必要があります。
<h2 id="best-coffee-shops-new-york">
IDはリンクの大文字小文字と完全に一致する必要があることに注意してください。これで変更を保存し、プレビューボタンをクリックして、アンカーリンクが機能していることを確認できます。
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プラグインを使用することです。
この方法は、長文記事を公開するユーザーに最適です。最も良い点は、後でテキストの見出しを変更した場合、目次のアンカーリンクが自動的に更新されるため、リンク切れを心配する必要がないことです。
私たち自身も大ファンであり、XMLサイトマップ、FacebookおよびXのOpenGraph設定、メタディスクリプション、タイトルタグの管理など、さまざまなSEOタスクにAIOSEOを利用しています。詳細については、AIOSEOの詳細レビューをご覧ください。
💡 注：このチュートリアルでは、目次ブロックが含まれているため、無料のAIOSEO Liteバージョンを使用します。検索エンジンでのランキングを向上させるための追加機能が含まれるAIOSEO Proバージョンもあります。
まず、AIOSEO Liteプラグインをインストールしてアクティブ化する必要があります。
WordPress管理画面で、プラグイン » プラグインを追加に移動します。
次に、検索バーを使用してプラグインをすばやく見つけることができます。
検索結果に表示されたら、「今すぐインストール」をクリックします。
インストールが完了したら、「アクティブ化」をクリックしてウェブサイトで有効にします。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
アクティベーション後、セットアップウィザードが表示されます。「開始する」ボタンをクリックし、画面の指示に従ってください。
詳細については、WordPressでAll in One SEOを設定する方法に関するガイドをご覧ください。
次に、アンカーリンクを追加したい新しい投稿またはページを作成または編集できます。コンテンツエディターに入ったら、単に「+」ボタンをクリックして「AIOSEO – 目次」ブロックを追加します。
このプラグインは、ページ上のさまざまな見出しを自動的に検出し、目次に表示します。
ブロック内の各アンカーリンクはさらにカスタマイズできます。たとえば、右側の設定パネルでは、「リストスタイル」を箇条書きから番号付きに変更するオプションが提供されています。
さらに、目次の見出しラベルの名前を変更したり、順序を並べ替えたり、特定の見出しを非表示にしたりすることもできます。
変更を保存して記事をプレビューできるようになりました。プラグインは、目次としてアンカーリンクのリストを自動的に表示します。
より詳細な手順については、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向けの最適なスキーママークアッププラグイン
- WordPress SEOの究極ガイド
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
Mrteesurez
これは素晴らしいです。この投稿で、アンカーリンクとそのエディターへの追加方法について理解が深まりました。ページビルダーを編集する際にしか使用していませんでしたが、ブロックエディターでの使い方がわかっていませんでした。
また、SEOのメリットのためにアンカーリンクのテキストを選択する際のヒントもありがとうございます。アンカーリンクにこのようなSEOのメリットがあり、Googleの検索結果の強調スニペットにコンテンツが表示されることを知りませんでした。
WPBeginnerサポート
どういたしまして
管理者
デニス・ムトミ
最近、ナビゲーションメニューにアンカーリンクがあるマイクロSaaSのウェブサイトを見ました。メニュー項目をクリックすると、新しいページに移動するのではなく、現在のページが特定のセクションにスクロールされました。
これは、ユーザーを同じページに留めるために、ナビゲーションバーでアンカーリンクを効果的に使用する方法だと思います。
Mrteesurez
はい、メニュー項目からサイトの他の部分にリンクするスマートな方法だと思います。個人ポートフォリオのようなサイトでは、about、services、skillsなどの異なるセクションを含むページサイトを使用し、アンカーを実装してそれらを単一のページでリンクアップしています。
デヨ・オロボヨ
これについてありがとうございます。また、アンカーリンクを適切に使用することで、ウェブサイトの内部リンク戦略に役立つと考えています。同じページ内の異なるセクションや、他のページの関連コンテンツにリンクすることで、訪問者をより長く惹きつけ、サイト全体にリンクエクイティを分散させることができます。
イジー・ヴァネック
質問させてください。メニューに末尾に#が付いたリンクが設定されている項目がいくつかあります。これは意図的にこのようにしています。例を挙げます。メニューに「価格リスト」という項目があり、#が付いていますが、どこにもリンクしません。マウスをホバーするとメニューが展開し、個々の価格リストが表示されます。Google Search Consoleはこの慣行に悩まされています。なぜなら、リンクがどこにもリンクしないからです。何か解決策はありますか？
WPBeginnerサポート
そのためには、価格設定ページを作成し、メニュー内のサブページにリンクすることを検討できます。
管理者
イジー・ヴァネック
つまり、どこにもつながらない#の代わりに、少なくともいくつかのテキストを含む情報ページを作成します。はい、それは非常に良い、シンプルで迅速な解決策のように聞こえます。ありがとうございます。私の解決策が非アクティブなリンクとしてGoogleに迷惑をかけるとは思っていませんでした。
Mrteesurez
メニューのプレースホルダーリンクで同様の問題が発生しました。ドロップダウンのためにいくつかのメニュー項目に「#」を使用していましたが、このアプローチは検索エンジンにとって悪いプラクティスとしてもフラグが立てられました。これを解決するために、トップレベルの各項目が有効なURL（クリックできないアンカーや同じページの特定のセクションであっても）にリンクされていることを確認することで、メニュー構造を調整しました。これにより、Googleは各リンクがどこかに繋がっていると認識し、ドロップダウンの機能も維持されました。この変更により、警告が解消され、サイト全体のユーザーエクスペリエンスが向上しました。
パヴリナ・ラドチョヴァ
こんにちは、投稿ありがとうございます。
質問があります。ページタイトルにHTMLアンカーを作成するにはどうすればよいですか？
WPBeginnerサポート
ほとんどのページタイトルはページの先頭にあるため、テーマが別の場所に配置していない限り、アンカーリンクを必要とせずに目的を達成するためにページに直接リンクできるはずです。
管理者
アーメド・アボ・ルワシュ
こんにちは、皆さん
ナビゲーションメニューの項目をアンカーリンクにしたのですが、ホームページでは機能するものの、他のページに移動してナビゲーションメニューのその項目をクリックしても、ホームページの同じエリアに移動しません。どうすれば修正できますか？
WPBeginnerサポート
アンカーリンクを他のページでも機能させたい場合は、メニューリンクにhttpsから最後まで完全なURLが含まれていることを確認する必要があります。そうすれば、この問題は解決するはずです。
管理者
ブシュラ・ムザッファル
役に立ちました… WordPressの新しいブロックエディターには、右側のサイドバーに「高度」タブがあります
WPBeginnerサポート
当社の記事がお役に立てて嬉しいです！
管理者
Jennifer
ありがとうございます!!完璧に機能しました
WPBeginnerサポート
ガイドがお役に立てて嬉しいです！
管理者
ジョー
私には機能しません – 他のページからサイドバーウィジェットにリンクしようとしていますが、これは私をイライラさせています
WPBeginnerサポート
その問題については、リンクが別のページにある場合、機能させるためには、その別のページの完全なURLに#アンカーを末尾に追加する必要があります。
管理者
チャルボニア・ボック
ありがとうございます。長い間苦労して助けを探していましたが、これらの指示に従った後、うまくいきました。
WPBeginnerサポート
グラック、私たちのガイドがお役に立ててよかったです
管理者
スティーブン・ムイルリ
非常に役立つ記事です。ブログに長めのコンテンツを含める予定ですが、アンカーリンクがあればナビゲーションとユーザビリティがより効率的になります。どうもありがとうございます。
WPBeginnerサポート
当社のガイドがお役に立てて嬉しいです
管理者
ニコ
素晴らしい、包括的な記事をありがとうございます！
WPBeginnerサポート
当社のガイドがお役に立てて嬉しいです
管理者
ミーガン
ボタンから同じページのヘッダーにアンカーリンクを追加するにはどうすればよいですか？
WPBeginnerサポート
そのためには、このガイドの手動方法を使用する必要があるかもしれません。
管理者
ロヒット・メータ
とても助かりました、ありがとうございます！
WPBeginnerサポート
当社のガイドがお役に立てて嬉しいです
管理者
ロバート
良いプレゼンテーションです。ただし、内部リンクされた各段落の最後に「ホーム」ボタンを提案することをお勧めします。
WPBeginnerサポート
それは個人的な好みですが、おすすめを共有していただきありがとうございます
管理者
マディ・シェーファー
とても参考になりました、ありがとうございます。アンカーリンクを簡単にコード化できました。
WPBeginnerサポート
当社のガイドがお役に立てて嬉しいです
管理者
フランチェスコ
こんにちは。投稿は非常に良いです。アンカーを使用して、ページから別のページへのリンクを作成するにはどうすればよいですか？別の特定のページ部分にリンクを作成したいです。
WPBeginnerサポート
アンカーリンクのあるページにリンクし、URLの末尾にidを追加します。
管理者
サミール
こんにちは、このチュートリアルをありがとうございます。
質問があります。私のホームページには、「私について」や「お問い合わせ」などのアンカーがいくつかあります。これらのアンカーはメニューヘッダー（WordPressのヘッダーを使用）にあります。
問題は、モバイルサイトで、ホームページでユーザーがメニューを開き、アンカーを選択すると、基本的に同じページを下にスクロールしますが、メニューバーが開いたままになることです。
アンカーをクリックしたときにメニューバーを閉じるにはどうすればよいですか？
ありがとうございます。
WPBeginnerサポート
メニューが正しく閉じられるように、現在使用しているテーマのサポートに問い合わせることをお勧めします。
管理者
ドン・ジョンソン
コンテンツエディタにアクセスする方法はどこに書いてありますか？
WPBeginnerサポート
投稿または固定ページを作成または編集する際に、コンテンツを編集できるようになります
管理者
NanPad
ページの上部に3つのアンカーリンクがあります。視聴者がアンカーリンク#1をクリックしてリンクが指すページ上の場所に移動した後、視聴者はどのようにして戻ってきて、アンカーリンク#2と#3をクリックできますか？
WPBeginnerサポート
それには、サイトに追加するためにカスタムJavaScriptまたはプラグインが必要になります。
管理者
ゴパール
非常に役立つ投稿
WPBeginnerサポート
ありがとうございます
管理者
ダイアン
これは、あるページから別のページのアンカーへのリンクオプションには対応していないようです。WordPressで可能ですか？
WPBeginnerサポート
このガイドを使用してから、ウェブ上の任意のページの特定のセクションへのアンカーリンクを使用できます。
管理者
ジョン
かなり良い記事ですが、別のページにアンカーを配置するために必要なステップが抜けています！非常に重要です。
WPBeginnerサポート
これらの手順に従えば、リンクが別のページにあっても機能するはずです。
管理者
オキラ・ジェイムス
皆さん、この投稿をありがとうございます。このプラットフォームを見つけてから毎日学んでいます。
WPBeginnerサポート
どういたしまして、コンテンツがお役に立てて嬉しいです
管理者
シーラ
あなたが話しているブロックとは何ですか？このチュートリアルを理解できませんでした。
WPBeginnerサポート
このチュートリアルでは、Gutenberg/ブロックエディターを使用しています。ご質問の内容からすると、おそらくクラシックエディターを使用されていると思われます。
管理者
エイモス・ストラック
非常に役立つ情報です。ビデオを使って説明していただけるとさらに良いでしょう。
WPBeginnerサポート
可能であれば、ビデオの作成を検討します
管理者