第15回 ゆまラボのAboutと記事構造を修正―パンくず、構造化データ、H1重複にも対応

ゆまラボのAboutページへ運営者情報とプロフィール画像を追加し、全記事へパンくずとBreadcrumbListを実装。カテゴリページの重複ナビと記事本文のH1重複も修正した内容を記録します。

執筆：ゆまラボ運営者

公開：更新：
第15回 ゆまラボのAboutと記事構造を修正―パンくず、構造化データ、H1重複にも対応

第14回では、ヘッダーへカテゴリ・連載・タグへの導線とサイト内検索を追加し、横長の表とsitemap.xmlも修正した。

その後も公開画面を確認していると、記事本文よりサイト全体の見せ方とHTML構造に気になるところが出てきた。

  • Aboutページの内容がまだ少ない
  • 記事ページでTOPから現在の記事までの位置が分かりにくい
  • カテゴリページでヘッダーと本文のナビゲーションが重複している
  • 「AstroとWordPress」の記事で同じH1が2回表示されている

今回はこの4点を修正する。

タグ一覧にも再び重複が出ていたが、こちらは単なる表示修正では終わらなかった。タグマスタ、alias、URL維持まで含む別の作業になったため、次回に分けて記録する。

Aboutページへ運営者情報とサイトの方針を追加#

修正前のAboutページは内容が少なかった。

修正前のAboutページ

内容の中心は、ゆまラボが個人運営の雑記ブログであること、Web制作、Astro、Cloudflare、AI活用などを扱うこと、実際に試した過程や発生した問題を残すこと。

サイトを始めた直後ならこの内容でも足りる。ただ、記事数が増え、Web制作だけでなくAIや調査記事、雑記も増えてきた。初めてAboutを見た人には、誰がどういう基準で書いているのかが少し分かりにくい。

ページ全体は作り直さず、これまでの内容を残しながら情報を追加した。

修正後の冒頭では、ゆまラボについて次の点を明記している。

  • Web制作やAI、開発中に試したことや調べたことを残す個人サイト
  • AstroやCloudflareだけでなく、開発環境、データベース、クラウドなども扱う
  • 完成した手順だけでなく、途中のエラーやうまくいかなかった方法も残す
  • 同じ問題で困った人の参考と、自分が後から見返すことを目的にする
  • 技術記事だけに限定せず、時事ネタや気になったことを雑記として書くこともある

内容を追加したAboutページ

ゆまラボは技術情報を扱うことが多いが、技術専門サイトとしてテーマを固定するつもりではない。その時に気になったことを調べて書く記事もあるため、その点もAboutで先に説明する形にした。

「運営者について」を追加して実務経験も記載#

Aboutには「運営者について」も追加した。

氏名や勤務先、顧客名などは公開しない。その代わり、記事の背景として必要な範囲だけを記載している。

現在の内容は、業務システム開発に関わるITエンジニアとして10年以上開発・保守に携わっていること、現在はデータ分析系システムの開発・保守を中心に担当していること、Webシステム、データベース、サーバー、クラウド環境などを扱ってきたことなど。

使用経験のある技術も一覧にした。

Java
C#
JavaScript
Ruby
Python
SQL Server
PostgreSQL
AWS
Azure
Windows Server
Jenkins
Excel VBA

運営者情報とプロフィール画像を追加したAboutページ

プロフィール画像には、すでに用意していたpublic/images/articles/profile.pngを使用した。

Aboutの本文より画像が目立ちすぎないように、PCでは152pxで文章と横並び、スマホでは112px、380px以下では縦並びになるようにしている。画像の縦横比は維持し、alt="ゆまラボ運営者イメージ"も設定した。

画像には幅と高さも指定し、読み込み時に本文の位置が大きく動かないようにしている。

Aboutは、サイト内の記事をどういう立場で書いているかを説明する固定ページとして使う。

記事上部をTOPから始まるパンくずへ変更#

次は記事ページ。

修正前も記事タイトルの上に、

WEB制作 › 運用・改善

のようなカテゴリ表示はあった。

パンくず追加前の記事上部

分類としては分かるが、TOPから現在の記事までの位置を示すものではない。第9回、第10回以降、カテゴリ、サブカテゴリ、連載、タグと記事の分類が増えてきたので、記事ページにも階層をそのまま表示することにした。

修正後は次の形になる。

TOP › WEB制作 › 運用・改善 › 記事タイトル

TOPから記事まで表示するパンくず

TOP、カテゴリ、サブカテゴリはリンク。現在の記事名はリンクにしていない。

今回新しくBreadcrumbs.astroを追加し、ArticleLayout.astroから全記事へ表示する形にした。

表示名やURLを記事ごとに書いているわけではない。既存のcategoryPath()とtaxonomyLabel()を使い、現在のカテゴリ定義からURLと表示名を生成している。

これなら、記事ごとにパンくず用のURLを追加する必要がなく、既存のカテゴリ構造ともずれにくい。

HTMLも単純なリンクの横並びではなく、

<nav aria-label="パンくずリスト">
  <ol>
    ...
  </ol>
</nav>

という構造にしている。

長い記事タイトルは最大2行にし、スマホ幅では自然に折り返す。320px、360px、390pxでもページ全体に横スクロールが出ないことまで確認した。

見た目と同じ内容でBreadcrumbListも生成#

パンくずは画面表示に加え、Schema.orgのBreadcrumbListも追加した。

BreadcrumbListのJSON-LD

実際の第13回の記事では、JSON-LD内に次の順番でURLが入っている。

https://bringain.com/
https://bringain.com/category/web-development/
https://bringain.com/category/web-development/operation/
https://bringain.com/blog/13-tag-noindex-footer-trust-pages/

@contextはhttps://schema.org、@typeはBreadcrumbList。各要素はListItemとしてpositionを持つ。

重要なのは、画面上のパンくずと構造化データを別々に管理しないこと。

見た目だけ手書き、JSON-LDだけ別のURL生成という構成にすると、カテゴリURLを変更したときに片方だけ古いまま残る可能性がある。今回はBreadcrumbs.astroで同じパンくずデータから表示とJSON-LDを作るようにした。

生成後のHTMLでも、画面上のリンクとJSON-LDのURLが一致していることを確認している。

カテゴリページの重複ナビを削除#

第14回で、ヘッダーには

Home / 記事一覧 / カテゴリ / 連載 / タグ / About

を表示するようにした。

その後カテゴリ一覧を開くと、本文の上にも

記事一覧 / カテゴリ / 連載 / タグ

が残っていた。

修正前のカテゴリページ

以前はページ内ナビとして必要だったが、今は同じリンクがすぐ上のヘッダーにある。カテゴリ一覧を開いた直後にほぼ同じナビが2回続く状態になっていた。

元を確認すると、このナビゲーションはArchiveLayout.astroの.archive-navから共通出力されていた。

単純にそこから削除すると、記事一覧、連載、タグページまで消えてしまう。そこでshowNavプロパティを追加し、カテゴリ一覧とカテゴリ・サブカテゴリ詳細だけ非表示にした。

本文側の重複ナビを削除したカテゴリページ

修正後もヘッダーのナビゲーションは残っている。

今回消したのは共通ナビそのものではなく、カテゴリページで二重に表示されていた分だけになる。

AstroとWordPressの記事でH1が2回出ていた#

もう1つは既存記事のHTML構造。

「AstroとWordPressを比べて、自分はAstroを選んだ。決め手は作り方とCloudflareとの相性」を見ると、同じタイトルが2回大きく表示されていた。

同じH1が2回表示されていた記事

原因は単純。

記事レイアウトではFrontmatterのtitleからH1を出している。一方、このMarkdown本文の先頭にも、

# AstroとWordPressを比べて、自分はAstroを選んだ。決め手は作り方とCloudflareとの相性

が残っていた。

つまり、

Frontmatter title
→ ArticleLayoutでH1

Markdown本文
→ もう1つH1

になっていた。

今回はFrontmatterと記事レイアウトのH1を正として、Markdown本文側の重複H1だけを削除した。

H1を1つにした修正後の記事

本文、H2以下の見出し、目次には触れていない。生成HTMLを確認するとh1は1個になった。

Markdown本文のH1をビルド前に警告する#

今回の記事だけ直して終わりにすると、別の記事で同じことが起きる可能性がある。

そこでscripts/check-content.mjsを追加し、Markdown本文にH1がある場合は警告を出すようにした。

単純に行頭の#を全部検出すると、Frontmatterやコード例まで拾ってしまう。そのため、

  • Frontmatter内は除外
  • コードフェンス内の# exampleは除外
  • Markdown本文の実際の# 見出しだけ検出
  • 対象ファイル名と行番号を表示

という処理にしている。

警告が出てもビルドは停止しない。

現在のビルド順は以下。

本文H1検査
↓
Astro build
↓
Pagefind生成
↓
sitemap.xml生成

記事タイトルをレイアウト側で出すという今の構成を維持したまま、Markdownへ誤ってH1を入れたときに気付けるようになった。

最後にビルドと画面幅を確認#

今回の修正後は、npm run buildと検証スクリプトを実行した。

最終結果は以下のようになった。

npm run build         成功
生成ページ             83ページ
Pagefind               19記事 / 2,353語
RSS                    生成成功
sitemap.xml            生成成功
git diff --check       成功

表示確認は320、360、390、768、1280pxで実施した。

Aboutのプロフィール画像、長い記事タイトルを含むパンくず、カテゴリページも確認し、横スクロールなどの崩れは出ていない。

既存の記事URL、カテゴリ、連載、個別タグページのnoindex、サイト内検索、RSS、sitemap.xml、Cloudflare Workersの構成もそのまま維持している。

About・パンくず・H1の変更点#

変更点をまとめると、以下。

  • Aboutページへサイトの方針を追加
  • 運営者の実務経験と扱ってきた技術を追加
  • プロフィール画像を追加
  • 全記事へTOPから始まるパンくずを追加
  • パンくずと同じデータからBreadcrumbListを生成
  • カテゴリページだけ重複ナビを非表示
  • AstroとWordPress記事の重複H1を削除
  • Markdown本文のH1を検出する警告を追加
  • PCとスマホ幅で表示確認
  • ビルド、Pagefind、RSS、サイトマップを再確認

Aboutや記事ページの見た目に加え、HTMLのH1や構造化データまで修正した。

次に残ったのはタグ一覧の重複。第12回でも一度修正した部分だが、記事を増やしたあとに再発していた。次回はFrontmatterをその都度書き換えるのではなく、タグマスタとaliasを使って仕組みから修正する。

連載：Astro＋Cloudflareでサイトを作る

WEB制作運用・改善

第22回 記事一覧の上部にもページナビを追加―10件表示を上下から移動できるようにする

記事一覧、カテゴリ、サブカテゴリ、連載詳細で、一覧末尾だけにあったページナビを上部にも追加しました。上下のナビを共通コンポーネント化し、同じpage・sort状態を使うようにした内容を記録します。