Loading... > @auth: 郭瑞峰 > @createTime: 2023/06/30 > @updateTime: 2023/06/30 # 基础知识了解 ## 啥是SEO `SEO` 全称 `Search Engine Optimization`，翻译就是 搜索引擎优化 ，是关于搜索相关的排名。排名规则可以从搜索引擎供应商处查找。 Google官方文档： [如何使信息显示在 Google 搜索结果中 | Google 搜索中心 | 文档 | Google for Developers](https://developers.google.com/search/docs/fundamentals/get-on-google?hl=zh-cn "如何使信息显示在 Google 搜索结果中 | Google 搜索中心 | 文档 | Google for Developers") ## 前端框架选择 首先建议使用 `next(react)` 或者 `nuxt(vue)` web框架，建议的原因是这类框架都是**服务端渲染框架**，有利于搜索引擎优化。 这里说一下 **服务端渲染框架** 和 **客户端渲染框架** 区别： **服务器渲染框架**：它可以将组件渲染到服务器上并返回 HTML，并一直在服务器运行，这样可以一直被发现(*形容不好请见谅*)，提高搜索引擎优化。 **客户端渲染框架**：它会将所有的代码打包成一个或多个 JavaScript 文件，并在个人电脑的浏览器中运行。也就是说它只有访问才能被发现，就不利于搜索引擎发现。 当然，你可以自己将客户端渲染配置成服务端渲染，但这样十分耗时耗力。 # 前端如何配置 SEO 先把谷歌的配置规则地址放在这里：[如何添加面包屑导航 (BreadcrumbList) 标记 | Google 搜索中心 | 文档 | Google for Developers](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=zh-cn "如何添加面包屑导航 (BreadcrumbList) 标记 | Google 搜索中心 | 文档 | Google for Developers") 简单说就是在`html`的`head`中添加一段规则，让搜索引擎能及时发现 ```html <html> <head> <title>Award Winners</title> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Books", "item": "https://example.com/books" },{ "@type": "ListItem", "position": 2, "name": "Science Fiction", "item": "https://example.com/books/sciencefiction" },{ "@type": "ListItem", "position": 3, "name": "Award Winners" }] } </script> </head> <body> </body> </html> ``` 当然，这只是官方给的示例，并不能灵活操作，所以说需要将 `head` 和 `script` 封装成组件形式。 ## 基于vue封装 ```html <template> <!-- 定义导航部分，当然也是面包屑 --> <nav> <ul> <li v-for="(item, index) of $props.items" :key="index"> <a :href="item.url">{{ item.name }}</a> </li> </ul> </nav> </template> <script lang="ts" setup> import { useMeta } from '@nuxtjs/composition-api' import { defineProps, watch } from 'vue' type breadcrumbsProps = { items: Array<{ url: string, name: string }> } const $props = defineProps<breadcrumbsProps>() watch($props.items, () => { const structuredData = { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": $props.items.map((item, index) => ({ "@type": "ListItem", "position": index + 1, "name": item.name, "item": item.url })) } useMeta({ script: [ { type: "application/ld+json", dangerouslySetInnerHTML: { "__html": JSON.stringify(structuredData) } } ] }) }, { deep: true, immediate: true }) </script> ``` ## 基于react封装 ```typescript import React from 'react' import Head from 'next/head' export type breadcrumbsProps { items: Array<{ url: string, name: string }> } 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) }} ></script> </Head> {/* 定义导航部分，当然也是面包屑 */} <nav> <ul>{ items.map((item, index) => ( <li key={index}> <a href={item.url}>{item.name}</a> </li> )) }</ul> </nav> </> ); }; export default Breadcrumbs ```  最后修改：2024 年 11 月 27 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏