从前端工程师的角度将SEO做到极致 -- 菜鸟来实操

在开发公司海外官网时，我整理了项目中的数据埋点方案，并写成一篇掘金文章：

全网最简单的 Vue 数据埋点

其实当时就想发一篇SEO相关文章，但是当时都是参考的另一位大佬的文章，基本上使用的也就是里面的一些内容，很多东西也不知道，所以就感觉没有必要写！

参考文章见：从前端工程师的角度将SEO做到极致🌈

回头一看，发现大佬写的还是很强，我这次遇见的问题，其实这文章里面也提过了，只是菜鸟不知道大佬写的东西可以解决我的问题 /(ㄒoㄒ)/~~

这篇文章相当于是大佬文章的一个实践，部分没有用上，因为感觉有重复或者不知道是什么，可以酌情观看！

1、添加 TDK

所以菜鸟给自己的网站是这样设置的

html 复制代码

<title>Sailgene</title>
<meta
  name="Keywords"
  content="Sequencing,Nanopore,Revio,PacBio,ONT,DRS,ultra-long sequencing,full-length transcriptome,Full-length Transcriptome Sequencing,direct cDNA sequencing,tail iso-seq,small RNA sequencing,sRNA-seq,High-throughput Sequencing,long reads sequencing,Sailgene,NGS,TGS,WGS,Genome,Transcriptome,Metagenome,DNA sequencing,RNA sequencing"
/>
<meta
  name="description"
  content="The leading global provider of multi-omics services and solutions in genomics, transcriptomics, and microbiomics, equipped with PacBio Revio, Nanopore PromethION, Illumina, and DNBSEQ sequencing platforms, offers cost-effective NGS and TGS sequencing services for all sample types."
/>

当时不知道 Keywords 被废弃了，所以还是加了。

2、HTML语义化

所以菜鸟在开发时，基本上img都加上了alt，该用h标签的就用了（且保证了每个界面只有一个h1），header、footer也都用了！

3、Open Graph 协议

菜鸟感觉这个和 meta标签的TDK 是差不多的，eg:

ini 复制代码

<meta property="og:title" content="Sailgene" />
<meta property="og:type" content="organism.gene.Sequencing" />
<meta
  property="og:description"
  content="The leading global provider of multi-omics services and solutions in genomics, transcriptomics, and microbiomics, equipped with PacBio Revio, Nanopore PromethION, Illumina, and DNBSEQ sequencing platforms, offers cost-effective NGS and TGS sequencing services for all sample types."
/>
<meta
  property="og:Keywords"
  content="Sequencing,Nanopore,Revio,PacBio,ONT,DRS,ultra-long sequencing,full-length transcriptome,Full-length Transcriptome Sequencing,direct cDNA sequencing,tail iso-seq,small RNA sequencing,sRNA-seq,High-throughput Sequencing,long reads sequencing,Sailgene,NGS,TGS,WGS,Genome,Transcriptome,Metagenome,DNA sequencing,RNA sequencing"
/>

总结：这个协议主要是 Facebook 提出来的，为了更好的展示用户分享的网页的内容，实现这个协议，有助于 SEO 优化，告诉 google 该网页有哪些内容，以及关键词等。

4、HTML lang

当时这个菜鸟看不管啥项目都会有这个，所以暂时忽略了！

现在一看才发现留下了一个隐患，就是菜鸟开发的这个网站也可以中英文切换，但是切换后，我只设置了缓存里面的变化，并没有改变html的lang，所以这个希望大家可以引以为戒！

5、hreflang 属性

这个和上面的不一样，菜鸟一开始以为是一个东西！

6、SSR

SSR 确实有更好的SEO效果，但是当时技术选型的时候没有考虑到需要推广，直接用了vue单页面开发，所以最开始的时候一定要确定好方向！

7、sitemap 站点地图 - 重点

这个就是菜鸟这次加上的，具体原因是：

香港及美国有2个公司，域名为（www.sailgene.com 和 www.sailgene.us）,但是google用sailgene关键字搜索，只能搜索出 www.sailgene.com

然后就问了如何实现 提交sitemap.xml 和 手动让 Google 抓取

发现sitemap.xml就是一个文件，建好之后提交到服务器的index.html同级目录下就行。格式如下：

xml 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.sailgene.com/</loc>
    <lastmod>2025-11-18</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.sailgene.com/#/content</loc>
    <lastmod>2025-11-18</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.sailgene.com/#/about</loc>
    <lastmod>2025-11-18</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.sailgene.com/#/contactus</loc>
    <lastmod>2025-11-18</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.sailgene.com/#/resources/sample</loc>
    <lastmod>2025-11-18</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.sailgene.com/#/services/0</loc>
    <lastmod>2025-11-18</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.sailgene.com/#/services/1</loc>
    <lastmod>2025-11-18</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.sailgene.com/#/services/2</loc>
    <lastmod>2025-11-18</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.sailgene.com/#/services/3</loc>
    <lastmod>2025-11-18</lastmod>
    <priority>1.0</priority>
  </url>
  ......
</urlset>

然后手动让Goole录入 ，就是需要登录：search.google.com/search-cons...

菜鸟这里操作错了，把这个Goole生成的文件放到服务器的index.html同级目录下了，不知道有没有用，反正验证通过了，然后就跳转到了这里

这里还要再进行站点地图的设置

点击

然后输入并提交即可

注意

需要等待两三天，Goole 才会搜录，需要耐心！

成果展示

这是优化后，被搜录了的展示

但是还是老话，SPA并不适合做搜录，搜录的也仅仅只是首页或者空白模板，只有搜网站名才能出现，搜网页内容是不会出现的！

8、结构化数据

这里菜鸟也用错了，直接复制的大佬文章里面的代码，然后自己改成了这样

html 复制代码

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Product",
    "headline": "Sequencing,Nanopore,Revio,PacBio,ONT,DRS,ultra-long sequencing,full-length transcriptome,Full-length Transcriptome Sequencing,direct cDNA sequencing,tail iso-seq,small RNA sequencing,sRNA-seq,High-throughput Sequencing,long reads sequencing,Sailgene,NGS,TGS,WGS,Genome,Transcriptome,Metagenome,DNA sequencing,RNA sequencing"
  }
</script>

其实这个JSON-LD相当于一门有规定的语言，不能像菜鸟这样乱写，不会生效，具体见：developers.google.com/search/docs...

9、robots.txt

注意

但是菜鸟在写下篇文章SPA到SSR的升级之路！时，发现Nuxt是会带上这个文件的，所以就要注意配置！

10、余下

余下的是我没有使用到的但是我感觉有用的，可以直接去看大佬的文章从前端工程师的角度将SEO做到极致🌈，但是怕大佬删掉了，所以我截图放这里保存一下!

效果

有图真相，这个是掘金的SEO评分：

这是我优化完，我的网站的SEO评分：