WordPressでリンクのライブプレビューを表示する方法（簡単な2つの方法）

訪問者がリンクをクリックせずにスクロールしていることに気づいた場合、それはあなただけではありません。私の経験では、プレーンテキストのリンクは注意を引くにはあまりにも微妙であることが多く、読者はあなたが推奨する役立つリソースやツールを見逃してしまいます。

そこで、ライブリンクプレビューが役立ちます。URLを表示する代わりに、画像、タイトル、短い説明を含むプレビューを表示できます。これは、リンクがソーシャルメディアプラットフォームに表示される方法に似ています。

このガイドでは、WordPressでリンクのライブプレビューを表示する方法をステップバイステップで説明します。

このチュートリアルの終わりまでに、単純なリンクを注意を引き、より多くのクリックを促す魅力的なプレビューに変えることができるようになります。

WordPressでライブリンクプレビューを表示する理由

ライブリンクプレビューは、リンクをより便利に、より目立つように、クリックしやすくします。

プレーンなURLを表示する代わりに、訪問者がリンクを開く前に役立つコンテキストを提供します。

WordPressサイトでライブリンクプレビューを使用することをお勧めする理由は次のとおりです。

• 注目を集める: 画像とタイトル付きのリンクプレビューは、特に長いブログ記事では、プレーンテキストよりも目立ちます。
• クリック数を増やすのに役立つ: 読者はリンクの内容を見ることができれば、クリックする可能性が高くなります。
• 読書体験を向上させる: 訪問者はリンクがどこに繋がっているのか推測する必要がありません。プレビューが明確な期待を設定します。
• 共有ツールやリソースに最適：リンクプレビューは、製品、プラグイン、または役立つ外部コンテンツを推奨する場合に特に効果的です。
• コンテンツをよりモダンに見せる: リンクプレビューを追加することで、サイトに洗練されたプロフェッショナルな雰囲気を与えることができるとわかりました。これにより、ソーシャルメディアでリンクを共有する際に人々が見るものと同様に、コンテンツが見えるようになります。

チュートリアル、ブログ記事、またはランディングページで頻繁にリンクを共有する場合、ライブリンクプレビューは読者の関心を維持し、さらに探求することを奨励するのに役立ちます。

さて、2つの簡単な方法でWordPressにライブリンクプレビューを簡単に追加する方法をご紹介します。

どちらの方法を選択すべきか？🤔

ステップバイステップのチュートリアルに入る前に、あなたのウェブサイトと目標に合った方法を選択すると役立ちます。

一部のプラグインは、訪問者がリンクにカーソルを合わせたときに自動的にプレビューを表示しますが、他のプラグインでは特定のリンクに対してスタイル設定されたプレビューカードを作成できます。

下の表で、どちらのオプションがあなたに最適か簡単に確認できます。

プラグイン / 方法	最適	使用時期
Linkz.ai（方法1）	ホバー時に自動でライブリンクプレビューを表示	ブログ、チュートリアル、リソースが多いウェブサイト、外部リンクが多いサイト
Visual Link Preview（方法2）	Facebook風のリンクプレビューカード	アフィリエイトサイト、WooCommerceストア、キュレーションされたリンクセクション、特定のリンクを強調したいページ

あなたのニーズに合った方法がわかったので、チュートリアルに進み、ライブリンクプレビューを設定しましょう。

方法1：Linkz.aiを使用してホバー時にライブリンクプレビューを表示する

ウェブサイト上のリンクに訪問者がホバーしたときにライブリンクプレビューが自動的に表示されるようにしたい場合は、Linkz.aiを使用することをお勧めします。

この方法は、多くの内部および外部リンクを共有するブログ、チュートリアル、およびリソース中心のサイトに特に適しています。

Linkz.aiは、記事、ブログ投稿、ビデオ、プレゼンテーション、PDF、および1,000以上のその他のWeb埋め込みを含むリンクされたコンテンツを自動的に抽出し表示します。オンデマンドロードスクリプトを使用しているため、プレビューはユーザーがリンクを操作したときにのみロードされ、初期ページウェイトを軽く保ちます。

ユーザーがリンクにカーソルを合わせると、コンテンツの概要が表示されるポップアップが表示され、訪問者はサイトを離れることなくコンテキストを得ることができます。

プラグインを使用するには、Linkz.aiアカウントを作成する必要があります。無料プランでは、内部リンクと外部リンクの両方でホバープレビューをすぐに追加できます。これは、ほとんどのブログや小規模サイトで十分です。

分析、追加テーマ、リッチコンテンツなどの追加機能が必要な場合は、プレミアムの「ブログ」プランが年間60ドル（月額5ドル）から利用できます。

全体として、自動で初心者フレンドリーで、最小限のセットアップで読者のエンゲージメントを維持できるため、素晴らしいソリューションだと思います。

ステップ1：Linkz.aiをインストールしてアカウントを作成する

まず、Linkz.ai プラグインをインストールして有効化する必要があります。やり方がわからない場合でも心配いりません。私がサポートします。

ステップバイステップのガイドに従って、WordPressプラグインのインストールを行ってください。

プラグインが有効化されると、WordPress 管理画面に Linkz.ai メニュータブが表示されます。それをクリックし、「サインアップ」ボタンをクリックしてください。

これにより Linkz.ai のウェブサイトに移動します。ここで、メールアドレスを入力し、パスワードを選択してアカウントを作成する必要があります。

その後、「続行」ボタンをクリックします。

これで Linkz.ai アカウントの作成は完了です。デフォルトでは無料プランとなり、1つのウェブサイトで毎月最大 2,500 件のリンクプレビューを追加できます。

ユーザーがリンクにカーソルを合わせたときにプレビューが自動的に表示され、クリック時には Linkz.ai のブランディングが含まれたリッチプレビューを表示できます。

このプランは始めるのに最適で、分析、追加テーマ、または毎月のリンクプレビュー数を増やしたい場合は、いつでも後でアップグレードできます。

ステップ 2: Linkz.ai を WordPress サイトに接続する

Linkz.ai アカウントを作成したら、WordPress サイトに接続する時間です。サインアップ後、Linkz.ai のダッシュボードでインストールウィザードが自動的に開きます。

ウェブサイトの URL は既に追加されているので、あとは「追加」ボタンをクリックしてサイトを Linkz.ai に接続するだけです。

次に、ウィザードがどのハイパーリンクにリンクプレビューを表示するかを尋ねます。外部リンクのみのプレビューが必要な場合は、そのオプションを選択できます。

すべてのコンテンツを訪問者にとってよりインタラクティブで魅力的なものにしたい場合は、外部リンクと内部リンクの両方を選択することを個人的にお勧めします。

選択が完了したら、「次へ」ボタンをクリックしてください。

その後、リンクプレビューカードのテーマとスタイルを選択する必要があります。

無料プランでは、「クラシック」テーマのみを使用できます。これは、投稿の抜粋とともに大きな注目の画像を表示します。プレミアムユーザーは、追加のテーマとより多くのカスタマイズオプションにアクセスできます。

スタイルについては、ライトモードとダークモードのいずれかを選択する必要があります。

個人的には「自動ライト/ダーク」オプションをお勧めします。これは訪問者のサイトモードに合わせて自動的に調整されるためですが、この機能はプレミアムプランでのみ利用可能です。

選択が完了したら、「次へ」ボタンをクリックしてください。

これにより、最後のステップに移動し、「Activate Linkz.ai」ボタンをクリックする必要があります。

その後、WordPressダッシュボードに戻ります。ここでは、Linkz.aiの設定の下にウェブサイトが表示され、トグルがオンになっています。

これは、リンクプレビューカードがアクティブになり、サイトにデフォルトで表示されることを意味します。

ステップ3：最初のライブリンクプレビューをテストする

Linkz.aiがサイトに接続されアクティブになったら、実際に動作を確認する時です。リンクが含まれているWordPressサイトの投稿またはページを開いてください。

リンクにホバーすると、小さなポップアッププレビューが自動的に表示されるはずです。このプレビューには、タイトル、注目の画像、抜粋を含む、リンクされたコンテンツの概要が表示されます。

ステップ2で内部リンクと外部リンクの両方を選択した場合は、内部リンクにカーソルを合わせてどのように表示されるかを確認してください。これは、独自のコンテンツをよりインタラクティブにし、訪問者をサイトに引き付けるための優れた方法です。

プレビューが表示されない場合は、WordPressダッシュボードのLinkz.ai設定でLinkz.aiトグルがオンになっていることを確認してください。

キャッシュプラグインを使用している場合は、サイトキャッシュをクリアすることも検討してください。キャッシュされたページは、新しい機能がすぐに表示されない原因となることがあります。

すべてが機能することを確認したら、リンクがより魅力的になったことを知って、自信を持って投稿を公開できます。

方法2：ビジュアルリンクプレビューを使用してリンクプレビューカードを作成する

リンクの表示方法をより細かく制御したい場合は、Visual Link Previewが優れたオプションです。このプラグインを使用すると、ウェブサイト上の任意のリンクに対してFacebookスタイルのリンクプレビューカードを作成できるため、表示される画像、タイトル、説明を選択できます。

カスタムテンプレートを作成したり、デフォルトのテンプレートをサイトのデザインに合わせてスタイル設定したりすることもできます。

アフィリエイトプロモーション、WooCommerce製品、関連記事、または役立つウェブサイトのキュレーションリストなど、特定のリンクを強調したい場合にこの方法をお勧めします。

プレビューデータをサイトにローカルに保存するため、ページが読み込まれるたびに外部ウェブサイトからデータを取得する必要がありません。これにより、外部HTTPリクエストが削減され、Core Web Vitalsとサイト全体の速度の維持に役立ちます。

Visual Link Preview は、Classic Editor と Gutenberg の両方に対応しており、ブロックまたはショートコードを使用してプレビューを追加できます。これにより、ブログ、オンラインストア、リソースページなど、あらゆる種類のコンテンツに対応できます。

ステップ 1: Visual Link Preview のインストールと有効化

開始するには、まずVisual Link Previewプラグインをインストールして有効化する必要があります。最も良い点は、完全に無料であるため、何も費やすことなくカスタムリンクプレビューカードをサイトに追加できることです。

インストールするには、WordPressダッシュボードに移動し、プラグイン » 新規追加 に移動して、「Visual Link Preview」を検索してください。

見つけたら、「今すぐインストール」をクリックし、次に「有効化」をクリックします。詳細については、WordPressプラグインのインストールガイドを確認してください。

ステップ 2: リンクプレビューカードのテンプレートを選択してカスタマイズする

プラグインが有効化されたら、WordPressダッシュボードから設定 » ビジュアルリンクプレビューページに移動します。ここで、リンクプレビューカードの外観を決定します。

このプラグインは、動的テンプレートと静的テンプレートの2種類を提供しています。

動的テンプレートはテンプレートエディターを使用して完全に編集可能で、カードのレイアウト、色、デザインを完全に制御できます。静的テンプレートは事前にコーディングされており、小さなスタイル変更のみが許可されるため、よりシンプルですが柔軟性は低くなります。

動的テンプレートを作成するには、「テンプレートエディター」を開く必要があります。

このオプションをお勧めします。なぜなら、カードを希望どおりにカスタマイズし、変更をリアルタイムで確認できるからです。

まず、デフォルトのテンプレートスタイルを選択してプレビューします。次に、「テンプレートを複製して編集」ボタンをクリックしてカスタマイズを開始します。

保存するには、テンプレートに名前を付ける必要があります。

後で簡単に見分けられるように、通常は説明的な名前を選びます。

エディターでは、左側で背景、境界線、パディング、マージンなどのテンプレートプロパティを調整できます。タイトル、テキスト、画像などの個々の要素を編集することもできます。

右側では、変更を加えるたびにリンクプレビューカードのライブプレビューが表示されます。デザインに満足したら、上部にある「変更を保存」をクリックします。

設定ページに戻ると、新しいテンプレートがダイナミックテンプレートのドロップダウンメニューに表示されます。

ここから選択するだけで、すぐに使用を開始できます。

より迅速な設定が必要な場合は、「カスタムスタイリングを使用」スイッチをオンにして、代わりに静的テンプレートを選択することもできます。

次に、コンテナの幅、背景色、パディング、境界線、テキストスタイルなどの基本的な調整を行います。

より高速なオプションですが、個人的にはダイナミックテンプレートの方が、より多くの制御が可能で、リンクプレビューカードに、より洗練されたプロフェッショナルな外観を作成できるため、好んでいます。

完了したら、「変更を保存」ボタンをクリックして設定を保存してください。

ステップ3：最初のリンクプレビューカードを追加する

次に、投稿のいずれかにリンクプレビューカードを追加します。**投稿 » すべての投稿**に移動し、プレビューカードを表示したい投稿の「編集」をクリックします。

ブロックエディターが開いたら、「ブロックを追加」ボタンをクリックしてブロックメニューを開きます。そこから「ビジュアルリンクプレビュー」ブロックを見つけて、好きな場所にドラッグします。

外部リンクのプレビューを追加したい場合は、URLを貼り付けて「このURLを使用」ボタンをクリックします。内部の投稿またはページのプレビューを追加したい場合は、「投稿を検索」ボタンをクリックします。

ポップアップが表示され、目的の投稿のタイトルを入力できます。

プラグインが結果を読み込んだら、プレビューカードに表示したい投稿の横にある「この投稿を使用」をクリックします。

プレビューカードが読み込まれたら、左側のブロックパネルからカスタマイズできます。

説明を編集してより魅力的にしたり、サムネイル画像を別のものに置き換えたりできます。

リンクを新しいタブで開くオプションや、ノーフォロー属性を追加するオプションを切り替えることもできます。

外部リンクを使用している場合は、nofollowオプションを切り替えることをお勧めします。

外部リンクにノーフォローを使用すると、サイト自体のSEOを保護するのに役立つことがわかりました。これにより、自身の検索エンジンの権威を渡すことなく、読者に役立つリソースを共有できます。

見栄えに満足したら、「更新」または「公開」をクリックして変更を保存します。

これでリンクプレビューカードが公開され、読者はページを離れることなく、視覚的かつインタラクティブな方法でコンテンツを探索できるようになります。

ボーナス：WordPressのリンクプレビューを完璧に見せる方法

上記の方法は、ウェブサイトにリンクプレビューを表示するのに役立ちますが、ソーシャルメディアで共有する際にもリンクが見栄え良く表示されるようにしたいものです。適切な画像、タイトル、説明は、プロフェッショナルなプレビューカードを作成し、クリック率を高めます。

この情報が正しく設定されていないと、リンクが洗練されていない、または壊れているように見える可能性があります。All in One SEO（AIOSEO）は、WordPress向けの最高のSEOプラグインであり、このメタデータを簡単に制御し、リンクが常に最高の状態に見えるようにすることをお勧めします。

WPBeginnerではSEOにAIOSEOを使用しています。私たちの経験についてさらに詳しく知りたい場合は、AIOSEOの完全レビューをご覧ください。

AIOSEOを使用すると、Facebook、LinkedIn、その他のプラットフォーム用のOpen Graphメタタグを簡単に設定したり、タイトルと説明をカスタマイズしたり、デフォルトのOpen Graph画像を設定したりできます。

スキーママークアップを追加して、検索エンジンにコンテンツに関するより多くのコンテキストを提供することもできます。

AIOSEOでOpen Graphとスキーマを設定することにより、リンクはウェブ全体でクリーンでクリック可能に見えるようになり、WordPressのSEOを改善するのにも役立ちます。

👉 詳細については、当社のガイドをご覧ください：

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

WordPressでライブプレビューリンクを表示することに関するよくある質問

WordPressサイトにライブリンクプレビューを追加する方法について、まだ疑問をお持ちですか？ご安心ください、あなただけではありません。以下に、よくある質問とその回答をまとめました。これにより、問題をトラブルシューティングし、リンクを最大限に活用できるようになります。

WordPressでリンクのクリックを追跡するにはどうすればよいですか？

WordPress向けの最高のGoogle AnalyticsプラグインであるMonsterInsightsや、WordPress向けの最高のリンク短縮プラグインであるPretty Linksのようなプラグインを使用して、リンクのクリックを追跡できます。これらのツールは、カスタムコードを必要とせずに、クリック率（CTR）やコンバージョン統計などの特定のデータを記録します。

開始するには、WordPressでリンクのクリックを追跡する方法に関するガイドをご覧ください。

WordPressはデフォルトでリンクプレビューを表示しますか？

いいえ、WordPressはデフォルトでリンクをプレーンテキストとして表示します。ただし、URLを単独の行に貼り付けた場合、WordPressはYouTubeやTwitterのような特定のサイトのコンテンツを自動的に埋め込みます。標準のテキストリンクについては、上記で言及したようなプラグインが必要です。

最も優れた無料リンクトラッカーは何ですか？

無料のオプションとしては、Pretty Links Liteが人気です。これにより、WordPressダッシュボードから直接、無料でリンクを短縮、追跡、管理できます。

WordPressですべてのリンクを表示するにはどうすればよいですか？

Pretty Linksのようなリンクマネージャープラグインをインストールするか、WordPressエディターを使用して投稿やページを確認することで、すべてのリンクを確認できます。一部のSEOプラグインは、ダッシュボードにリンクの概要も提供します。

URL 短縮サービスは SEO にとって良いですか？

はい、ただし注意が必要です。短縮されたURLはよりクリーンで共有しやすくなりますが、最終ページに正しくリダイレクトされることを確認してください。Pretty LinksやThirstyAffiliatesのようなプラグインは、WordPressでこれを安全に処理します。

URL とハイパーリンクの違いは何ですか？

URL はページのウェブアドレスであり、ハイパーリンクはその URL を指すクリック可能なテキストまたは画像です。簡単に言うと、URL は宛先であり、ハイパーリンクはユーザーがそこへ行くためにクリックするものです。

SEO を失わずに URL を変更するにはどうすればよいですか？

URLを変更したときは、常に301リダイレクトを使用してください。これにより、検索エンジンにページが永続的に移動したことが伝わり、SEOランキングを維持しながら訪問者を新しいリンクに送信します。

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

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

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

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

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。