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

読者がリンクをクリックすることにどれほどためらうか気づいたことはありませんか？リンクプレビューは、訪問者に次に何が待っているかのチラ見せを提供することで、この問題を解決します💡

ウィキのようなコンテンツが豊富なサイトでこのテクニックをよく目にしますが、視覚的なリンクプレビューは、読者が相互に関連する記事をより効率的にナビゲートするのに役立ちます。

読者はクリックする前にリンクの内容を確認できるため、興味のある関連コンテンツをさらに探索する可能性が高まります。さらに、ニーズに関連しないリンクをクリックすることを避けるのに役立ちます。

多くのWordPressユーザーは、コードに触れることなく美しいリンクプレビューを追加する方法を尋ねてきます。さまざまなソリューションをテストした後、初心者にとって非常に効果的な、簡単なコード不要の方法を見つけました。

WordPressサイトでリンクのライブプレビューを追加するタイミング 🤔

通常のWordPressウェブサイトでは、リンクは中身を表示しません。これは、訪問者がリンクをクリックして期待と違うものを見つけた場合に、不満を感じさせる可能性があります。そこでライブリンクプレビューが役立ちます。

ライブリンクのプレビューは通常、ツールチップのように見えます。このWordPressのデザイン要素は、誰かがリンクの上にマウスを移動すると表示され、コンテンツのプレビューが表示されます。

オンラインストアの場合、リンクに商品画像や短い詳細を表示して売上を伸ばすことができます。

WordPressブログを実行している場合、投稿プレビュー画像や短いテキストを表示して、読者がもっと見たいと思わせることができます。外部リンクについては、これらのツールチッププレビューは、ユーザーがサイトを離れるかどうかを判断するのに役立ちます。

ただし、ライブプレビューの使用には注意が必要です。多すぎると訪問者を混乱させる可能性があります。最も役立つ重要なリンクにのみ使用するのが最善です。

これを踏まえ、WordPressサイトにライブリンクプレビューを追加する簡単な方法を見てみましょう。この方法は、Gutenbergブロックエディター、クラシックエディター、またはテーマビルダーを使用しているかどうかにかかわらず機能します。以下のクイックリンクを使用して、このチュートリアルを進めることができます。

• ステップ1：Bright Link Previewsプラグインをインストールする
• ステップ2：リンクのツールチッププレビューのデザインをカスタマイズする
• ステップ3：リンクのライブプレビュー設定を構成する
• ステップ4：リンクツールチッププレビューを実際に確認する
• Bonus Tip: Clean Up Your WordPress Link Previews With Schema Markup

ステップ1：Bright Link Previewsプラグインをインストールする

WordPressでリンクにツールチッププレビューを追加する最も簡単な方法は、Bright Link Previewsプラグインを使用することです。このWordPressリンクプレビュープラグインを有効にすると、投稿やページ内の内部リンクおよび外部リンクのライブプレビューが自動的に追加されます。

まず、管理エリアにプラグインをインストールしてください。手順については、WordPress プラグインのインストール方法に関する初心者向けガイドをお読みください。

完了したら、**設定 » Bright Links**に移動します。ここでプラグインの設定を構成できます。

ステップ 2: リンクのツールチッププレビューのデザインをカスタマイズする

まず、外観タブでライブプレビューのデザインを設定しましょう。

上部では、背景色（左側）と文字色（右側）を選択できます。

カラーボックスをクリックするだけで、カラーピッカーツールが表示されます。

また、価格のホットスポットの色を選択することもできます。これは、WooCommerce、Amazon、およびShopifyサイトからのeコマースリンクに自動的に表示されます。

ツールチップと同様に、左側でホットスポットの背景色を、右側でテキスト色を選択するだけです。

その下には「サイズを選択」があり、リサイザーバーのドットをドラッグしてツールチップを小さくしたり大きくしたりできます。

より大きなツールチップは読みやすいですが、ページ上の重要な部分をオーバーラップしたり隠したりしないように注意する必要があります。

デザインに合った最適なサイズを見つけるために、サイトでプレビューすることをお勧めします。

下にスクロールすると、ツールチップ自体のスタイルを変更できます。デフォルトで3つのオプションがあり、いつでも後で切り替えることができます。

ツールチップの外観に満足したら、下部にある「保存」をクリックするだけです。

ステップ3：リンクのライブプレビュー設定を構成する

次に、「設定」タブに切り替えます。

ここでリンクのライブプレビューの動作を設定できます。

Bright Links Preview を使用すると、投稿、ページ、さらにはコメントセクションのリンクにツールチッププレビューを適用できます。

ユーザーエクスペリエンスを妨げる可能性があるため、すべての場所にそれらを追加するのではなく、投稿とページにのみ追加することにしました。

クリックカウンターを表示するかどうかも設定できます。この設定を「いいえ」から「はい」に変更すると、ツールチップに、訪問者がホバーしているリンクをクリックしたユーザー数が表示されます。

これは内部リンクにとって役立ちます。なぜなら、それはソーシャルプルーフとして機能するからです。訪問者はリンクが人気であることを知ると、より多くのコンテンツを探索するようになります。

とはいえ、外部リンクにもライブプレビューを追加したい場合は、この機能を有効にすることは推奨しません。逆効果になり、ユーザーがサイトから離れてしまう可能性があります。

話は変わりますが、内部リンク、外部リンク、またはその両方にライブプレビューを追加するかどうかを選択できます。

選択は、どのような種類のウェブサイトを実行しているかによって異なりますが、一般的にはページビューを増やし、直帰率を減らすために内部リンクのみを使用することをお勧めします。

選択はあなたの目標次第です。簡単な内訳は次のとおりです。

• 内部リンク：エンゲージメントを高めるのに最適です。プレビューにより、ユーザーはより多くの自分のコンテンツを発見するようになり、ページビューを増やし、直帰率を下げることができます。
• 外部リンク: これは、オーディエンスとの信頼関係を築くのに役立ちます。外部リンクのプレビューを表示することで、リンクが関連性があり安全であることをユーザーに保証し、推奨事項に対する自信を高めます。

ページビューを増やし、直帰率を減らすために、通常は内部リンクのみを使用することをお勧めします。ページビューを増やし、直帰率を減らす。

次に、プレビューをキャッシュしてウェブサイトのパフォーマンスを向上させることを選択できます。これを有効にしておくことを強くお勧めします。

キャッシュはリンクプレビューの一時的なコピーを保存するため、サイトの速度低下を防ぎ、訪問者に高速なエクスペリエンスを提供します。

外部リンクのプレビューを表示する場合、それらのリンクを新しいタブで開くように強制できます。ユーザーが誤ってウェブサイトから離脱しないように、この機能を有効にすることをお勧めします。

最後に、モバイルではツールチップを無効にすることを選択できます。ツールチップは、小さい画面ではユーザーエクスペリエンスを損なう可能性があるためです。この機能をテストして、ご自身のウェブサイトに最適なものを見つけることをお勧めします。

詳細については、デスクトップからWordPressサイトのモバイルバージョンを表示する方法に関するガイドを確認してください。

ライブプレビューの設定に満足したら、「保存」をクリックします。

ステップ4：リンクツールチッププレビューを実際に確認する

この段階で、ウェブサイトをプレビューしてツールチップがどのように見えるかを確認できます。

クリックカウンターがない場合の例を以下に示します。

クリックカウンターを追加することを選択した場合、リンクがこれまでに受け取ったクリック数を示す小さな注釈が表示されます。

その選択は次のようになります：

Bright Links Previewの素晴らしい点は、リンクのクリック数やホバー数を示す無料の分析機能があることです。

これは、どの投稿に最も多くのユーザーが興味を持っているかを確認したり、どの新しい投稿を強調表示するかを決定するのに役立ちます。

これらの数値を確認するには、WordPress管理画面から設定 » Bright Links に移動し、「統計」タブに切り替えます。

追加のヒント：スキーママークアップでWordPressのリンクプレビューを整理する

コンテンツが共有されると、WordPressはプレビューを表示するためにページのタイトル、説明、画像を取得することがよくあります。しかし、その情報が正しく設定されていない場合、結果はプロフェッショナルに見えなかったり、壊れたりする可能性があります。

Bright Links Previewプラグインは、ページのメタデータを使用してリッチリンクプレビューを自動生成することで役立ちます。

そのメタデータを制御し、プレビューを際立たせるために、All in One SEO の使用をお勧めします。

Open Graphメタタグ（Facebook、LinkedInなどで使用）の設定が簡単になり、デフォルトのOpen Graph画像の設定、タイトルと説明タグのカスタマイズ、SEOとコンテキスト向上のためのスキーママークアップの追加もできます。

Bright Links PreviewとAIOSEOを組み合わせることで、WordPress SEOを改善するだけでなく、リンクがWeb全体でクリーンでクリック可能に見えるようになります。

👉 詳細については、以下のガイドをご覧ください。

• WordPressにスキーママークアップを追加する方法
• WordPressにSEOフレンドリーな「方法」スキーマを正しく追加する方法
• WordPressでFacebookのOpen Graphメタデータを追加する方法

その他のWordPressデザイン機能を発見する

WordPressサイトのデザインをさらに面白くしたいですか？これらの役立つガイドをご覧ください：

• ブログ投稿にシンプルでエレガントな脚注を使用して、追加情報を提供してください。
• 訪問者がサイトのどこにいるかを理解するのに役立つパンくずリストナビゲーションリンクを表示する
• 訪問者と重要な更新情報を共有するために、スクロールするニュースティッカーを作成する
• 特別なイベントへの期待感を高めるために、カウントダウンタイマーウィジェットを使用してください
• 読者のエンゲージメントを維持するために、投稿に読書進捗バーを追加する
• カスタムシェイプディバイダーを作成して、ウェブサイトのデザインをより面白くする

この記事がWordPressでリンクのライブプレビューを表示する方法を学ぶのに役立ったことを願っています。また、WordPressの最高のドラッグアンドドロップページビルダーのリストと、WordPressウェブサイトを編集する方法に関するガイドも確認したいかもしれません。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。