長文記事で読みたい箇所にたどり着きにくかった
長文コンテンツのユーザビリティとSEOを改善したい事業者向けに、記事内の見出しを解析して目次を自動生成する機能を開発しました。 ブログテンプレート、目次、パンくず、アプリ誘導導線。ブランド独自の見せ方とSEOの内部構造を両立する機能を開発しています。
CHALLENGES
抱えていた課題
着手前に整理した、解くべき課題です。ここが決まらないまま作り始めると、あとから作り直すことになります。
長文記事で読みたい箇所にたどり着きにくかった
目次を記事ごとに手動で作成する運用負荷があった
見出し構造がSEO的に整理されていなかった
WHAT WE BUILT
つくったもの
課題に対して実際に設計・実装した内容です。
見出し構造の解析
記事本文のH2・H3見出しを解析し、階層構造を保った目次データを自動生成します。
アンカーリンクの自動付与
各見出しにアンカーIDを自動付与し、目次クリックで該当箇所へスムーズに移動できるようにしました。
読了位置のハイライト表示
スクロール位置に応じて目次内の現在地をハイライトし、長文でも迷わない導線にしました。
SCOPE & TECHNOLOGY
対応範囲と技術
TECHShopify LiquidJavaScriptTheme App Extension
PROCESS
進め方
この案件で実際にたどった流れです。
要件整理
「長文コンテンツのユーザビリティ・SEOを改善したい事業者」の現場でどう使われるかを起点に、必要な機能範囲を洗い出します。
設計
Theme App Extension（Liquid + JS）として実装する構成に落とし込み、データ構造を設計します。
実装
見出し自動解析・目次自動生成・アンカーリンクを中心に、ストアフロントと管理画面の両方を実装します。
検証・リリース
実際の購入導線で動作検証を行い、問題がないことを確認してから反映します。
OUTCOME
できるようになったこと
実装後の状態を、事実ベースで整理しています。
長文記事でも読みたい箇所にすぐ移動できるようになった
目次作成の手作業がなくなった
見出し構造が整理されSEO評価にも寄与した
CONTACT
つくりたいものを聞かせてください。
Shopifyでの新規構築、既存テーマへの機能追加、アプリ開発のご相談まで。まだ具体化していないアイデアも、整理するところから一緒に始めます。
メールで相談する