WordPressでブログカードを実装する4つの方法

WordPressでブログカードを実装する4つの方法

ブログカードとは元々はてなブログから始まった機能で、ブログ記事のタイトルや概要、アイキャッチ画像などをまとめて表示した埋め込み形式の発リンク(あるいはそれを表示する機能)を指します。

通常のアンカーテキストを使った初リンクよりも見栄えが良くて目立つので、ユーザーにも喜ばれてサイトの回遊率upに役立つ…その結果、SEO的にも有利になると言われています。

では、このブログカードをどうやって自分のサイトに表示させようか?という話になりますが…

方法1:WordPressに標準搭載されたブログカード作成機能を使う

実はバージョン4.4以降のWordPress(ワードプレス)には標準装備されていて、同じサイト内のページへの内部リンクを貼るときに、ページURLを埋め込むだけでブログカードを作成できるように設定されています。実際にGutenbergでブログカードを表示させてみると、こんな感じです…

でも、実際にサイトを運営している人の中で、WordPress標準搭載のブログカードがうまく表示されない…という人も結構います。その原因として一部のテーマやプラグインとの相性の悪さが言われていて、例えばAdvanced Editor Tools(旧TinyMCE Advanced)というプラグインとの相性が悪いことはよく知られています。

このAdvanced Editor Toolsというプラグインもサイトを魅力的に見せるには非常に効果的なプラグインなので、WordPress標準のブログカード機能とどちらを取るか悩ましいところです。僕もこのプラグインを使っていて、悩んだ挙句にWordPressの標準ブログカード化機能は諦めました。

でも大丈夫。ブログカードを表示させる方法は、まだまだ他にもあります…

方法2:プラグイン・Pz-LinkCardをインストールする

WordPressサイトにブログカードを表示させるための2つ目の方法は、Pz-LinkCardというプラグインをインストールすることです。このプラグインはリンクをカード形式で表示させるためのプラグインで、ショートコードを使って簡単にブログカードをリンクカードを挿入できるようになるメリットがあります。

Pz LinkCardPz LinkCard

また、このプラグインを使えば、内部リンクだけでなく外部リンクもブログカード化できるようになりますし、ブログカードの幅やデザインの型などをコードの知識なしで編集することもできます。一方、サイトがかなり重くなるという難点も指摘されていて、読み込み時間が遅くなるのが嫌であればプラグインなしで表示させる方法を選ぶことになります。

方法3:ブックマークレットを利用してコードを作成する

WordPressでブログカードを作成する3つ目の方法は、ブックマークレットを利用してコードを作成する方法です。この方法はグランフェアズという会社のwebサイト内で紹介されていて、慣れてきたら自分でCSSコードをいじってオリジナルのブログカードを作成できるというメリットがあります。

下にstyle.cssに書き込むCSSコードの例はこちらで取得できます。このコードをstyle.cssファイルにコピペした状態で(管理画面から「外観 >> カスタマイズ >> 追加CSS」を開けて、空欄にコードをペーストします)、上のリンクからグランフェアズさんのサイトに飛び、ブックマークレット用のリンクをブックマークバーへ追加しましょう。

ブログカードにしたいページを開いた状態で「ブックマークレット」をクリックすると、ポップアップでブログカード用のHTMLが出力されます。このHTMLをページ内の必要なところにコピペすれば完了です。

この方法で作ったブログカードは、こんな感じ…

SEO対策とは?Google検索順位upのため初心者も知るべき基本知識 – Super Clear Contents

SEO対策とは、ユーザーが検索エンジンで検索する特定のキーワードでコンテンツを上位表示させるために行う作業の総称です。この記事では、初心者向けに基本知識やSEO対策の方法などをわかりやすく説明しています。続きは本文で…

方法4:ブログカード用のコードを作成する

4つ目の方法は、ブログカード用のコードを作成することです。「コードを作成する」というとかなりハードルが高そうに感じますが、実際はサンプルコードを自作してネットで公開してくれている方がいるので、特別デザイン等にこだわらなければその方のコードをコピペするだけでOKです。

例えばmacoblogさんのサイト。リンク先で紹介されているコードを、function.phpファイルとstyle.cssファイルにそれぞれコピペすれば作業完了です。

この方法もPz-LinkCardと同じく、ショートコードでブログカードを表示させます。毎回ショートコードを入力するのはちょっと手間ですが、プラグインを追加してサイトを重くしてしまうよりはずっとマシです。

まとめ

いかがでしたか?今回はWordPressサイトでブログカードを作成・表示させる4つの方法をご紹介しました。標準機能と相性の悪いテーマやプラグインを使っていて、どうにかしてブログカードも表示できないか…と考えていた人のお役に立てれば嬉しく思います。

大堀 僚介(Ohori Ryosuke)

AWAI認定コピーライター
SEO contents institute認定コピーライター

何事も“超一流の専門家から学ぶ”をポリシーとしており、コピーライティング業界で世界最高の権威である全米コピーライター協会(AWAI)でライティングの基礎を習得後、SEOコピーライティングのパイオニアHeather-Lloyd Martin、コンテンツマーケティングの世界的第一人者Brian ClarkにWebコピーライティングを学ぶ。

さらにAWAIでビジネス用Webサイト作成スキルを習得、知識ゼロの状態から自社サイトSuper Clear Contentsを立ち上げる。その経験とインターネット業界の動向をふまえて、個人事業主や副業サラリーマンに向けて最新のビジネス用Webサイト構築方法を提供している。

>> Facebookのプロフィールページへ

大堀 僚介

全米コピーライター協会(AWAI)認定コピーライター SEO content institute認定SEOライター 何事も“超一流の専門家から学ぶ”をポリシーとしており、コピーライティング業界で世界最高の権威である全米コピーライター協会(AWAI)でライティングの基礎を習得後、SEOコピーライティングのパイオニアHeather-Lloyd Martin、コンテンツマーケティングの世界的第一人者Brian ClarkにWebコピーライティングを学ぶ。 さらにAWAIでビジネス用Webサイト作成スキルを習得、知識ゼロの状態から自社サイトSuper Clear Contentsを立ち上げる。その経験とインターネット業界の動向をふまえて、個人事業主や副業サラリーマンに向けて最新のビジネス用Webサイト構築方法を提供している。

Recent Posts

CheiRankとは何か?

突然ですが、CheiRankと…

1年 ago

文法ミスやスペルミスは検索順位に影響するのか?

パソコンを使って文章を書いてい…

1年 ago

SNS上の口コミを自社サイトに埋め込む時の注意点

特にローカルビジネスにとって、…

2年 ago

User Generated Contentsは検索順位に影響するのか?

ブログへのコメントや口コミ、星…

2年 ago