跳到主要内容

谈谈seo优化

搜索引擎优先爬取页面HTML结构，通过SSR渲染，会在服务端生成HTML结构，给到客户端渲染，有利于seo

深度seo优化，需要知道那些细节点？

  • 合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减小， title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面 title 要有所不同； description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同； keywords 列举出重要关键词即可
  • 语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
  • 重要内容 HTML代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
  • 重要内容不要用 js 输出：爬虫不会执行js获取内容
  • 控制页面的大小，减少http请求，提高网站的加载速度。
  • 少用 iframe ：搜索引擎不会抓取 iframe 中的内容

为什么需要seo?​

从用户角度、业务角度、产品角度去分析

  • 1、提高搜索引擎
  • 2、首屏的加载速度

对业务来说

  • 提高了产品可见性、市场曝光度， 流量入口
  • 帮助业务的增长

seo优化思路​

  • 1、页面结构优化
    • 语义化标签
      • 根据语义化，爬取内容的时候，可以获取到更多有用的信息
      • 搜索引擎更容易理解页面
      • div，span这些的标签，都需要替换为语义化
        • 比如头部 header标签、导航栏 nav标签 、核心内容 main标签，底部 footer标签等等
    • 设置 title 、 description 、 keywords
      • title是网站页面标题 ： <title>网站标题</title>
      • description是页面描述概况：<meta name=”Description” Content=”你网页的简述”>
      • keyword是页面关键字：<meta name=”Keywords” Content=”关键词1,关键词2,关键词3,关键词4″>
  • 2、内容优化
    • 保证页面中的关键词的覆盖率
  • 3、结构化schema数据
    • 使用Schema.org 规范的 FAQ
    • 通过标准版的schema的结构，为搜索引擎提供明确的上下文信息
    • 通过Schema数据对网页内容进行语义化标注
html
<script type='application/ld+json'>
 {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    "author":'qqqiu',
     mainEntity: mainEntity.value.map(({ question, answer }) => ({
      @type': 'Question',
      name: question,
      acceptedAnswer: {
        '@type': 'Answer',
        text: answer,
      },
    })),
  }   
</script>

企业级SEO优化​

  • 1、URL规则优化
  • 2、nofollow标签
    • 导航栏，底部导航栏增加nofollow标签
  • 3、lang声明标签声明
    • 全部页面增加语言声明
  • 4、hreflangs标签声明
  • 5、H标签规则
  • 6、301重定向
  • 7、搜索引擎相关文件，如robots.txt、sitemap.xml
    • 都是放在网站的根目录下

robots.txt​

robots.txt 是一个文本文件，用于告诉搜索引擎的爬虫（如 Googlebot、Bingbot）哪些页面或文件可以被抓取，哪些不可以被抓取

  • 主要用于：
    • 防止搜索引擎抓取某些页面（如后台管理页面、测试页面等）
    • 限制爬虫访问频率，减轻服务器压力
    • 指定网站地图（sitemap.xml）的地址
  • 主要作用是：告诉搜索引擎「哪些页面不能爬取」，可以节省爬虫资源
txt
User-agent: *
Disallow: /admin/
Disallow: /api/
Allow: /

Sitemap: https://example.com/sitemap.xml
  • User-agent: * 表示对所有搜索引擎生效 Disallow: /admin/ 禁止爬取后台目录 Allow: / 表示其余路径可以抓取 最后一行 Sitemap: 是可选的，用来告诉搜索引擎 sitemap 的地址

sitemap.xml​

sitemap.xml 是一个为搜索引擎优化（SEO）而设计的重要文件，用于向搜索引擎清晰地列出网站中希望被抓取和索引的所有页面

  • sitemap.xml 就像是你网站的“站点地图”，告诉搜索引擎：
    • 网站有哪些页面（URLs）
    • 每个页面的更新时间（<lastmod>）
    • 页面更新的频率（<changefreq>）
    • 页面的重要性（<priority>）
  • 通过sitemap列出网站所有重要的页面，帮助搜索引擎发现、理解和索引网站内容
  • sitemap是站点地图，可以告诉搜索引擎哪些页面可以被抓取收录，可以提升页面的收录，提高搜索索引的效率
  • 用 sitemap.xml 主动推送比较高价值页面（如首页、分类页、标签页，播放页、详情页）

URL规则优化​

  • 多语言切换时，URL需要区分语言
    • 比如 www.demo.com/ja、www.demo.com/en，即`主链接/语言`
    • URL 中体现语言前缀
    • 更好的搜索引擎、爬虫识别
  • 页面跳转时，带上语言、分类、id
    • 比如跳转到短剧详情页面
      • 主链接/语言/video/剧名/episodes-剧集
    • 简单来说，url链接尽可能直观的表示当前页面的作用

nofollow标签​

背景： 为了优化网站的 SEO 表现，防止搜索引擎将权重传递给某些链接（如广告链接、外部链接或用户生成内容的链接），需要对这些链接配置 rel="nofollow" 属性。 目的：

  • 避免权重流失。
  • 控制搜索引擎爬取策略。
  • 提高搜索引擎对网站内容的质量评估。

h标签​

  • 比如标题、描述、内容，可以通过h标签来渲染
    • 比如标题、核心关键词，使用h1
    • 概要、描述，使用h2
    • 子标题 使用h3
  • 让搜索引擎理解页面内容层级关系

hreflangs标签声明​

目的：

  • 告诉搜索引擎每个页面的语言和地区版本。
  • 避免语言和地区版本页面的重复内容问题。
  • 提升目标地区用户的搜索体验。

规则说明​

  • Hreflang 标签需要在页面的 <head> 部分声明。
  • 每个页面必须包含指向其自身的 hreflang 标签。
  • 每个页面必须包含默认页面<hreflang="x-default">的标签。

Canonical链接​

  • canonical可以理解为规范标准链接，告诉搜索引擎，这个页面的标准规范地址是哪一个
  • canonical 是用于解决重复内容问题，告诉搜索引擎，在多个相似的URL中，哪些是权重的页面，让搜索引擎可以集中收录，防止重复收录，避免多个URL分散权重

场景：

  • 分页场景，每个分页的页面都需要有单独的canonical的链接，因为每个分页的页面的内容都是不一样的，如果每个页面的canonical都一样，那么会搜索引擎会认为是重复的内容

标签格式

  • Canonical 标签需放在网页的<head>标签内
css
<link rel="canonical" href="https://www.flextv.com/对应链接"/>

noindex​

  • noindex是seo的指令
  • 告诉搜索引擎：这个页面可以抓取，但不要收录到搜索结果里。

场景：

  • 低价值的页面，比如有些页面对用户是没有太大的价值，就可以不需要出现在搜索结果中
  • 临时的测试页面、周期性的活动页面

生成网页TDK​

网页TDK, 指的是title，description, keywords, 这3个是seo比较核心的基础元标签，其中title标签是搜索结果的关键，利于提高搜索的排名，description, keywords 这2个是通过meta标签设置， 显示搜索的摘要

TDK 是网页最核心的三大基础 SEO 元标签：

名称标签主要作用
Title<title>决定搜索结果标题、权重最高的关键词字段
Description<meta name="description">展示在搜索摘要中，影响点击率（CTR）
Keywords<meta name="keywords">早期搜索引擎使用，如今权重极低，但仍用于结构化管理与内部检索
  • Title 是 SEO 权重最高的元素。
  • Description 影响点击率（CTR），在搜索结果中是主要摘要

useTDK方法​

  • 对于支持动态TDK的页面，其渲染过程应动态载入相应的参数替换规则，并在最终的渲染上下文中，将TDK模板内的所有预设参数替换为准确的实时数据。
  • home.ts
    • assets/tdk/home.ts
ts
export default {
  en: {
    title: 'FlexTV | Watch Trending Short Dramas & High-Impact Stories',
    description: 'FlexTV is your portal to the world of short, high-octane drama. Each episode is a mini-marvel, packed with climaxes and crafted to keep you on the edge of your seat. From action-packed thrillers to heartwarming romances, FlexTV offers a comprehensive selection of popular shows tailored to suit every taste.',
    keywords: 'FlexTV, Minidramas, Short Videos, Bitesize Dramas, Playlets'
  },
  ru: {
    title: 'FlexTV | Смотрите популярные короткие драмы и захватывающие истории',
    description: 'Погрузитесь в мир мини-драм на FlexTV! Новые хиты ежедневно: напряжённые сюжеты, неожиданные повороты, любовь, драма и триллеры!',
    keywords: 'FlexTV, мини-драмы, короткие видео, драмы малого формата, мини-сериалы'
  },
  sc: {
    title: 'FlexTV | 观看热门短剧与高能剧情故事',
    description: '沉浸式短剧尽在 FlexTV！热门短剧每日上新，剧情高能反转、节奏紧凑。甜宠、虐恋、悬疑、复仇全类型齐聚，追剧欲爆棚！',
    keywords: 'FlexTV, 迷你剧, 短视频, 轻量短剧, 小剧场'
  }
}
  • useTdk
ts
import { get } from 'lodash-es'

export type TdkProps = {
  page?: 'home' | 'video' | 'genres' | 'genres_all' | 'search'
}

export type TdkData = {
  title: string
  description: string
  keywords: string
}

export type PageTDKConfig = {
  page?: TdkProps['page']
  params?: Record<string, any>
}

export default function useTDK(tdkOptions?: TdkProps) {
  const { locale } = useI18n()

  /**
   * 根据页面类型和当前语言获取 TDK 数据
   */
  const getPageTDK = async (page: TdkProps['page'] = 'home', params?: Record<string, any>): Promise<TdkData | null> => {
    try {
      const lang = locale.value || 'en'

      const tdkModule = await import(`~/assets/tdk/${page}.ts`)
      const tdkDataConfig: TdkData = tdkModule.default || tdkModule
      const tdkData = get(tdkDataConfig, lang) || {}
      if (params && Object.keys(params).length > 0) {
        const result: TdkData = {
          title: formatMessage(tdkData.title, params),
          description: formatMessage(tdkData.description, params),
          keywords: formatMessage(tdkData.keywords, params)
        }
        return result
      }
      return tdkData
    } catch (error) {
      console.error(`Failed to load TDK for page: ${page}, locale: ${locale.value}`, error)
      return null
    }
  }

  /**
   * @param template 模板字符串（如 "Hello {name}"）
   * @param params 参数对象（如 { name: "John" }）
   * @returns 替换后的字符串
   */
  const formatMessage = (template: string, params: Record<string, any>): string => {
    return template.replace(/\{(\w+)\}/g, (match, key) => {
      return params[key] !== undefined && params[key] !== null ? String(params[key]) : match
    })
  }

  const setPageTDK = async (pageTDKConfig: PageTDKConfig = {}) => {
    const { page, params } = pageTDKConfig
    const tdkData = await getPageTDK(page || tdkOptions?.page, params)
    if (!tdkData) return
    useHead({
      title: tdkData.title,
      meta: [
        {
          name: 'description',
          content: tdkData.description
        },
        {
          name: 'keywords',
          content: tdkData.keywords
        }
      ]
    })
  }

  return {
    getPageTDK,
    setPageTDK
  }
}

结构化schema数据​

通过schema的结构，为搜索引擎提供明确的上下文信息，让搜索引擎更好理解网页结构的标记语言 【简单来说让搜索引擎“更懂网页的内容”】

  • 结构化数据通过json配置来描述相关结构化信息
  • 在 Nuxt中，直接通过 useHead 注入 JSON
    • 可以使用@nuxt/schema-org模块

提高seo目的效果

  • 提供搜索的质量
  • 提高搜索结果丰富度
  • 可以提高点击率
    • 搜索结果更吸引用户点击
  • 提高网页内容的抓取效率
  • 提高网站的曝光率

参考文档：​

文档名链接
视频结构化数据官方规范developers.google.com
结构化数据测试入口search.google.com
EEAT：《搜索质量评估员指南》https://developers.google.com/search/docs/appearance/quality-evaluator-guidelines

Schema 类型​

  • Organization
  • CollectionPage
  • WebSite
  • ItemList
  • ListItem
  • BreadcrumbList
Schema 类型作用适用场景典型字段
Organization描述一个组织、公司或机构网站主体信息、企业信息页、联系我们页name, url, logo, sameAs, contactPoint
WebSite描述整个网站，提供网站层级信息给搜索引擎SEO 增强、站点搜索、站点结构信息name, url, potentialAction（如 SearchAction）
CollectionPage表示一个内容集合页面产品列表页、文章列表页、视频列表页name, mainEntity, about, hasPart
ItemList列表集合（可嵌套 ListItem）文章列表、产品列表、排行榜、目录itemListElement（ListItem 数组）, numberOfItems
ListItem列表中的单个项配合 ItemList 或 BreadcrumbList 使用position, url, name
BreadcrumbList面包屑导航结构页面面包屑导航，帮助搜索引擎理解页面层级itemListElement（ListItem 数组，包括 position 和 name）

GEO/FAQ 优化​

FAQ 是通过 schema 结构化数据，让传统搜索引擎明确识别页面中的问答内容。 GEO是通过页面内容本身的结构化来实现，让 AI 搜索引擎更容易抓取、拆分、理解、检索、引用并生成答案。

  • GEO使用生成引擎优化技术，针对 ChatGPT、Perplexity 和 Google AI 等 AI 搜索引擎优化文档
    • 让内容更容易被 AI 检索、理解、引用和生成到答案中
  • FAQ 结构化只是 GEO 的一部分，做了 FAQ schema
  • FAQ 结构化是给传统搜索引擎问题解答
  • GEO 结构化是给 AI搜索引擎去检索回答

Open Graph 社交平台分享优化​

  • Open Graph 是一套网页元数据协议，用来告诉社交平台“这页内容应该怎么展示”
  • 当别人把你的链接发到X、Facebook、TikTok 等地方时，平台就更容易正确生成 (标题、摘要、封面图等等)
  • 简单来说就是 当社交媒体分享，网页元数据的展示
  • 文档：

影响SEO的性能指标​

为什么性能指标会影响SEO， Google 认为：用户必须快速看到主要内容

  • LCP 是最重要的 SEO 性能指标。
  • 当 LCP 完成，用户才真正“看到主要内容”。
  • 如果让用户等待的时间太久，Google会不愿意把你的网站排在前面

LCP慢的影响问题

  • 影响用户停留时间，用户不看内容就离开。
  • 影响爬虫效率，Google搜索引擎抓取频率会下降。

chrome seo相关插件​

  • Ubersuggest-SEO与关键词神器
  • AITDK SEO Extension - 流量/关键词/Whois/SEO

接入GSC​

  • Google Search Console（简称 GSC）是 Google 官方推出的一款免费网站管理工具
  • google搜索引擎的控制台
  • 用于分析SEO
    • 网址曝光量、点击率、平均排名
    • 可以按关键词、页面、国家/地区、设备等维度分析数据
  • 检查网站是否被 Google 正常收录
  • 发现并修复网站问题
  • 提交和管理网站内容
    • 提交Sitemap

分析SEO工具​