当サイトはアフィリエイトプログラムに参加しています。

WordPress ブロックエディタでページ内にリンクを貼る(アンカーリンクを設定する)

WordPressでブログを書いているけど、記事内の特定の場所に読者をスムーズに誘導したいと思ったことがありませんか?そんな時に便利なのが、アンカーリンクです。読者の利便性向上だけでなく、SEO効果も期待できるアンカーリンク。初心者でもできるWordPressのブロックエディタを使ったアンカーリンクの設置方法を紹介します。

同じページ内にアンカーリンクを設定する

1.同ページ内に、以下の図にある「夏目漱石」から、「夏目漱石(1867-1916)のプロフィール」ブロックへアンカーリンクを設定します。

アンカーリンク画像1

2.リンク元の要素「夏目漱石」を選択し、メニューバーリンクをクリックします。

アンカーリンク画像2

3.ボックスの空欄にハッシュタグを付けて、任意の文字列を入力(ここでは#natsumeと入力)し、Enterキーを入力か、矢印をクリックし、下書きを保存します。

アンカーリンク画像3

4.リンクが設定されます。

アンカーリンク画像4

5.リンク先の「夏目漱石のプロフィール」を選択し、リンク先の要素HTMLアンカーを付けます。右側の設定サイドバー設定カラムのアイコン(赤矢印上)をクリックして開きます。「ブロック」が選択されているのを確認します。

アンカーリンク画像5

6.設定サイドバーの下にある「高度な設定」の下矢印をクリックし、「HTMLアンカー」のボックスにリンク元と同じ文字列(#は付けずに)を入力し、下書きを保存します。

アンカーリンク画像6

7.ブロックエディターの左上にあるドキュメント外観アイコンをクリックすると、段落夏目漱石のプロフィール」の中に、アンカーが設置されたのが確認できます。

8.内部リンクが設置されました。
夏目漱石」の文言をクリックします。

アンカーリンク画像7

9.「夏目漱石のプロフィール」の文言が、記事ページの冒頭に移動します。

アンカーリンク画像8

別の記事ページのリンク先へアンカーリンクを設置する

1.別のページの指定した場所へ移動するアンカーリンクの設置をします。
「夏目漱石 吾輩は猫である」ページから、「プロフィール」のページ内の「夏目漱石のプロフィール」

ブロックにアンカーリンクを設置します。
まず、移動先のURLを確認します。「プロフィール」を開き、右側設定サイド下にあるリンク記事IDになります。
移動先のURL、「https:/www.自分のドメイン/post-1399/」となります。

アンカーリンク画像9

2.リンク先の要素「夏目漱石」を選択し、HTMLアンカーに「natsume(#は付けずに)を入力し、下書き保存します。

アンカーリンク画像10

3.ドキュメント外観(左上の三本線のアイコン)アイコンをクリックすると、段落夏目漱石のプロフィール」の中に、アンカーが設置されたのがわかります。

アンカーリンク画像11

4.「夏目漱石 吾輩は猫である」の「夏目漱石」ブロックに先程のリンク先に「#natsume」を追加して入力します。リンク先URL、「https://www.ドメイン名/post-1399/#natsume」を入力して Enterキーをクリックして、下書きを保存します。

アンカーリンク画像12

5.夏目漱石の文字をクリックすると、えんぴつアイコンがあらわれ、クリックすると「リンクの編集」が引き出されます。

アンカーリンク画像13

6.新しいタブで開きたい場合は、リンクの編集の「高度」のボックスにチェックを入れ、保存後、下書きを保存します。

アンカーリンク画像16

7.「プレヴューの表示、または表示」をクリックして、指定した記事ページの位置に遷移すればOKです。

アンカーリンクを作成する際の注意点

  • HTMLアンカーの重複を避ける
    同じページの中では、アンカー名を指定するのは一つだけ、同じページ内に同じ名前のアンカーを複数作成すると、リンク先が曖昧になり、意図した場所に遷移しないことがあります。
  • HTMLアンカーはわかりやすい名前をつける
    アンカーの名前は、後から編集する際にもわかりやすいように、内容を簡潔に表す単語やフレーズを選びましょう。
  • アンカーリンク先のブロックの選択
    アンカーリンクの設置場所としては、見出しブロックが分かりやすく、SEOにも効果的です。
    各セクションの最初にアンカーリンクを設置することで、読者が目的の場所へスムーズに移動できます。
  • 定期的な確認
    定期的にアンカーリンクが正しく機能しているか確認し、リンク切れが発生していないか確認しましょう。コン記事の内容が変更になった場合は、それに合わせてアンカーリンクも修正する必要があります。

まとめ

アンカーリンクは、SEO対策において、ページの構造を明確にし、キーワードの強化、ユーザーの行動を促すなど、様々なメリットをもたらします。適切なアンカーリンクの設置は、SEO効果を高め、ウェブサイトの検索順位向上に貢献します。