WordPress

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

投稿日:2017年7月6日 更新日:

VISUALIZE

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

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

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

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

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

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

※2017/09/18追記:機能増強のうえプラグイン化しました

スポンサーリンク

なにがどうなるか

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

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

https://www.naenote.net/article-internal-link-visualization-demo

カスタマイズの方法

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

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

ソースコード(テキストファイル)をダウンロード
こちらをご利用ください

下記環境で動作確認済です。

使い方

  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:見やすさとパフォーマンス向上(エッジの重複削除、日本語スラッグ対応、ラベルに改行を自動挿入)

おすすめ関連記事

-WordPress

Copyright© NaeNote , 2017 All Rights Reserved.