WordPressで記事間の内部リンク構造を可視化するカスタマイズ

VISUALIZE

内部リンクはSEO的に大事だから可視化して最適化しないとね。

・・・という、プロクラシストさんのこちらの記事に触発されました。

http://www.procrasist.com/entry/link-network

こちらはてなブログ向けの方法でパソコンにソフトを入れる必要があります。

しかしWordPressならカスタマイズでできるかなと思い、突貫で作ってみました。

条件つきですが、コピペ一発で導入できます。

なにがどうなるか

記事本文を解析し、記事と記事のつながり(内部リンク)を可視化します。
(メニューやウィジェット、サイドバー等は対象外です)

こちらのページで実際に動いているところが見られます。(PC推奨)

WordPressで記事間の内部リンクを可視化するデモ
記事本文内の内部リンクを、記事をノード、リンクをエッジとしてグラフ化するデモです。当ブログの記事データをPHPで取得、aタグを解析し...

カスタマイズの方法

子テーマのfunction.phpの最後に以下のコードをコピペします。

カスタマイズの前に、必ずバックアップを取ってください。

動作確認済テーマ:SimplicityAFFINGER4STORK

使い方

  1. 新しい固定ページか記事を作成する
  2. 本文にshow_article_mapというショートコードを書く
  3. プレビューもしくは公開してページを見る
  4. マップが出てくる
  5. 記事のスラッグをダブルクリックすると記事に飛ぶ

マップが出てくるまで気長に待ってください。JavaScriptで可視化させてるので、少し時間がかかります。

表示する時点で記事の中身を分析しているため、内部リンクを修正したあとにリフレッシュすれば最新の状況が反映されます。

注意点

注意点は以下のとおりです。

  • 投稿IDを使ったショートコードによるブログカード(AFFINGERやSTINGERなど)は内部リンクとして識別できません。記事内にべた書きしたaタグのみ識別可能です
    → ショートコードも展開するようにしました
  • 事前にカテゴリが階層化されている&1記事に1つのカテゴリが付加されていることを前提に作っています(複数のカテゴリがついている場合、片方だけ反映されます)
  • カテゴリの色分けはトップレベルのみ対応です(当ブログでいう「仕事術」のレベル)
  • パフォーマンス度外視で動くものを作っています。300記事くらいのこのブログならまだ動きますが、1000記事レベルだとパソコンが悲鳴を上げるかもしれません
  • ダブルクリックで記事に飛ぶところでjQueryを使っています。脱jQueryしている方はお気をつけください
スポンサーリンク

記事本文内のリンクに限定した理由

今回記事本文のみに限定してリンクを解析している理由は、過去のクリック解析の結果、記事内リンクのクリック率がすこぶる高かったからです。

読者の役に立つブログカスタマイズとは?クリック率から見えた原則
ブログカスタマイズは誰のためにするのか?クリック計測の結果見えてきた「クリックされるカスタマイズの原則」とは。

メニューやウィジェットは、正直あまり見られない&クリックされません。

読者の行動や利便性を考えると、記事本文内の内部リンクを最適化するのが最も効果が高いでしょう。

まとめ:内部リンク構造を最適化しよう

というわけで、突貫工事でひとつ作ってみました。

内部リンク構造の最適化にお役立てください。

もう少し内部処理を最適化したり、可視化のやりかたを選べるオプションをつけられたら(やる余裕があったら)プラグイン化してみようと思います。

スポンサーリンク

更新履歴

  • 2017/07/06:初版公開
  • 2017/07/07:見やすさとパフォーマンス向上(エッジの重複削除、日本語スラッグ対応、ラベルに改行を自動挿入)

この記事が役に立ったら
いいね!をどうぞ

ブログで言えない話はTwitterにて
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアやコメントお待ちしてます

おすすめ記事

こんな記事も読まれています

スポンサーリンク
スポンサーリンク