長文のブログ記事を最後まで読ませる!アンカーリンクを使った「読み飛ばしボタン」の設置方法

コンバージョン率が2倍に!

スポンサーリンク

どうも。ニート(風味)のさとし』です。

(いや誰だよ?という方は>>こちら

 

SEOを意識して記事を書くと、どうしても長文の記事にしなくちゃいけないことがある。

ぼくも3000字程度だった記事を1万字を超える記事にリライトして上位表示したんだけど、

全然成約率が上がらなくて困ってたんだよね。

理由は、最後まで読んでもらえないから。

もちろん、ぼくなりに最後まで読んでもらえるように文章の組み立ては工夫してる。

でも、問題はもっと根本的なところにあったんだ。

 

さとし』
たんに長文を読むのがめんどくさいみたい☆

 

そこでぼくは「読み飛ばしボタン」を設置してみたんだ。

すると、その直後から最後まで読んでくれる人が激増。

アフィリエイトの成約数が2倍になっちゃった!

これはさすがにおどろいたよ。

というわけで、この方法を紹介しておこうと思う。

長文記事で検索上位をとってるけど記事を最後まで読んでもらえないと悩んでるあなたには役立つはずだよ。

なんでアンカーリンクを設置すると長文記事が最後まで読まれるの?

例えば、アフィリエイト記事を書く場合、こんな構成が多いよね。

  1. この記事で書いてることをさっくり紹介
  2. 自分が悩んでいたこと
  3. 悩んでいた原因
  4. 悩みを解決する方法
  5. その方法を実践するために使った商品(サービス)

もちろん、きちんと読みたい人にとってはこの構成はとても親切なんだけど、なかには

「いやこまけえこと良いから結論だけ教えてくれよ」

というせっかちな人もいる。

とくに長文記事の場合、③④あたりを長く書かなくちゃいけないことがあるから、最後まで待てなかったりする。

そんなときにアンカーリンクを設置すると、途中で結論が知りたくなったときにすぐ移動することができ、サクサク読めるようになるんだ。

スポンサーリンク

長文記事を最後まで読ませるアンカーリンクはどこに設置したら良いの?

じゃあどこに挿入すればいいの?って話だよね。

ざくっと言えば、

  1. 結論だけ知りたい人が読まなそうな文章の直前にリンク元を設置して
  2. 結論が書いてあるところの見出しに着地させる

さっきの例でみると、こんな感じ。

  1. この記事で書いてることをさっくり紹介
  2. 自分が悩んでいたこと←この直前から④に飛ばす
  3. 悩んでいた原因←この直前から④に飛ばす
  4. 悩みを解決する方法
  5. その方法を実践するために使う商品(サービス)

長文記事を最後まで読ませるアンカーリンクの使い方

アンカーリンクっていうのは、同じページ内を移動させるために設置するリンクのことだよ。

言葉だと分かりにくいから、実際に例を出してみよう。

アンカーリンクとはこれだ!

 

ぶっ飛びます

 

 

 

ね?飛んできたでしょ?

 

アンカーリンクをうまく使ってページ内ジャンプできるようにすると、読者は自分の読みたいところだけ読めるようになって便利なんだ。

「良い内容っぽいけど、長くて最後まで読むのかったるいからやーめた」

ってなるのを防ぐことができる。

僕の使っているWordPressテーマ「ストーク」を使えば、キレイなボタンをカンタンに設置できる。より読者にとって読みやすくできるよ。

こんなふうに。

 

 

どう?

 

スポンサーリンク

長文記事を最後まで読ませるアンカーリンクの設置方法

ワードプレスでの設置方法を説明していこう。

ビジュアルエディタの場合(Wordpress)

まずは、ジャンプしたときの着地先を決めよう。

着地させたい場所を選択し、上のタスクバーの中から「アンカー」という項目をさがそう。

おそらく「挿入」のドロップダウンメニューに入ってるはず。

選択すると、「ID」を入れる項目が出てくる。

これはいわば、アンカーリンクの名前だね。

ID は自由だけど、「半角英字で始め、英数字、ダッシュ、ドット、コロン、下線のみ使用する」必要があるよ。

ここでは「sample1」と名前を付けとく。

で、次はリンク元を決める。

さっきの例でいくと「これがアンカーリンクだ!」の部分だね。

 

貼り方自体は通常のリンクと一緒だよ。

①まずリンク元にしたい箇所を(下の画像でいうと「アンカーリンクとはこれだ!」の部分)選択し、リンクの挿入/編集をクリック。

②すると、リンク先を設定する窓が出てくる。

そしたら、さっき作ったリンク名を入れる。

ただし!リンク名の前に「#(半角)」を忘れず付けよう。

「#リンク名」だよ。

 

文字色がリンクの色に変化したら設置完了!

プレビューで試してみてみよう。

テキストエディタの場合(Wordpress・はてなブログ)

ちなみに、テキストエディタで作る場合はこちら。

<a href=”#(アンカーリンクのID)”>リンク元の文章をはさむ</a>
<a name=”(アンカーリンクのID)”></a>←ジャンプさせたい場所の左側におく

補足:ページ内ジャンプにスクロール動作を付ける

ただジャンプするだけじゃ物足りない!もっとかっこよくページ内ジャンプさせたい!

という場合には、

「Easy Smooth Scroll Links」というプラグインを導入してみて。

ページ内をジャンプするときにスクロールする動きをつけることができるよ。

ワードプレス>プラグイン>新規追加で「Easy Smooth Scroll Links」で検索>インストール>有効化

すればOK。

まとめ

今日は長文のブログ記事を最後まで読まれるための「読み飛ばしボタン」の付け方をまとめたよ。

実際やってみると分かるんだけど、おもしろいほど…を通り越して「いや、ここもっと読んでほしいんだけど」と悲しくなるほどクリックされる。

これ、色が赤いところほどたくさんクリックされてるってこと。

もし、SEO対策のために長文記事を書いたけど最後まで読んでもらえなくて困ってるなら、試してみてくださいな。

ではでは。

 

さとし』に無料で質問できるLINE@の登録はこちら!
働き方のこと、ブログのこと、お気軽にどうぞ~。

さとし』のLINE@の詳細は>>こちら

 

関連コンテンツ