コンテンツへスキップ →

ブログカードはアクセスを爆増させるチャンス

08/16/2016

wordpress4.4から、はてなのブログカードのようなリンク機能が追加されました。

メールマガジンも、まだまだ捨てたもんじゃない。


こんな感じのリンクですが、oembedという規格を使っています。oembedとはurlを貼り付けるだけで、埋め込みタグを生成できるようにするための統一規格。TwitterやYoutubeなどで採用されています。

今回は、このブログカードのいいところと、実装方法をご紹介します。

過去記事にもっと光を与えられる

2014年8月29日、はてなブログがブログカードなるものを作りました。
ブログカードブログカードとは、上のようにアイキャッチ画像、タイトル、概要の情報をまとめたカード形式のリンクのことをいいます。

ただのテキストリンクに比べて、アイキャッチやタイトルと概要が書かれている方が情報量が多く、ユーザーが見たい記事かどうかが判断できるので好まれます。

このような機能がWordpressにはいままでなかったのですが、バージョン4.4から標準機能として、ついに実装されました。WordPressにURLを貼り付けるだけで使えます。

さらに記事リンクだけでなく、例えば、twitterのアドレスを貼り付けてみると…


このように表示されます。WordPressの記事内ではtwitterのURLを入れてるだけです。
ほかにも、DailyMotion, Flickr, Hulu, Instagram, Twitter, Youtubeなどに対応しています。

過去記事のリライトでコンテンツの価値を高める

ブログカードが使えるようになった機会に、過去記事のリライト(編集)をおすすめします。

ブログカードに限らず、過去記事をリライトして関連する記事にリンクをはることは大事です。関連する記事を必要な箇所でリンクすればユーザーにとっての更なる情報提供になり、満足度もあがるからです。新規記事を書くのは労力が大きいですが、過去記事のリライトなら労力も少なく、コンテンツの質を高めることができます。

さらに、もう一ついいことがあります。

ブログへのアクセスの流れは、新規記事投稿→SNS投稿でユーザー訪問→検索エンジンからユーザー訪問となっています。基本的にSNSにアップするのは新規記事を投稿した時ですが、twitterやfacebookはタイムラインですので、見逃しているユーザーもたくさんいるはず。

リライトによって記事のクオリティを高めたら、SNSでアップしましょう。こうすることで、再び見てもらえる機会も増えます。リライトはいいことばかり。ブログカードを導入したら、ぜひ過去記事をリライトしてコンテンツの価値を高めましょう。

WordPressブログカードの使い方

基本的には記事内にURLを書くだけでブログカードが使えます。ただ、そのままのデザインが不満なら、カスタマイズ可能です。

wp-includes内のtheme-compatフォルダにテンプレートが入っています。下の5つのファイルをまるっとコピーして、テーマフォルダ内に入れましょう。
embed-404.php
embed-content.php
embed.php
footer-embed.php
header-embed.php

各ファイルは下図の構成になっています。
embed_parts_4.5あとは、これらのphpファイルを触ってカスタマイズできます。イリテクの場合はシェアボタンやコメント数を消したり、幅を広げたりしました。

CSSの調整もできます。まず、wp-includes/wp-embed-template.cssをコピー。
テーマ内のfunctions.phpに以下を追加。

function embed_style() {
    wp_enqueue_style('wp-embed-template-org', get_stylesheet_directory_uri() . '/resource/css/embed.css');
}
add_filter('embed_head', 'embed_style');

この場合/resource/css/embed.cssを読み込むようにしています。embed.cssを変更すればデザインも変わります。

ブラウザの開発ツールなどでCSSのセレクタなどを調べると便利です。

ブラウザ上でCSSの変更が試せる！Safariの開発ツールはコーディングに手放せない

注意点として、基本的に内部リンクはそのまま使えますが、外部リンクの場合は許可設定が必要です。外部サイトに対応するには、個別にfunction.phpに書き込みます。

wp_oembed_add_provider('http://.+hate.+', 'https://hatenablog.com/oembed');

上記ははてなブログの記事を埋め込みたい場合の設定です。

ただ、デメリットとしてoembedに対応していないサイトは使えません。また、自分のブログがhttpsだとhttpのサイトから引っ張ってこれません。たとえば、はてなブログはhttpにしか対応していないので、イリテクのhttpsではセキュリティ上の問題から表示できないのです。

ブログカードはURLを貼り付けるだけで使える手軽さがあります。導入するだけで、ただのリンクをよりリッチな表現へと変えることができます。これを使わない手はないでしょう。さらにセットで過去記事のリライトをして関連する有用な記事を活かしましょう。

あわせて読みたい

SHARE

スキルアップにMENTA

MENTAはいろんなプロに相談できるNo1メンターサービスです。

僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。

YouTubeでも発信中！

PROFILE

入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表／個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました／福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 （詳しいプロフィール）

あわせて読みたい

カテゴリー: HACK

タグ: