WordPressでリンクのライブプレビューを表示する方法

リンクのプレビューは、読者がクリックしたときに何が待っているのか、こっそりと覗き見ることができます。

プレビューが内部リンクのためのもので、それが面白そうであれば、ユーザーはクリックしてサイトを探索する可能性が高くなります。裏を返せば、もしそのリンクがユーザーにとって必要なものでなければ、ユーザーはもっと自分に合ったものを探し続けることができます。

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.