ブログ内での過去記事リンクは、訪問者にも役立つし内部リンクとしてSEO対策にもなります。今回はURLのみで簡単にサムネイル付きリンクを生成できる高機能ショートコードを紹介します。
ゆめぴょん(@yume_pyon)です。こんちはっ！
内部リンクは関連記事を読者に紹介するだけでなく、SEO対策としても注目されています。その理由は外部リンクによるSEO効果が、以前より弱くなっているからです。
内部リンクの種類や方法については、下記事にまとめていますので参考にしてください。今回は下記事で紹介しなかった、記事内での過去記事リンクについてです。
ちなみに上の過去記事リンクは下のように書いてるだけです。自動でサムネイル画像もつけて、記事下・サイドバーの人気記事一覧には重複表示されなくなります。記事直下に過去記事一覧も表示されます。
|
1 |
［nlink u="http://wispyon.com/navigation-wordpress/,http://wispyon.com/pagination-navi-wordpress/"］ |
内部リンク設置によるメリット
過去記事や、関連記事、人気記事一覧などによる内部リンクには、次のメリットがあります。
- 関連ある過去記事を紹介して、訪問者の問題解決を手助けできる
- 関連記事リンクにより、訪問別PV・回遊率アップ、直帰率の低下を見込める
- 内部リンクにより、Googleのインデックス化を促進し、SEO対策になる
内部リンクによるSEO効果については定量的に図れませんが、少なくともクローラー（Googleの偵察ロボット？）が巡回してくれる機会を、増やすことは出来そうです。あとはコンテンツ品質での勝負になります。
今回の記事では、ただ単純に内部リンクを貼るだけではなく、関連記事一覧の重複リンクをなくす方法についても共有します。
内部リンク以外のSEO対策については、下記事も参考にしてみてください。
今回実現できる過去記事リンクの機能一覧
過去記事リンクは、どのブログでも貼っていますが、私はもう少し踏み込んで、こだわりを追求してみました。下のような機能をつけました。
- ショートコードで、URLのみ記述するだけ
- 複数リンクはカンマ区切りで。記事数の制限なし
- 2記事まではサムネイル画像と説明文付きで大きく表示
- 3記事以上の場合は、リスト形式でタイトル名とリンクのみ
- 記事直下に、紹介した過去記事一覧をまとめて表示
- 紹介した過去記事は、サイドバーと記事下の人気記事に重複表示しない
URLのみで過去記事リンクを作れると楽です。ブックマークレットなどを使う必要もなくなります。リンクする記事を開かなくても、左クリックでURLをコピーするだけで実現できます。
複数の記事を同時に紹介する時も、カンマ区切りで簡単です。3記事以上の場合は、コンテンツを邪魔しないよう、自動的にリスト表示になります。
紹介した過去記事は、一番下にまとめて表示しているので、戻ってクリックする手間をはぶきます。nofollow設定もしてます。
記事内で紹介した過去記事は、サイドバーなどの人気記事一覧では表示しないように除いています。より多くの関連記事を、訪問者とGoogleに紹介できるのはメリットだと思います。
過去記事リンクの高機能ショートコードの設置方法
設置といっても、ほぼコピペで対応できるはずです。色やサムネイル画像の大きさについては、CSS（スタイルシート）で変更してください。
ショートコードの簡単な作成方法は、下記事を参考にしてください。
テーマファイル「functions.php」を編集します。WordPressで最重要ファイルです。修正前には必ずバックアップをとってください。もし問題が起こったらすぐ元に戻してください。全て自己責任でお願いします。
下のソースコードを、WordPressのテーマファイル「functions.php」にコピペしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
add_image_size( ‘nlink_thumbnail’ ,96 ,72 ,true ); function nlink_scode($atts) { extract(shortcode_atts(array('u'=>""),$atts)); if(empty($u)) return; $u = explode(',', $u); $img0 = ""; global $ex_nid; $cnt = count($u); switch($cnt) { case 2: $nlink="<div>"; case 1: for($i=0; $i<$cnt; $i++) { $url = $u[$i]; $id = url_to_postid($u[$i]); $title = esc_html(get_the_title($id)); $ex_nid.="," . $id; if(has_post_thumbnail($id)) { $img = wp_get_attachment_image_src(get_post_thumbnail_id($id),array(96,72)); $img_tag = "<img src='" . $img[0] . "' alt='{$title}' class='n-img'>"; } elseif( $img0 != "" ) { $img_tag ="<img src='{$img0}' alt='no image' class='n-img'>"; } else { $img_tag = ""; } $nlink .='<div><a href="'. $url .'" class="nlinkbox">' . $img_tag . '<p class="n-title">'. $title .' <img src="http://b.hatena.ne.jp/entry/image/'. $u[$i] .'" alt="はてブ"></p><p class="n-desc">' . mb_substr(strip_tags(get_post($id)->post_excerpt),0,36) . '…</p></a></div>'; } if($cnt==2) $nlink .="</div>"; break; default: $nlink="<ul>"; for($i=0; $i<$cnt; $i++) { $url = $u[$i]; $id = url_to_postid($u[$i]); $title = esc_html(get_the_title($id)); $ex_nid.="," . $id; $nlink .= "<li><a href='" . $url . "'>" . $title ."</a></li>"; } $nlink .= "</ul>"; } return $nlink; } add_shortcode("nlink", "nlink_scode"); //内部リンクをまとめて紹介 function nlinks_scode() { global $ex_nid; if(empty($ex_nid)) return; $id0 = explode(',',$ex_nid); $ids = array_unique($id0); $nlinks="<div class='nlinks'><span>★記事の中で紹介したリンクをまとめます。</span><ul>"; foreach ($ids as $id) { if(empty($id)) continue; $nlinks .="<li><a href='" . get_permalink($id) . "' rel='nofollow'>" . get_the_title($id) . "</a></li>"; } return $nlinks . "</ul></div>"; } add_shortcode("nlinks", "nlinks_scode"); |
私が利用しているスタイルシートは下のとおりです。あなたの好みで修正してください。テーマファイル「single.php」か「style.css」にコピペしてください。style.cssにコピペする時は、1行目と最終行は削除してくださいね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<style type="text/css"> .nlinkbox { display: block; overflow: hidden; width: 94%; margin: 40px auto; padding: 0; border: 1px solid #ccc; background: #ffc; border-radius: 7px; border:1px solid #aaa; -webkit-box-shadow: 3px 3px 4px #bbb; box-shadow: 3px 3px 4px #bbb } .n-img { float: left; margin:0 6px 0 0; width: 96px; height: 72px; } .nlinkbox .n-title { margin: 0 5px 0 0; line-height:1.5; } .nlinkbox .n-desc { margin: 0; font-size: 13px; color: #555; } .nlinks ul { width: 94%; margin: 10px auto; padding: 0 0 0 20px; border: 1px solid #fd0; background: #ffd; font-size: 13px; list-style: disc outside; border-radius: 6px; } .nlinks span { margin: 0 0 0 10px; color: #f30; } </style> |
カスタマイズ方法
上のソースコードは、あくまでも私のブログデザインのものなので、自由に修正を加えてください。
サムネイル画像のサイズは、1行目の「add_image_size」と、21行目のarray(96,72)の値と、CSSのn-imgを統一して修正してください。
サムネイル画像が見つからない場合は、デフォルト画像を設定できます。7行目の「$img0 = “”;」に画像URLを入力してください。入力がなければ何も表示しません。
過去記事の説明文は、WordPressの抜粋から取得しています。抜粋に設定してない場合は、説明文は表示されません。
はてなブックマークを表示しない場合は、27行目を修正してください。
人気記事一覧との重複を回避するには、上でグローバル変数としてる「$ex_nid」を使ってください。過去記事のidがカンマ区切りで入力されています。
例えば、私が新着・人気記事の重複をなくす方法として紹介した下記事のコードでは、「$ex_id」に「$ex_nid」を代入するだけで実現できます。利用先でも「global $ex_nid;」を忘れずに。
WordPressの人気記事一覧表示プラグイン「Popular Posts」を使う場合も、「pid」のパラメータに「$ex_nid」を代入するだけで、内部リンクの重複を避けることが可能です。
まとめ：今日のゆめぴょんの知恵
今回の記事内容をざっくり言うと。
- 過去記事リンクは、訪問者にもやさしくSEO対策にもなる
- 過去記事URLだけで、リンク生成できるショートコードを紹介
- 複数リンク設置も可能。3つ以上ならリスト形式にする
- 記事直下に、紹介した過去記事一覧をまとめて表示
- 紹介した過去記事は、関連・人気記事と重複表示しない
ご意見・ご感想などは、Facebook、Google+などでもお待ちしています。
ゆめぴょん(@yume_pyon)でした。では、ばいちゃお！ こてっZzz