Next.js/Tailwind CSSで構造化データ付きパンくずリストを自作する

プログラミング

パンくずリストが簡単に扱えるライブラリ等があればと思いましたが、使いやすいのがなかったので、自作することにしました。

コンポーネント

表示

UIは適宜調整してください。

BreadCrumbs.tsx

import Link from "next/link";

type Props = {
  list: {
    name: string;
    path?: string;
  }[];
};

export const BreadCrumbs = ({ list }: Props) => {
  return (
    <ol
      className="flex items-center justify-center gap-3 pt-3"
      aria-label="breadcrumb"
      itemScope
      itemType="https://schema.org/BreadcrumbList"
    >
      {list.map(({ name = "Home", path = "/" }, index) => (
        <li
          className="flex items-center"
          key={index}
          itemProp="itemListElement"
          itemScope
          itemType="https://schema.org/ListItem"
        >
          {list.length - 1 !== index ? (
            <div className="flex items-center gap-3 text-blue-500">
              <Link href={path}>
                <a className="" itemProp="item">
                  <span itemProp="name">{name}</span>
                </a>
              </Link>
              <meta itemProp="position" content={`${list.length}`} />
              <span className="text-gray-900">/</span>
            </div>
          ) : (
            <div className="" itemProp="item">
              <span aria-current="page" itemProp="name">
                {name}
              </span>
              <meta itemProp="position" content={`${list.length}`} />
            </div>
          )}
        </li>
      ))}
    </ol>
  );
};

書き方は参考記事を参照してください。

埋め込み箇所

import type { NextPage } from "next";
import { BreadCrumbs } from "@/components/BreadCrumbs";

const CategoryPage: NextPage = () => {
  return (
    <>
      <BaseLayout>
        <BreadCrumbs
          list={[
            {
              name: "Home",
              path: "/",
            },
            {
              name: "Creators",
              path: "/creators",
            },
          ]}
        />
        ......
      </BaseLayout>
    </>
  );
};
export default CategoryPage;

ページ数（ファイル数）が多くなければ各ページファイルに埋め込む形でも労力はあまりかからないので、これで満足です。

課題

  • list内のHome部分を省略しても良さそう
  • 構造化データの書き方は合ってるか少し不安
  • ページ数の多いアプリケーションでは_app.tsx内とかで完結できる仕様が楽そう

今回は構造化データはおまけ程度でパンくずが置ければ良いと考えていたので、改善は別で行います。

まとめ

パンくずを上部に置くとスマホ表示でメインでない要素がファーストビューで占有してしまうので、下部に置く方がデザイン的にはすっきりするなぁと思っています。SEO的にはそんなに評価変わらないと思うので柔軟に対応したいですね。

参考

パンくずコンポーネント：https://zenn.dev/rik9228/scraps/caff5e23f0b221
構造化データ：https://saruwakakun.com/html-css/basic/breadcrumb

ー　この記事をシェアする？　ー

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。

Related / 関連記事