WordPress ビジュアルリンクのプレビュープラグイン(Facebook スタイル文リンク)

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

フェイスブックでリンクを共有すると、その記事のサムネイルとタイトルが表示されます。 記事作成時に参照文または関連記事リンクをFacebookのようなリンクのプレビュー形式で表示すると、視覚的にも、より良い効果を得ることができます。 ワードプレスでは、ビジュアルリンクプレビュープラグインを使用して、内部文または外部文を共有する場合、サムネイルとタイトルと要約文を表示することができます。

ビジュアルリンクのプレビュー

フェイスブックでURLを共有すると、次のようにサムネイルとポストのタイトルが表示されます。

ビジュアルリンクのプレビュー - フェイスブックにURLを追加する場合

ネイバーブログや寀ーブログで文章を作成するときにも同様の機能が提供されます。 そしてネイバーカフェ、ブランチブログなどでもこの機能が提供されます。

ワードプレスの「埋め込み」機能を使用して、サイト内の文章を、Facebook共有時のリンクのプレビュー形式で表示することができますが、外部の文には使用できません。 そして表示される記事のタイトル、記事要約とサムネイルを変更することができません。

ワードプレスでは、Facebookのような視覚的なリンクプレビュー機能を使用したい場合Visual Link Previewプラグインを使用することができます。

ワードプレスのビジュアルリンクのプレビュープラグインVisual Link Preview

ワードプレスのビジュアルリンクのプレビュープラグインVisual Link Preview

ワードプレスのビジュアルリンクプレビュープラグイン Visual Link Previewを使用すると、フェイスブックと同様の形式で書かれたリンクを共有することができます。 参照記事リンクや商品紹介のリンク、アフィリエイトのリンクなどを挿入するときに便利に利用することができます。

特にこのプラグインを使用すると、共有している記事のタイトル、要約、およびサムネイルを変更することができ、オープングラフ画像(og image)が設定されていない文もサムネイルを指定して表示することが可能です。

Visual Link Previewのインストール

このプラグインは、ワードプレスの管理ページ内でインストールして使用することができます無料のプラグインです。 このプラグインをインストールするには、ワードプレスのダッシュボードから プラグイン]> [新規追加に移動し、「visual link preview」で検索します。

ワードプレスのビジュアルリンクプレビュープラグインをインストールする

上記のような画面が表示されたら、「今すぐインストール」をクリックしてインストールし、「有効にする」をクリックして、プラグインを有効にするようにします。

リンクプレビュースタイルのカスタマイズ

リンクプレビュースタイルは決まっているが、サムネイルサイズなどの設計を調整したい場合 ワードプレスの管理ページ>設定> Visual Link PreviewUse Custom Style(カスタムスタイル 使用)オプションを有効にします。

ビジュアルリンクプレビューテンプレートを設定する

上記画面のように、基本的にデフォルトのテンプレート(Default Template)であるSimpleテンプレートが適用されています。 プレビュースタイルを変更するには、 Use Custom Styling 横のボタンを押して有効にしてスタイルを詳細に指定してください。 サムネイルサイズ、テキストのサイズや色などを指定することができます。

ブロックエディタ(グーテンベルク)でVisual Link Previewを使用する

プラグインをインストールして有効にすると、ブロックエディタ(グーテンベルク)と古典的なエディタでVisual Link Previewウィジェットを使用して、内部文または外部リンクをビジュアルリンクのプレビュー形式で挿入することができます。

ブロックエディタを使用している場合は、ブロックを追加]ボタンをクリックして、「ウィジェット」セクションに移動して Visual Link Preview ウィジェットを選択するようにします。

ワードプレスブロックエディタでVisual Link Previewウィジェットを使用する

その後、内部文(ページ、商品文章を含む)のタイトルを入力してサイト内の記事のリンクを挿入したり、外部URLを直接入力することができます。

ビジュアルリンクプレビューを挿入例示

サイト内の文章やページのリンクを挿入するには、Select a post on your website(①)の下にリンクを挿入する文またはページのタイトルを入力するようにします。 タイトルの前の部分の一部を入力して、選択します。

外部URLリンクを追加したい場合には、 Or add a link to an external URL (②)の下に、そのURLを入力して、 Use this URL(このURLを使用)をクリックします。

商品URL共有 - ビジュアルリンクのプレビュー

上の図は、サイト内の商品ページのURLを追加したときを示します。 右のブロックの設定で、タイトルとサムネイル、要約を変更することができます。

視覚リンクプレビュー画像を変更

サムネイルを変更するには、 Change Image(画像変更) アイコンをクリックして、新しいイメージを設定するようにします。

他にも、新しいタブでリンクを開くようにするオプション(Open link in new tab)とnofollow属性を追加するためのオプション(Nofollow Link)も提供しています。 アフィリエイトのリンクを含む有料リンクはnofollow属性を追加することが望ましい。 グーグルでは、有料リンクについてsponsored属性を推奨しますがnofollowもできます。 詳細については、 ワードレスでのリンクにnofollowを追加するを参照してみてください。

古典的なエディタでVisual Link Previewを使用する

ワードプレスのバージョンが5.0に更新され、ブロックエディタのグーテンベルクが基本エディタに統合されています。 ワードプレス5.0未満を使用したり、古典的なエディタのプラグインをインストールして、以前のエディタを使用している場合でも、Visual Link Previewを使用することができます。

編集画面でVisual Link Previewアイコンをクリックすると、下図のように視覚的なリンクを追加することができるようにウィンドウが表示されます。

ワードプレスの古典エディタでVisual Link Previewを使用

Type(タイプ)で、内部リンク(Internal link to own post or page)または外部リンク(External link)を選択することができます。 外部リンクを選択すると、画像を直接選​​択して、タイトル、要約文を直接入力するように関連するフィールドが表示されます。

ビジュアルリンクプレビュー - 外部リンクの挿入

古典的なエディタ(Classic Editor)は、公式のワードプレスのプラグインで、現在500万人以上のサイトに設置されて使用されています。 グーテンベルク(Gutenberg)も今多くの安定化されたので、ワードプレスのテーマやプラグインとの競合が発生しない場合、ブロックエディタ(グーテンベルク)を使用することも大丈夫のようです。 古典的なエディタは、少なくとも2022年まではサポートされる予定だそうです。

おわりに

ワードプレスでは、FacebookのようなスタイルでURLを共有する機能が不足して、たまに惜しい感がありました。 Visual Link Previewプラグインを使用すると、より効果的にURLを追加することができます。



1のコメント

  1. Facebook スタイルで書かれ、リンクのプレビューを表示する機能についての質問をたまに受けました。 [完了] Diviテーマで有名な Elegant Themesブログ記事このプラグインが紹介され、このブログを通じても紹介します。

    応答