MD-Blog_Web Creative

こんにちは。
私事、異業種からマークアップエンジニアに転身して1年3ヶ月が経つ。あっという間だ。

さて、早速表題の件について、何要素でマークアップするのが最適だろうか。
先日、所属するWEBプロダクション事業部のクリエイター内で議論になった。ちなみにわたしは「a要素」でマークアップしているのだが、a要素派が「1」に対してspan要素などのa要素以外派が「多」だった。
自身がなぜa要素でマークアップしているのかを上手く説明することができず、袋叩きに遭い、今までなんとなーくでマークアップしてきた自分と民主主義を恨んだ。

そこで、改めてパンくずリストにおける「現在のページ」のマークアップについて多角的視点で考えてみた。
本記事が、わたしと同じように社内で袋叩きに遭った方などの一助になれば幸甚だ。

はじめに

本記事は、あくまで現時点での個人的見解であり、正解は何か結論を出す意図はなく、
表題のとおりただただ考えてみた（調べてみた）内容となっている。
しかしながら、a要素を贔屓目に執筆している可能性は否めない。

SEO

個人的に 「SEOといえば！」な以下2点について考えてみる。

クローラビリティ

クローラーがサイト内を巡回しやすいようにすることだが、
クローラーはリンクを辿ってサイト内を巡回しコンテンツを理解するため、しっかりと内部リンクを設置することは、クローラビリティが向上しSEO対策にも繋がるというわけだ。

関連性が低いリンクなど不自然な内部リンクが多いと評価が下がる可能性があるようだが、
パンくずリストの現在のページをa要素にしたとしても関連性が低いリンクには該当しないのではないか。

構造化データ

HTMLで書かれた情報を検索エンジンに理解しやすいようにタグづけしたものだが、
構造化データの形式によってマークアップに違いはあるのか調べてみる。（RDFa Liteは省略する）

JSON-LD（Google推奨）

script内に記述するためHTMLは影響を受けない。

microdata

HTMLの属性を利用して記述するためURLはa要素でマークアップする必要がある。
しかし、以下のとおり現在のページのURLに限っては省略可能、つまりa要素である必要はないということになりそうだ。

パンくずがパンくずリストの最後のアイテムである場合、item は必須ではありません。
最後のアイテムに item が含まれていない場合、Google はそのページの URL を使用します。
引用：Google 構造化データ パンくずリスト ガイドライン

念の為、構造化データ テストツールを用いてli要素でマークアップしたコードをテストしてみたがエラーにはならなかった。

どちらの形式を使用すればいいのか？

どちらの形式だとしても使用する要素が限定されないのであれば、これはもうGoogle推奨のJSON-LD一択で良いと思っている。
しかし、どちらを使用しても検索結果にはリッチリザルトが表示されるため、それぞれのメリット・デメリットを把握した上で、プロジェクトに合った方を使用するのが良いだろう。

ちなみに、構造化データの共通仕様を提供する団体であるSchema.orgのWebサイトに掲載されているパンくずリストのサンプルコードを見ると、現在のページはa要素になっている。

• 参考：Schema.org > BreadcrumbList

一方、Googleのパンくずリストサンプルコードは、li要素になっている。（a要素じゃないのか...）

アクセシビリティ

アクセシビリティの観点から、現在のページの要素には「aria-current="page"」属性を指定するのが適切だろう。
この属性は基本マークアップのすべての要素で使用することができる。

（a要素じゃなくてもいいのか...）

しかし、スクリーンリーダー（iOS 15.6 + Safari + VoiceOver）で検証してみると、
a要素でマークアップした場合は「現在のページ」と読み上げが付加されるのに対し、
li要素、span要素でマークアップした場合は読み上げが付加されない。

読み上げられないといけないのか？

アクセシビリティの国際規格には「現在位置」（レベルAAA）という項目があるため、現在のページであることは読み上げられたほうが良いだろう。

ちなみに、WAI-ARIAの仕様（アクセシビリティを向上させるための属性を定義する仕様）を定めているW3CのWebサイトに掲載されているパンくずリストのサンプルコードを見ると、現在のページはa要素になっている。

• 参考：ARIA Authoring Practices Guide > BreadcrumbList

ユーザビリティ

a要素でマークアップしたとして、現在のページがリンクに見えることでユーザは混乱しないだろうか。これは悩ましい。
しかしながら、「リンクっぽくなく」することはできる。

• [aria-current="page"] {}に「リンクっぽくない」スタイルを適用する。
• tabindex="-1"を指定して、キーボード操作（tabキー）でフォーカスされないようにする。
• pointer-event: none;を指定して、ポインターイベント非対象にする。

こんな感じだろうか。ひと手間かかるがa要素を使用することでユーザビリティが低下することはないだろう。

さいごに

予想通り、a要素を贔屓目に執筆してしまった。
今回いろんなサイトのパンくずリストを見てみたが、a要素でマークアップされているサイトはゼロではないにしてもあまりない印象。 しかし、これからも社内のマイノリティはa要素を使用する所存だ。