Map」プラグイン2017.09.18WordPressのブログで記事と記事の内部リンク構造を可視化するプラグインを作りましたので公開します。内部リンクの最適化にお役立てください。Mapは、記事本文中に貼ってある内部リンクを解析し、記事および固定ページをノード、リンクをエッジとしたマップを自動生成します。当ブログの場合、こんな↓マップが生成されます。四角いノードは記事、つながり(エッジ)が内部リンク、色はカテゴリを指しています。拡大するとこんなふうに見えます↓。それぞれのノードに記事のスラッグが入っています。(後述するカスタマイズで記事タイトルに変更可能)矢印はリンクの方向です。どの記事からどの記事にリンクが張ってあるかがわかります。ノードはマウスホバーすると記事のタイトルが表示されます。ダブルクリックで当該記事にジャンプ可能です。マップの上にある検索窓でスラッグを検索可能です(記事タイトルにした場合、タイトル検索)。ヒットした記事のノードがハイライト表示されます。検索窓直下に表示されているEditメニューから、ノードやエッジを自由に追加・削除可能です。「もしこの記事がなかったら?」「もしこの記事からこの記事へリンクされていたら?」など、内部リンクを最適化したあと全体がどう見えるかシミュレーションできます。pages」欄から、カテゴリおよび固定ページ毎に表示・非表示を切り替え可能です。記事数が多すぎる、カテゴリ毎の関係が見たい場合にご利用ください。Blur」横のボタンで自動配置処理の有効・無効を切り替え可能です。ノードが静止しない場合は自動配置をストップすると捗ります。内部リンクが可視化されるとなにが嬉しいかこのプラグインを作った理由は、内部リンク最適化のためです。ブログを書いていると、だんだんと記事と記事の関係づくりがおろそかになっていきます。そこでいざ最適化しようと過去記事を開くも、1つ1つの記事を見ているだけでは、どこがどうつながっているかが見えにくいものです。ミクロな視点では見えてこない課題が、マクロな視点なら見えてきます。孤立記事が一発でわかるたとえば↓のマップを見てください。外縁を円状に取り巻く記事群が見えると思います。これら、どの記事からもリンクされず、どの記事にもリンクしていない記事です。思いつきで書いてみた結果ブログ内で孤立してしまった、かわいそうな一発屋記事といえます。これ、コンテンツ的にもSEO的にもよくありません。リンクしてない=ブログのテーマから逸脱しているリンクされていない=内部リンクによるSEO効果を受けにくいもしこのような記事のコンテンツが非常に弱く、検索経由でアクセスされずに残っているとすると、低品質サイトと評価されかねません。関連記事を書く、関連する他記事を見つけてリンクを張るなどの施策が必要です。読んでほしいのにリンクのない記事がわかる同じように、本当は読んでもらいたい記事に他記事からリンクが全然張られていない、なんて事情もまるわかりです。検索を狙って書いた記事のはずなのになかなか上位にいかないのは、ブログ全体のテーマから逸脱している、もしくは内部リンクが集まっていないからかもしれません。下のマップ拡大図を見てみてください。真ん中の記事に被リンク発リンクが集中しています。リンク先の記事は関連性の強いものばかり。実はこの記事、検索でかなりいい位置に来ているんです。読んでほしい記事がこのパターンになるよう、内部リンクを整理したり関連記事を書くことで検索順の上昇が見込めるかもしれません。このように、ブログ全体のリンク構造が見えると、どの記事に対してどのような内部リンクのテコ入れが必要なのかがぱっと見でわかります。ブログ全体のシナジーが出せているかがわかるカテゴリ別に色分けされたブログ全体を眺めることで、ブログ全体でシナジーを出せているかがわかります。ここで言う「シナジー」とは、下記記事にあるとおり、各カテゴリが密接に関係しており回遊性が高い状態を指します。画像をお借りすると、全体像としてこういう状態が「シナジー型」に相当します。kurone43.comこれを記事間のトポロジー(ノードとエッジのつながり)で解釈すると、ブログ全体を俯瞰したとき、カテゴリ別にかたまりができている各カテゴリ間にゆるいつながりがあるという状態が望ましいといえます。Mapでカテゴリ別に色分けされたブログ全体像を見てみましょう。真ん中あたりを見てみると、赤・緑・黄色は先ほどの「シナジー型」のベン図と近しい形をしていますが、青は逆に辺に断片化してしまっていることがわかります。Mapを使うとすぐわかってしまいます。そのため改善点が見えやすく、テコ入れの方向性もパッとわかるのではないでしょうか。Mapはお役立ていただけるのではないかな、と思っています。ちなみに↓は2ヶ月前の当ブログのマップです。シナジーを超えたカオス状態です。これに対し地道に内部リンク最適化を施していった結果がこちら↓。孤立記事が多くシナジー型とは言い難い形をしていますが、以前よりははるかにキレイにグループ化されました。このように内部リンク整理作業の進捗がパッと見でわかるとやる気も続きやすくなるかと思います。内部リンク最適化でPVが46%アップ?実際の検索順位への影響はきちんと測れていません。内部リンク最適化がPVに大きく影響したという事例があったりはします。過去記事リライトと内部リンク整理でPVが46%アップした、という下記記事です。Mapは記事本文中の内部リンクのみを解析します。グローバルメニューやサイドバー、記事上下のウィジェットスペースのリンクは対象外です。これには2つ、理由があります。記事本文中以外のリンクはクリック率が低い記事本文中以外の内部リンクは、読者にほとんどクリックされていません。リンクは貼られるだけでは意味がありません。クリックされ、そこにトラフィックが発生することではじめて「生きたリンク」になります。当ブログの場合、クリックされやすいとされている記事下の関連記事より記事本文中のリンクのほうが1.5~2倍ほどクリックされています。その他パーツは言わずもがなでした。ブログカスタマイズで入れたパーツのクリック率を測定した結果ブログカスタマイズで追加したパーツの利用率を定量的に把握すべく、クリックトラッキングを導入しました。その結果を共有します。bloglab.naenote.net2016.11.13もちろん貼っただけの「ハリボテ」リンクもSEO施策に役立たないとは言い切れません。クリックされない以上、読者の役に立っていない=Googleの重視するUXには貢献していないことになります。そのため、記事本文中に意図的に貼ったもの=生きたリンクになりやすいものを優先して解析するほうが、SEO観点では効率的かなと考え、本文中のリンクのみを解析させています。解析対象が多すぎるとマップが目で分析できなくなる可視化の目的は、改善点を見つけることです。そのため「パッと目で見てわかりやすいこと」が前提になります。サイドバーやウィジェットで自動挿入されるリンクを解析に含めてしまうと、リンクの数が多すぎて「スチールたわし」のような見た目になってしまいます。これでは人間の目では分析しきれないので、ちょうどいいバランスを考えて、記事本文中のリンクのみを解析させています。Mapのダウンロード下記環境で動作確認済です。使い方プラグインの使い方は次のとおりです。記事または固定ページを作る本文に[show_article_map]というショートコードを書く記事または固定ページを自分限定で公開する公開した記事ページにアクセスすると、その場で過去記事の解析と可視化の処理が走ります。JavaScriptで処理させているので表示まで時間がかかりますが、気長にお待ちください。処理性能の高いPCで見ることを推奨します。理由や意図がない限り、自分限定公開にしてください。解析処理はかなり重いので、誰もが見られる場所に公開するとアクセスのたびにサーバーに高い負荷がかり、サーバーエラーが発生する可能性があります。スラッグではなく記事タイトルをラベルに出すスラッグにIDや日付を使っている方は、マップ上の四角(ノード)に表示されるラベルを記事タイトルにしたいと思われると思います。20),ただし、記事タイトルにした場合ノードが多少縦長になるのでご注意ください。子カテゴリで細かく色分けするデフォルトではトップレベルの親カテゴリをもとに色分けされるようになっています。サイト設計によっては一番細かい子カテゴリで色分けしたい場合もあると思います。"固定ページ";ただし、子カテゴリの色が多いと違うカテゴリでも同じ色に塗られることがありますのでご留意ください。CSV」リンクから、データをCSV形式でダウンロードできます。Spreadsheetで詳しく分析したい方はお使いください。色分け機能は「1記事1カテゴリ」が前提です。複数ある場合、片方だけ処理されます利用している可視化ライブラリの関係で、処理可能な記事数には限界があります。(1000記事は厳しいかもしれません)ところどころでjQueryを使っています。脱jQueryしている方は事前にjQueryを読み込んでください→jQueryを自動で読み込むようにしました(v0.4~)不具合報告やご質問は本記事へのコメントまでお寄せください。FAQ:よくあるトラブルと解決策マップが全く生成されないPHPのバージョンを7以上にアップグレードしてください。Permalinksなどのプラグインでパーマリンクを変更していると、正しくリンクが抽出できない可能性があります。WordPressデフォルトのパーマリンク設定をご利用ください。まとめ:内部リンク最適化にお役立てくださいなかなか全体像が見えづらい内部リンク。最適化のために1記事1記事をしらみつぶしにするのも骨が折れるものです。こちらのプラグインでざっくり改善点のあたりをつけたうえで、ピンポイントでテコ入れをしていけば、効率的な過去記事整理ができるのではないでしょうか。あなたのブログ・サイトの内部リンク最適化にお役立てください。サイト設計の考え方については、下記Kindle本がオススメです。Map」のご紹介でした。23:32はじめまして、コメント&質問です。Twitterでこちらのサイトと記事を知り訪問しました。「とても画期的なプラグインだ!」と思い、さっそく私のワードプレスでも取り入れてみました。【使い方】1.記事または固定ページを作る2.本文にshow_article_mapというショートコードを書く3.記事または固定ページを自分限定で公開する上記の「2」の部分でつまづいています。固定ページを作って「show_article_map」というショートコードを書く。この「ショートコード」というものが理解できていなくて上手く内部リンク構造を表示できないでいます。今回のプラグインを表示させるためにネットで色々と調べてみたのですがよくわかりませんでした(汗)NAEさんが以前ジャバスクリプト版で書かれていた記事もじっくり読ませて頂きました。この記事と前の記事とプラグインの導入と・・・2時間ほど取り組んでいますがいまだに上手に表示できていないようです。して「ショートコード」の記述の仕方が悪いのかな?ということで悩んでいます。00:36スザンヌみさきさんコメントありがとうございます!ショートコードの書き方に問題があるようです。show_article_mapを半角の角カッコで括って書いてください。これの半角版です→[]記事本文中に実際の書き方で書いてしまうとショートコードが展開されてしまうため、便宜上カッコなしで書いていました。伝わりにくくで申し訳ないです。14:21お使いのPHPのバージョンが古いことが原因のようです。01:33NAE様、連絡が遅くなりました。あれからPHPのバージョンをアップデートしてプラグイン有効化したら無事に使えるようになりました!!自分のサイトの内部リンクが見れてとても役立ってます☆ワードプレスのプラグインを色々入れていたのですが、それが関連してPHPのバージョンアップすると表示に問題があったのですが...いらないプラグインを削除したら解決しました。理想的なプラグインでした。本当にありがとうございます。内部構造をいじり倒してみたいと思います。16:16Kapetaさんコメントありがとうございます!お役に立てたようで幸いです。15:58はじめまして。はてブで見かけて、プラグインをダウンロードさせていただきました。私のサイトもSimplicityを使っているので、インストールしてみました。Simplicityは、URLを記事に書くと、ブログカードにしてくれる機能があります。このブログカードだと、記事を書くときはリンクではなく、URLが記述されているだけになります。その場合、このプラグインでは内部リンクと認識できないようです。Simplicity特有の機能に由来することなので、プラグインが側に対応をお願いするのは違うのかもしれませんが、もし可能であれば、対応のご検討をいただけないでしょうか。17:47dobulebassさんこんにちは、ダウンロード&フィードバックありがとうございます!SimplicityのURL直書きをはじめ、WordPress標準の埋め込みタグが展開されていないバグがあったようです。18:34管理人様お返事ありがとうございます!早速プラグインを更新してみました。ブログカードもリンクとして認識していました。これで、投稿の関係を見直すことができます。Mapを試してみたのですが、500エラーのため過去記事の解析が表示されません。サーバーはxserverを使用しています。500エラーを吐くときはどうすれば良いのでしょうか。ご教授いただければ幸いです。13:10TEtsuyaさんコメントありがとうございます!このブログもエックスサーバーを利用しています。Mapプラグインが原因の500エラーが出たことはありません......お使いのPHPやWordPressのバージョンが古いかもしれません。更新のうえ再度お試しいただくことは可能でしょうか。それでエラーが解消しない場合は原因の深掘りが必要ですので、TwitterのDMまたはメールにてご連絡ください。15:31はじめまして。プラグインをインストールして有効化し、非公開の固定ページにショートコードを入れると下記のようなエラーが表示されてしまいます。formという問い合わせプラグインの何かに影響しているようなのですが、原因はお分かりでしょうか?宜しくお願いいたします。16:06yamanさん不具合報告ありがとうございます!PHPの関数名がかぶってしまっているエラーのように見えます。Formは脆弱性ゆえそもそも使わないほうがよいという情報があるようです。http://www.hiskip.com/wp/plugin/pcp/2441.html別の問い合わせプラグインに切り替えていただくとエラーが解消されるかもしれません。ご検討いただけますでしょうか。03:33WordPress:4.8.2にアップデートしたところ表示されなくなってしまいました。07:14ミンさんコメントありがとうございます!このブログも4.8.2に更新済ですが問題なく動いています。23:18便利なプラグイン公開して頂きありがとうございます。内部リンクの構造を可視化したかったので、「これだ!」感をすごく感じました。1点質問させてください。06:39watatakuさんコメントありがとうございます!記事の説明にある通り、本文内のリンクのみが分析対象です。回答ありがとうございます!本文内のリンクのみが分析対象なんですね。完全に見落としており、失礼しました...。引き続き、内部リンク構築に活用させていただきます。18:34すみませんが、教えてください。ワードプレスの仕組みの自体の理解が怪しいところもありまして、説明が上手くないかもしれません。ご教授頂けますとたいへん助かります。内部リンク、確かに僕もかなりいい加減だったので、早速プラグイン実行させて頂きました。300記事ほど存在するブログで試してみると、なんと1箇所しか内部リンクが無いように表示されたんです。そこまで少なくはないだろうと思いまして、調べてみました。調べた結果、呼び元記事で内部リンクとしているURLが、呼び先のURL内にスラッグ項目が含まれており、一致している場合のみ「つながり」が表示されている事が分かりました。(ほとんどの人はそうなんだろうと思います。Permalinks」で”スラッグ部分”を変更しています。Permalinksで設定したURLとして見える部分と本当の内部的な(?)スラッグ項目が一致していないデータがほとんどになっています。Permalinksで設定したURLとスラッグの関係があまりよく分かっていないんだと思います・・・。Permalinksで設定したURLで正しく検索も出来るし、スラッグ項目と一致していなくても、不都合はありませんので、気にしたことはありませんでした。Permalinksで設定したURLで一致させるように、修正しようとしましたが、挫折しちゃいました。Permalinksで変更したURLの後ろ部分は、必ずスラッグ項目と一致させておくべきなのでしょうか?そうだとしたら、後からスラッグ項目を手で修正した場合、検索されなくなってしまうなど、運用上の問題は発生してしまうんでしょうか・・・。affinger4です。申し訳ございませんが、よろしくお願いいたします。23:13こんばんは。コメントありがとうございます!本プラグインでは、描画の処理をなるべく軽くするため、記事IDを使って記事の記事の紐付けをしています。そのため、内部的に「記事内のaタグからURLを引き出して、記事IDに変換する」という処理を、WordPressの提供する標準関数で行っています。WordPress側が認識するパーマリンクと実際のパーマリンクが異なる場合、記事IDが取得できません。Permalinksで設定された実際のパーマリンクをWordPress側が認識していないことにあると思われます。Permalinksプラグインに特化した処理を実装する、もしくは全体的にWordPress標準関数を使わない実装に変える必要があります。いずれも結構な大手術になるので、少しのコード変更では済みそうにないかなあと。ならないか、一旦こちらでも考えてみますね。00:06そうですそうです!分かりやすく翻訳してくださって、ありがとうございます。僕はなんとなくプログラム読み書きは出来ても、PHPはほぼ経験ないし、ワードプレスの内部構造には詳しくないから、手術失敗しそうですね・・・。Permalinksで、URLを都度変更するのではなく、投稿画面から直接「スラッグ」を修正する運用に変えちゃえば良いんですかね。この機会に、過去の物は全て手作業で一個一個変更しちゃおうかしら。customelinks項目の値をスラッグ項目に一括UPDATEするようなSQLでも作れれば良いんですけど、内部構造に詳しくないから、壊してしまいそう・・・。00:13大変素晴らしいプラグインのご提供をありがとうございます!リアルタイムで反映される点もとても重宝させて頂いていますm(__)m1点お伺いさせて頂きたいのですが、>>グローバルメニューやサイドバー、記事上下のウィジェットスペースのリンクは対象外です。上記に関して、カスタムフィールドやテーマファイル内(トップページにtoppage.phpを作成して運用しています)に記載したリンクを認識することは難しいでしょうか?ずけずけと申し訳ありません。09:18Goさんコメント&リクエストありがとうございます!カスタムフィールドやテーマファイルをはじめ、特定の環境や設定に依存する拡張は、開発にあてられる時間の関係で対応が難しそうです。加えて、解析対象を増やすとマップがスチールたわしのようなグチャグチャな塊になるため、見てもなにもわからなくなる可能性が高く、今の形にとどめています。requestをお願いします。04:16早々のご回答をありがとうございますm(__)m>>解析対象を増やすとマップがスチールたわしのようなグチャグチャな塊になるため、見てもなにもわからなくなる可能性が高く、今の形にとどめています。確かに仰る通りですね...それに肌感覚ですが、記事内でのリンク&遷移の方が何となく評価対象としてのウェイトが高い気もしていますので、ブログカードを工夫してみようと思います。05:32ツイッターで知り早速利用させていただきましたが、めっちゃくちゃ便利で助かっています...!ちなみに、ワードプレステーマ「sango」で問題なく使えましたので、報告しておきます。10:26たっくさんこちらこそ動作報告ありがとうございます!SANGOを持っていないので、とても助かります。23:16便利なプラグインを作っていただき、ありがとうございます。使えるブログと、エラーが出るブログがありました。43重大なエラーを引き起こしたため、プラグインを有効化できませんでした。どのように対処したら良いか、教えていただければ助かります。23:38りんごさんコメントありがとうございます。エラーがでているブログについて、PHPのバージョンが7以上であることをお確かめください。19:26回答ありがとうございます。無事、エラーなく使えるようになりました。22:50こんばんは。一つのブログで、実際にはリンクが貼ってあるのに「矢印」が一切、出ない現象に悩んでいます。ご確認いただければと思います。記事本文以外の部分はリンク解析の対象外となりますので仕様通りの動きとなります。07:29返答ありがとうございます。プラグインでパーマリンク設定はいじっていないので、別の理由かと思います。一つ気づいたのは、aaaaaaa-aaaaaaaaaだと矢印が出ていますがaaaaaaa-aaaaaaaaa-aaaaaaaこのように、ハイフンが2個以上ある記事からは矢印が出ていない事実です。08:21当ブログもパーマリンクにハイフンを多用していますが、正常にリンク認識されるので、別の原因である可能性が高いです。支障なければ、実際のURLを教えていただけますか?TwitterのDMでも構いません。02:05初めまして。以前から利用させていただいております。1年ぶりに回してみたところ、ページが白紙で表示されてしまいました。>利用している可視化ライブラリの関係で、処理可能な記事数には限界があります。(1000記事は厳しいかもしれません)が引っかかっていると思われます(私のサイトは1000以上のページが存在します)。そこでNAEさんにご質問です。11:21ユッキーさんはじめまして。コメントありがとうございます。1000記事以上となると、サイトが乗っているサーバーとお使いのパソコンとも、かなりハイスペックでないと動かないかと思います。・サーバー:記事データの解析に大量の処理が必要(PHP)・パソコン:解析結果データのマップ化に重たい処理が必要(JavaScript)そのため、サイトのサーバーとパソコン、両者スペックアップさせるくらいしか方法が思いつきません。今後という意味では、サーバー側の処理(PHP)はぼくが書いたプログラムを見直すことで改善の余地はあると思いますが、パソコン側の処理(JavaScript)は外部のライブラリを使っているので改善は難しいです。仮にサーバー側の処理が高速化できたとしても、パソコンのスペックが弱いとマップ表示処理でつまづく可能性が濃厚です。09:58はじめまして。ステキなプラグインを制作いただきありがとうございます!困っている点があるためサポートいただけると助かります。マップが表示されエッジが表示されるところまでは確認できました。新しくリンクを張りなおしてみてもエッジが追加されていないようです。1週間ほど待ち、実際にリンクが踏まれるところも確認しています。PHPバージョンは7以上です。Permalinksは使用していないと思っています。「設定ーパーマリンク設定ーカスタム構造」がそれに値するのであれば、使っています。12:23はじめまして。コメントありがとうございます!原因調査には、マップ生成用ページのソースコードを見るのが一番早いです。記事更新前のマップが正しく生成されているあたり、マップ表示処理ではなく、元ネタとなるデータを生成する処理で変なことが起きている可能性が高いと思われます。したら、ぱっと思いつく原因はキャッシュが残っている本文ではなくウィジェットでリンクを追加しているの2点です。キャッシュには、ブラウザキャッシュとサーバーキャッシュの2種類存在します。前者は、ブラウザで「Ctrl+r」などで強制リフレッシュすれば更新可能です。こちらをお試しください。Cacheなど、いわゆる「キャッシュ系プラグイン」により作られるものです。こちらは管理画面から手動で消す、もしくは当該プラグインを無効化すれば削除されます。これらはいずれも、設定によっては1週間以上保持させられます。心当たりがありましたら、強制リフレッシュとキャッシュ系プラグインの無効化をお試しください。ウィジェットについては、ウィジェットでリンクを一括挿入している場合、本プラグインでは解析できません。記事本文=WordPressの記事編集画面で本文を書き込む部分のみ、解析対象としているからです。09:34コメントありがとうございます!返信遅くなり申し訳ありません。logを見たところErrorを吐いているようでした。現象は改善されませんでした。記事はテキストアンカーリンクで内部リンクを貼っています。Permalinksというプラグインを使用していました。移行前のリンクはエッジがつながっているけれど、移行後に修正したリンクはエッジに表れていなそうな気がしています。これはあくまでも予想なので、もし思い当たる節あればご教授ください。16:57追加情報ありがとうございます。Permalinks」など、メジャーなパーマリンク系プラグインについては解析ができるよう改修が必要そうな気がしてきました。期限はお約束できませんが、ToDoリストに入れておこうと思います。06:14コメントありがとうございます。・記事のURLの変更、301リダイレクト・スラッグの変更を行ったところ、エッジが結ばれるようになりました!おそらくスラッグの変更だけでも良かったのかもしれません。301リダイレクトもNAEさんの記事を参考にしました。ありがとうございます。Permalinksの解析はほかのかたのニーズも多ければご検討いただければ幸いです。16:23はじめまして!家計管理ブログCafe山社中の管理人でございます。(https://cafeyama-shachu.com/)先程こちらのプラグインをインストールさせて頂きました。最高です!!!!!!!!!!今までこんな神プラグイン観たことなかったです。内部リンクの必要性を知ったばかりで、過去記事を1つ1つ見ていくのもめんどいし、、ってなってたところだったのでまさに、かゆいところに手が届いた気持ちでいした。本当に内部リンクの整理が可視化できてストレスなくやっています。こんな素晴らしい才能があるなんて羨ましい限りです。00:58コメントありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。管理人NAEただのブログ好き。お問合わせはこちらもしくはTwitterのDMまでどうぞ。ブログ実験室naelab.タイトルとURLをコピーしました。