@auth: 郭瑞峰 @createTime: 2023/06/30 @updateTime: 2023/06/30

基础知识了解

啥是SEO

SEO 全称 Search Engine Optimization，翻译就是搜索引擎优化，是关于搜索相关的排名。排名规则可以从搜索引擎供应商处查找。

Google官方文档：如何使信息显示在 Google 搜索结果中 | Google 搜索中心 | 文档 | Google for Developers

前端框架选择

首先建议使用 next(react) 或者 nuxt(vue) web框架，建议的原因是这类框架都是服务端渲染框架，有利于搜索引擎优化。

这里说一下 服务端渲染框架 和 客户端渲染框架 区别： 服务器渲染框架：它可以将组件渲染到服务器上并返回 HTML，并一直在服务器运行，这样可以一直被发现(形容不好请见谅)，提高搜索引擎优化。 客户端渲染框架：它会将所有的代码打包成一个或多个 JavaScript 文件，并在个人电脑的浏览器中运行。也就是说它只有访问才能被发现，就不利于搜索引擎发现。

当然，你可以自己将客户端渲染配置成服务端渲染，但这样十分耗时耗力。

前端如何配置 SEO

先把谷歌的配置规则地址放在这里：如何添加面包屑导航 (BreadcrumbList) 标记 | Google 搜索中心 | 文档 | Google for Developers

简单说就是在html的head中添加一段规则，让搜索引擎能及时发现

<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封装

<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封装

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

初步了解前端SEO搜索排名算法