ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年7月11日| 3のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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

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

ビジュアルリンクのプレビュー -  FacebookにURLを追加時

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

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

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

WordPress ビジュアルリンクプレビュープラグインVisual Link Preview

WordPress ビジュアルリンクプレビュープラグインVisual Link Preview

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

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

Visual Link Previewのインストール

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

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

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

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

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

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

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

ブロックエディタ(Gutenberg)でVisual Link Previewを使用する

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

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

WordPress ブロックエディタで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(画像変更) アイコンをクリックして、新しいイメージを設定するようにします。

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

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

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

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

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

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

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

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

最後に、

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



3のコメント

コメント

  1. Visual Link Preview 時々サムネイルが壊れたり、他の情報を表示する場合がありますが、もし代替プラグインを知っている方がもっとあるのでしょうか? 探してみましたが、本当に良いことはありません。

    応答
    • 내 WordPress 内の文章の場合 WordPress 埋め込みブロックを使用して埋め込むことができます。

      https://www.screencast.com/t/RcavMe8AY

      しかし、他のブログ記事は埋め込まれていないようです。 他の良い方法を見つけたら、今後共有してみましょう。 楽しい週末をお過ごしください。

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

    応答