リンクのプレビューは、読者がクリックしたときに何が待っているのか、こっそりと覗き見ることができます。
プレビューが内部リンクのためのもので、それが面白そうであれば、ユーザーはクリックしてサイトを探索する可能性が高くなります。裏を返せば、もしそのリンクがユーザーにとって必要なものでなければ、ユーザーはもっと自分に合ったものを探し続けることができます。
WordPressユーザーの多くは、サイト上でリンクのライブプレビューを表示するコードフリーの方法を探しています。
それはわかります。技術的なノウハウや危険なプラグインを必須としない解決策を見つけるのはイライラするものです。だからこそ、私たちはWordPressユーザーにとって最適なコード不要のソリューションを調査しました。
広範なテストの結果、WordPressサイトにリンクプレビューを追加する簡単な方法を見つけました。このガイドでは、その方法をご紹介します。
WordPressサイトにリンクのライブプレビューを追加するタイミング
一般的なWordPressサイトでは、リンクの中身が表示されません。そのため、訪問者がリンクをクリックしたときに期待したものと違うことに気づき、イライラすることがあります。そこで便利なのがライブリンクプレビューです。
ライブリンクプレビューは通常、ツールチップのように見えます。誰かがリンクの上にマウスを移動させるとポップアップし、コンテンツのプレビューを表示します。
オンラインショップの場合、リンクに商品の写真や簡単な詳細を表示させることで、売上を伸ばすことができる。
WordPressブログを運営している場合、読者にもっと見たいと思わせるために投稿画像や短いテキストを表示することができます。また、外部リンクの場合、これらのツールチッププレビューは、サイトを離れるかどうかを判断するのに役立ちます。
ただし、ライブプレビューを使用する際には注意が必要です。多すぎると訪問者を混乱させてしまいます。最も役立つ重要なリンクにのみ使用するのがベストです。
それを念頭に置いて、WordPressサイトにライブリンクプレビューを追加する簡単な方法を見てみましょう。このチュートリアルでは、以下のクイックリンクを使ってナビゲーションすることができます:
ステップ1:Bright Link Previewsプラグインのインストール
WordPressでリンクにツールチッププレビューを追加する最も簡単な方法は、Bright Link Previewsプラグインを使用することです。このWordPressプラグインを有効化すると、投稿やページに内部リンクや外部リンクのライブプレビューが自動的に追加されます。
まず、管理エリアにプラグインをインストールします。ステップバイステップの手順については、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。
設定が完了したら、Settings ” Bright Linksに進みます。ここでプラグインの設定を行います。
ステップ2:リンクのツールチッププレビューのデザインをカスタマイズする
まず、外観 タブでライブプレビューのデザインを設定しましょう。
上部では、背景色(左側)と文字色(右側)を選択できます。
カラーボックスをクリックすると、カラーピッカーツールが外観表示されます。
WooCommerce、Amazon、Shopifyサイトからのeコマースリンクに自動的に外観される価格ホットスポットの色も選択できます。
ツールチップと同じように、左側にホットスポットの背景色、右側にテキストの色を選択するだけです。
その下には「Choose size」があり、リサイザーバーのドットをドラッグすることでツールチップを小さくしたり大きくしたりできる。
大きければ大きいほど、ユーザーはリンク情報を読みやすくなります。とはいえ、ツールチップのサイズもユーザーエクスペリエンスに影響を与える可能性があるので、あなたのサイトデザインに合ったサイズを見つけてください。
下にスクロールすると、ツールチップのスタイルを変更できます。初期設定では3つのオプションがあり、後でいつでも切り替えることができます。
ツールチップの見た目に満足したら、一番下の「保存」をクリックします。
ステップ3:リンクのライブプレビュー設定を行う
次に、「設定」タブに切り替える。
ここでは、リンクのライブプレビューの動作を設定できます。
ブライトリンクプレビューでは、投稿、ページ、ユーザーコメント、JavaScriptセレクタや画像と一致するリンクにツールチッププレビューを適用することができます。
あちこちに追加するとユーザーエクスペリエンスが損なわれる可能性があるため、投稿とページだけに追加することにした。
もう一つ設定できることは、クリックカウンターを表示するかどうかです。この設定を’no’から’yes’に変更すると、マウスオーバーしているリンクをクリックしたユーザーの数がツールチップに表示されます。
これは、FOMOの感覚を刺激し、訪問者があなたのサイトをさらに探索するよう促すことができるので、内部リンクに役立ちます。
とはいえ、外部リンクにもライブプレビューを追加したい場合は、この機能を有効化することはお勧めしません。逆効果になり、サイトからの離脱を招く可能性があります。
そういえば、内部リンク、外部リンク、またはその両方にライブプレビューを追加するかどうかを選択できます。
どのようなサイトを運営されているかによりますが、ページビューを増やし、直帰率を下げるには、内部リンクの設置をお勧めします。
次に、WordPressサイトのパフォーマンスを高速化するために、プレビューをキャッシュすることもできます。
外部リンクにライブプレビューを追加する場合、リンクが新しいタブで開くように、リンクにtarget blank属性を強制することもできます。ユーザーが誤ってサイトから離脱しないよう、この機能を有効化することをお勧めします。
最後に、小さい画面ではツールチップがユーザーエクスペリエンスを低下させる可能性があるため、モバイルではツールチップを無効化することもできます。この機能を試してみて、あなたのサイトに最適な機能を確認することをお勧めします。
詳しくは、WordPressサイトをデスクトップからモバイルで表示する方法をご覧ください。
ライブプレビューの設定に満足したら、「保存」をクリックします。
ステップ4:リンクツールチップのプレビューを見る
この段階で、あなたのサイトをプレビューして、ツールチップがどのように見えるかを確認することができます。
クリックカウンターを表示しない場合は、このようになります:
クリックカウンターを追加すると、リンクがこれまでにクリックされた回数を示す小さなメモが表示されます。
その選択は次のようになる:
ブライトリンクスプレビューの素晴らしいところは、何人のユーザーがあなたのリンクをクリックしたのか、あるいはマウスオーバーしたのかを表示する無料の分析機能があることです。
これは、多くのユーザーがどの投稿に興味を持っているかを見たり、どの新着投稿をハイライトするかを決めるのに役立ちます。
これらの数字を見るには、WordPressの管理画面から設定 ” Bright Linksに 行き、「統計」タブに切り替えてください。
ボーナスのヒントスキーママークアップでWordPressのリンクプレビューをきれいにする
ブライトリンクプレビューは、あなたのページや投稿からメタデータを自動的に取得し、リンクのライブプレビューを作成します。つまり、リンクプレビューのクオリティは、メタデータの設定次第ということです。
WordPressの強力なSEOプラグインであるAll In One SEO(AIOSEO)を使えば、投稿記事にメタデータを追加することができる。このプラグインにはスキーマ機能があり、コンテンツに構造化データを簡単に追加することができる。
Bright Links Previewは、より良いプレビューを作成するのに役立つだけでなく、検索エンジンにコンテンツに関するより多くのコンテキストを提供し、WordPressのSEOパフォーマンスを向上させる可能性があります。
コンテンツにスキーママークアップを追加したい場合は、以下の投稿をご覧ください:
- WordPressでスキーママークアップを追加する方法
- WordPressでSEOフレンドリーな「How to」スキーマを適切に追加する方法
- WordPressでFacebookのオープングラフ・メタ情報を追加する方法
WordPressのデザイン機能をもっと見る
WordPressサイトのデザインをもっと面白くしたいですか?役立つガイドをご覧ください:
- ブログ投稿にシンプルでエレガントな脚注を使用し、追加情報を追加する。
- パンくずリストナビゲーションリンクを表示することで、訪問者がサイト内のどこにいるかを把握しやすくなります。
- スクロールするニュースティッカーを作成し、重要な更新を訪問者と共有する。
- カウントダウンタイマーウィジェットを使って、特別なイベントの盛り上がりを作る
- 投稿にプログレスバーを追加し、読者の興味を引きつける。
- カスタムシェイプのカスタマイザーを作成し、サイトデザインをより面白くします。
WordPressでリンクのライブプレビューを表示する方法について、この投稿がお役に立てれば幸いです。また、WordPressで最も優れたドラッグアンドドロップページビルダーのリストや、WordPressサイトの編集方法に関するガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Colin says
Thanks for the article, that plugin has ceased operation and is no longer downloadable, if you had a new suggestion that works I’d greatly appreciate it. The RT Media paid version isn’t up to scratch and there’s not a lot to be found via Google.
WPBeginner Support says
Thank you for letting us know, we will be sure to look into updating this article
管理者
Marcus Quiroga says
Hi,
Is there an update of this function nowadays? I’m trying it on external links at. Does someone could help me with that?
thank you
WPBeginner Staff says
Thanks for correcting us, we have updated the article.
Tim Roberts says
How do you get this to on work on specifc links.
WPBeginner Staff says
Unfortunately plugin does not have a way to show preview for selective links you can only choose from all, internal, or external links.
Bruce Brown says
Select the “class” option, then put the class on the links you want to display.
Per Søderlind says
Hi, I’m the plugin author.
You can get this to work on specific links by adding class=”wp-live-preview” to the link, and in the settings page set ‘Live Preview Links’ to ‘class=”wp-live-preview’. See the demo links on my site.