ページ分割をやめて、標準の目次機能を使うように戻した話

どうもー.サイト全体の改善点とリライトしたい記事が多過ぎて新記事が書けないポッターです.

今日はページ分割していた長い記事を1ページに戻す作業をしました.

この記事ではサイト全体でページ分割を辞めたキッカケと理由について語ります.

ページ分割を実装した時の話

去年の11月末,こちらの記事に書いたように嬉々としてページ分割を実装しました.

それまではページ分割すると標準機能の目次がページごとに生成されて,1ページ目に全体目次が作れないという問題がありました.

全体目次が無いと記事に目的としているコンテンツが載っているのか分かりづらくなってしまいます.

それが嫌だったのでそれまでページ分割をして来なかったのですが,その課題を解決できたので満を持して実装しました.

しかし喜ぶのも束の間.約3ヶ月で元に戻すことになりました.

ある日起きたら一部のページから目次が消えていた

僕の週末は布団でスマホを開いてダラダラとGoogle Analytics(以下GA)を眺めることから始まります.

今日(2022/2/19)もいつも通りGAを開いてアクセス状況を眺めていたのですが異変に気付きます.

僕のサイトで一番アクセスを稼いでいる不動産屋へのメールの書き方記事の検索流入がガクッと下がっていました.

「もしかしてGoogle検索のアルゴリズムが変わった?何かペナルティ受けた?それとも偶然?」と思いましたが,ついでに不可解なことにも気づきました.

直帰率(1ページだけ見て帰った人の割合)も高くなっているし,セッション時間(そのページを眺めていた時間)も異常に短くなっていました.

(ちなみにセッション時間は最初のページにアクセスした時間と,サイト内の別のページに移動した時間の差から算出されるので,直帰した人はカウントされません.)

この辺から「もしかしたら記事の表示がおかしくなっているのかも知れない」と思って記事を見てみました.

そして一部の記事で目次が表示されなくなっていることに気付きました.

原因 – H2タグの自動変換が動作しなくなったっぽい

目次と見出しの作られ方 (HTML使っていない人向け)

WebサイトはHTMLという言語で記述されています.

そして見出し部分はhタグというものを使用すると作れます.

基本的にはh1タグを使って記事のタイトルを書き,文中の大見出しをh2タグで作ります.そして小見出しをh3タグで作り,h4, h5, h6と数字を増やしていくことでより小さい見出しを作っていきます.

具体例を出しますと,この章のタイトル「原因 – H2タグの自動変換が動作しなくなったっぽい」という部分は

<h2>原因 – H2タグの自動変換が動作しなくなったっぽい</h2>

と記述することで作れます.

そして,「目次と見出しの作られ方 (HTML使っていない人向け)」という小見出しは

<h3>目次と見出しの作られ方 (HTML使っていない人向け)</h3>

と記述することで作れます.

(僕はブロックエディターというものを使っているので実際に手打ちすることは滅多にないですけどね.)

このh2タグなのですが,先頭の<h2>の中に追加で記述することで書式を変えたり画面のジャンプ先にしたりと属性を付与することができます.

僕の作る記事では最初の方に目次があると思うんですけど,目次をクリックしたときに見出しに飛べるのは<h2>タグを<h2 id=”p1″>みたいに記述してジャンプ先としての属性を付与しているからなんです.

僕のサイト作成の環境(WordPress + テーマCocoon)では標準の機能として目次が自動生成されて,h2タグの属性も自動で付与される仕組みになっています.

WordPressのアプデでH2タグが変換されなくなった

で,ここからが問題なのですが,僕は自動生成される見出しをオフにしてphp, js, cssというものにネットから拾ってきたコードをコピペして見出しを生成していました.(詳細はこの記事で)

参考にしたページを見てみたら,このコピペしてきたコードはWordpressがh2タグを自動で変換することを利用してコードを最低限に減らしたものだと書かれていました.

参考にしたページ
【WordPress】複数ページに分割された記事で、全ページ分の目次を表示させる方法

そしてもう一つ気付きが.

目次は一部の記事だけ表示されなくなったのですが,ある日付より後に更新したページだけ目次が消えていました.

そしてその日付がWordpressをアップデートした日でした.

このことから新しいバージョンのWordpressではH2タグの自動変換が僕の環境で上手く働いてくれなくなったことが原因だと推測することができました.

実際にデベロッパーツールを見たらh2タグが上手く書き換わっていなかったので,原因が特定されました.

ページ分割を辞めた理由

さて,原因が分かったところで僕はHTMLとCSSがほんの少しだけ分かる程度で,phpとjsの知識はほぼ皆無です.(今後勉強したいとは思っている.思っているだけだが)

取れる選択肢としては以下の3つ

  1. ページ分割と全体目次を両立するために,WEBに詳しい友人やコードを書いた人に連絡して奮闘する
  2. ページ分割はそのまま,全体目次を諦めて標準の目次機能を使う
  3. ページ分割を辞めて標準の目次機能でも全体目次を作れるようにする

まず2番は個人的に論外.記事トップの全体見出しは必須だと思っています.

そうなると1, 3のどちらかを選ぶ必要が出てきます.

ここで思いました.

  • ページ分割って本当に読みやすくなるの?
  • 長い記事ってそもそもページ分割じゃなくて別記事にして,1記事をコンパクトにすべきでは?
  • 今後もWordpressやテーマのアプデで対応が必要になったら面倒じゃないか?その労力に見合うだけの効果がページ分割にあるのか?

このようなことを考えて標準機能をできる限り使っておいた方が作業効率が良さそうという発想になったので,今回は3を選びました.

趣味で妥協をして良いんだろうか.ちょっとモヤモヤ

仕事と違って趣味は効率とか有意義さとか考えないで好き勝手なことをやれる機会だと思っています.

普段の仕事では中々できないような,労力に見合わない細かすぎるブラッシュアップを創作活動でできるチャンスなんですよね.

そのため,上で書いたような「標準機能をできる限り使っておいた方が作業効率が良さそう」という考えが浮かんだ自分に対してちょっと拒否反応がありました.

でも,やりたいことが沢山あるとどうしても取捨選択したり効率を求めたりする必要が出てきちゃう.

今まで書いた記事だって8割方の記事は全力でブラッシュアップをしたことがないし,この運営日記に至ってはほぼリライトなんてしない.

作業効率を高めた分だけ良い成果が得られたと感じられればこのモヤモヤも晴れるんだろうか.

タイトルとURLをコピーしました