什么是谷歌SEO结构化数据面包屑导航？
起源于一个我已经block的票，希望在谷歌浏览器中检索到的结果显示面包屑导航的式样以提高SEO搜索排名。
姑且调查了一下这个SEO面包屑要怎么做：
有两种格式：（主要是我们用到最多的果然还是就这两种）
1.JSON-LD
2.微数据
如需指定面包屑导航，请定义一个包含至少两个 ListItems 的 BreadcrumbList。内容必须包含必要属性，才能在搜索结果中一并显示面包屑导航。
我们设想的是需要做出一个类似Template的组件来做面包屑导航，并且使用一个专门的react hooks去处理返回给组件的items，如下：
组件BreadCurmbs.tsx
import React from 'react';
import Head from 'next/head';
interface BreadcrumbsItem {
url: string;
name: string;
}
interface BreadcrumbsProps {
items: BreadcrumbsItem[];
}
const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items }) => {
const structuredData = {
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": items.map((item, index) => ({
"@type": "ListItem",
"position": index + 1,
"name": item.name,
"item": item.url
}))
};
return (
<>
<Head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
/>
</Head>
<nav>
<ul className="flex space-x-2">
{items.map((item, index) => (
<li key={index}>
<a href={item.url}>{item.name}</a>
</li>
))}
</ul>
</nav>
</>
);
};
export default Breadcrumbs;使用dangerouslySetInnerHTML将我们定义的结构化数据插入，并且使用application/ld+json的type。代码非常的简单，一看便知
hooks
对于Google 面包屑导航组件的items如何生成，我们只需要一个url和name就好，初步思维是按照next-router的useRouter去获取asPath，并且根据我们需要做的页面的路由进行switch判断，再编辑详细的数据返回出去。
这里需要考究一下如何利用asPath的值进行判断返回我们自己定义的对象，其实是很简单的东西，不赘述。根据项目需求自行解决（涉及到的东西很多，比如路由设计啥的）
// TODO
import { useRouter } from 'next/router'
export const useBreadCrumb = () => {
const router = useRouter()
console.log(router.asPath)
return {
pathname: router.asPath,
}
}接下来，这个组件随用随搬了，但是我建议放在你的项目里的Layout里，这样会更加的自由且方便，涉及到的东西只需要用hooks返回items就好。不过这样做也可以直接在组件里直接用router处理了，各有好处吧。