2021/06/13 (更新日: 2021/12/02)

【WordPress】ページ内リンク(アンカー)の設定方法

ブログ

※本ページにはプロモーションが含まれている場合があります。

こんな方におすすめです。

・「ページ内リンク(アンカーリンク)の貼り方を知りたい！」
・「SEOに効果的なページ内リンクの貼り方を知りたい！」
・「ページ内リンクのSEOの効果を知りたい！」

本記事の内容

ページ内リンクの基礎知識
WordPressでページ内リンクを貼る方法
プラグインでページ内リンクをスクロールさせる方法
ページ内リンクについてのQ&A
ページ内リンクのSEO効果

ページ内リンクはとっても簡単に設置することができます。

本記事を読むと、効率よくサクサクページ内リンクを貼る方法やSEOに効果的なページ内リンクの貼り方がわかります。

以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪

なべたろの実績

ライター100名以上の組織の法人を経営→株式譲渡
立ち上げから半年で月間1,000万PVを達成
1年で月間1200万PVを達成
年商約1億円を達成
法人向けコンサル1社あたり月額60~100万円
PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数

＼　月間1300万PVのプロが解説　／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！

【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！ブログのSEO対策にも『抑えどころ』があります。検索順位1位を取りまくってブログを爆速で伸ばすためのSEOの基礎から『抑えどころ』まで約4万文字でプロが解説。読者にもGoogleにも評価されるSEO対策とブログ作りのノウハウがまる分かり。初心者から中級者まで学べるブログのSEO戦略の決定版。

WordPressでページ内リンクを設置したい！
WordPressでページ内リンクを貼る方法
- ①リンク先(アンカー)を設定する
- ②リンク元を設定する
WordPressのプラグインでページ内リンクをスクロールさせる
WordPressのページ内リンクのQ&A
- ページ内リンクが動作しない
- 別のページの特定の位置に遷移させる
ページ内リンクのSEO効果
ページ内リンクでユーザビリティを高めよう！

WordPressでページ内リンクを設置したい！

ページ内リンクはアンカーリンクとも呼ばれ、同じページ内の特定の場所に移動することのできるリンクを表します。

外部リンクは自分のブログ(サイト)以外のサイトへのリンク、内部リンクは同じブログ(サイト)の別のページへのリンクですが、ページ内リンクは同じページ内の特定の場所へのリンクであることが特徴です。

以下のテキストはページ内リンクのサンプルです。

>> ページ内リンクの「移動先のサンプル」に移動

上記のリンクをクリックすると、この同じページの中で移動できるはずです。

見た目は外部リンクや内部リンクと変わりませんが、これがページ内リンクです。サンプルをクリックしてもわかるように、外部リンクや内部リンクとは違ってページの読み込みが行われず瞬時に移動することができます。

ページ内リンクの移動先のサンプル

ページ内リンクのサンプルのリンクをクリックしたらここに遷移します。
元の場所に戻るにはここをクリックしてください。

ページ内リンクの使い所とメリット

怠け者ブロガー「ページ内にまでリンクを設置するなんてめんどくさいなあ。」

ちゃんとメリットがあるから積極的に使おうね♪

ページ内リンクは以下のような目的で設置します。

読者に読む場所を選択してもらう時
　(例)：「すぐに使い方だけ知りたい方はこちら。」
そのページで既に解説している内容を再度確認したい時
　(例)「〇〇〇〇で解説した通り、」
後から解説する箇所を先に読みたい時
　(例)「後ほど第○章の〇〇〇で詳しく解説しますが、」

上記のような箇所でページ内リンクを使うことで、読者が読みたい箇所をスムーズに読むことができるようになり、記事の利便性が上がります。

利便性が上がることで以下のようなメリットがあります。

読者が情報を求めて記事内をさまようことがなくなり、SEOで良い評価を受ける
読者のストレスが減るので離脱率が下がり、SEOで良い評価を受ける

つまり読者にも役立ってGoogleからも良い評価を受けて、売上が伸びることにもつながって、良いことづくめのコンテンツがページ内リンクです。

⇡目次へ戻る

WordPressでページ内リンクを貼る方法

ページ内リンクを貼るには以下の2ステップで行います。

リンク先(アンカー)を設定する
リンク元を設定する

つまりリンク先とリンク元の2つを設定することでページ内リンクを実現できます。

それぞれ順に詳しく解説していきます。

とっても簡単だから安心してね♪

①リンク先(アンカー)を設定する

まずはリンク先(アンカー)を設定します。

本記事の冒頭でご紹介したサンプルでは、以下の画像の箇所がリンク先(アンカー)に該当します。

WordPressでアンカーを設定する方法は2つあります。

方法①テキストエディタからHTMLで自分で記述する方法
方法②プラグインを利用して設置する方法

より早く行うことができるのは方法②のプラグインを利用した方法ですが、基礎を理解するためにまずは方法①のHTMLで自分で記述する方法から把握しておきましょう。

リンク先(アンカー)の設定方法

リンク先であるアンカーを設定するには、リンク先にしたい箇所のHTMLタグに以下のように任意の文字列でid属性を設定します。

id=”XXX”

XXXの箇所を任意の文字列に変更して、上記のid属性をHTMLタグに設定するだけでアンカーの設定は完了です。

注意

※idは半角英数字と「_(アンダーバー)」「-(ハイフン)」などの一部の記号のみ使用可能です。
※idの頭文字は必ずアルファベットから初めてください。数字や記号を頭文字にすると適切に動作しません。

アンカーはimgタグでもhタグでもaタグでもその他のタグでも自由なタグに設置することが可能です。

＜例１：h2タグにアンカーを設置する場合＞

＜例2：imgタグにアンカーを設置する場合＞

本記事冒頭のサンプルのページ内リンクのアンカーのHTMLは以下のようになっています。

1枚目がプレビュー画像、2枚目が同じ部分のHTMLです。

上記のサンプルではdivをリンク先に設定しています。

Advanced Editor Toolsで素早く貼る方法

続いて、Advanced Editor Tools (旧名 TinyMCE Advanced)というプラグインを使ってリンク先(アンカー)を素早く貼る方法を解説します。

「リンク元の設置を先に知りたいよ！」という方は次の見出しの「②リンク元を設置する」までスキップしてください。

プラグインなしで設置する場合でもHTMLにidを記述するだけなので簡単ですが、Advanced Editor Toolsを使えばビジュアルエディタからサクサクとアンカーを設置することができます。

何記事も書いてページ内リンクもいくつも設置しているとかかる時間もちりつもでどんどん増えていくので、効率化できることは効率化することをおすすめします。

Advanced Editor Toolsでアンカーを設置する手順

>> Advanced Editor Tools (旧名 TinyMCE Advanced)

まずは上記のAdvanced Editor Toolsというプラグインをインストールしてください。

Advanced Editor Toolsとは？

「Advanced Editor Tools」とは、元々は「TinyMCE Advanced」という名前のプラグインで、WordPressのビジュアルエディタの機能を拡張することのできるプラグインです。表や下線などの文字装飾のためのボタンを追加することができます。

WordPressの管理画面で「設定」の「Advanced Editor Tools(TinyMCE Advanced)」をクリックします。

ブロックエディタと旧エディタ(クラシックエディタ)の選択項目があるので、ご自身が利用しているエディタを選択して設定画面を開きます。

上記の画像のように「アンカー」のブロックを見つけて画面上部のエディタの中にドラックアンドドロップして追加します。

すると画像のように、アンカーのマークがエディタに追加されます。下準備はこれで完了です。

続いて投稿画面で実際にアンカーを設定する方法を解説します。

投稿の編集画面を開くと、先ほど追加したアンカーのマークがエディタに追加されています。

アンカーを挿入したい箇所にカーソルを合わせたら、アンカーのマークをクリックします。

ブロックエディタをご利用の場合は、「Classic Paragraph」をクリックするとエディタメニューが表示されます。

アンカーのidを設定する画面が表示されるので、任意の文字列でidを設定します。

注意

idを入力してOKを押したらエディタの画面に戻ります。上記の画像のようにアンカーのマークが表示されているので、これでアンカーの設置が完了です。

このように、Advanced Editor Toolsを使うことで「テキスト」のエディタから自分でHTMLを触らなくても「ビジュアル」のエディタ画面でボタンをクリックするだけですぐにアンカーを設置することができます。

さくっとアンカーを設置できて便利だね♪

②リンク元を設定する

①の手順でリンク先となるアンカーを設置できたので、あとはリンク元を設置すればページ内リンクの設置は完了です。

本記事のサンプルでは以下の画像の箇所がリンク元になります。

見た目は通常のリンクです。

それでは設置方法を解説します。

「テキスト」エディタ(HTML)でリンク元を設定する方法

リンク元の設定方法も、自分でHTMLを編集する方法と「ビジュアル」エディタから行う方法の2つをご紹介します。

基礎的な仕組みを理解するために、リンク元の設置もまずはHTMLでの方法をご紹介します。

リンク元を設置するには、aタグのhref属性の値を「#XXX」(XXXはリンク先のidの文字列)にするだけです。リンク先に指定したidの文字列の前に#(ハッシュタグ)をつけて指定します。

＜リンク先のidが「to-link」の場合のリンク元の例＞

<a href=”#to-link“>リンク元のテキスト</a>

本記事冒頭のページ内リンクのサンプルのリンク元のHTMLは以下のようになっています。

リンク元のidを「to-sample」に設定しているので、上記のリンク元のhref属性の値は「#to-sample」になっています。

「ビジュアル」エディタでリンク元を設定する方法

続いて「ビジュアル」エディタでリンク元を設定する方法を解説します。

通常のリンクを挿入する場合と同様に、リンクにしたいテキストを選択してリンクのマークをクリックします。

リンクのURLを入力する欄が表示されるので、「#XXX」(XXXはリンク先のidの文字列)と入力すれば完了です。リンク先に指定したidの文字列の前に#(ハッシュタグ)をつけて指定します。

①②の手順でリンク先(アンカー)とリンク元を設置したらページ内リンクの設定は完了です。投稿のプレビュー画面からリンクを実際にクリックしてみてください。

うまく動作しない場合は、後述の「ページ内リンクが動作しない」の見出しをご覧ください。

⇡目次へ戻る

WordPressのプラグインでページ内リンクをスクロールさせる

ここまででページ内リンクの設置は完了ですが、このままだとページ内リンクをクリックした時に瞬時に遷移してしまい、どこに飛ばされたのか読者が混乱する可能性があります。

そのため、ページ内リンクをクリックした時に瞬時に遷移させるのではなく、スクロールして遷移するようにプラグインで設定するのがおすすめです。

ページ内リンクの遷移をスクロールでさせることによって以下のようなメリットがあります。

どこに移動しているのか読者が理解できる
よって今どこを読んでいるのかを把握できて利便性が上がる
スクロールではなくあちこちワープのように遷移させられると混乱して離脱に繋がる

ページ内リンクをスクロール遷移させる設定方法

>> Easy Smooth Scroll Links

まずは、スクロールで遷移させる設定を行うためのプラグインであるEasy Smooth Scroll Linksをインストールして有効化します。

有効化したら、WordPressの管理画面の「設定」の「Easy Smooth Scroll Links」をクリックし、上記の画像のような設定画面を開きます。