侧边栏

SEO初体验

发布于 2018-09-28 21:31:51| 分类于前端/前端业务

这篇文章在草稿箱里躺了一年多了。2017年的时候，赶在国庆前完成了豆腐PC站的重构和上线，重构的主要目的是功能迭代和SEO优化。当时还专门找了一位SEO专员帮忙，跟着学到了不少搜索优化的知识。

本来打算项目上线后就整理相关经验，但由于经验不足，不知道从何下手，就一直放在草稿箱里。最近读了《SEO教程：搜索引擎优化入门与进阶（第3版）》这本书，结合书中知识和项目经历，打算重新梳理一下SEO相关的内容。

参考：

《Google搜索质量指南》
《百度搜索质量指南》
《走进搜索引擎》
《这就是搜索引擎》
ThoughtWorker 技术博客与SEO

什么是SEO

搜索基本上算是上网的必备技能了。有大佬说写好代码需要两个软技能，一个是科学上网，一个就是科学搜索，当然这是题外话。

搜索引擎优化（Search Engine Optimization，简称SEO）指的是利用搜索引擎的搜索规则来提高网站在搜索结果中的排名。排名靠前的网站被用户访问的概率会大很多。

我最常用的两个搜索引擎是百度和谷歌，前者用来搜索生活中的问题，比如地图、公交啥的；后者用来解决工作中遇见的编程问题。

一般来讲，我们查询搜索结果时只会浏览第一页的前几条，如果找到了需要的内容，后面的结果根本不会去看。作为用户这是理所应当的，但作为站长或者有业务需求的人来说，都希望用户能够访问自己的站点。

整个SEO的关键就是围绕着如何提高网站在搜索引擎结果中的排名进行的。针对国内网站来讲，一般着重考虑的是百度排名。

虽然一般会有专人负责SEO优化工作，但处理手段往往需要前端甚至后端的配合。因此，作为一个前端开发者，还是有必要掌握一些基本的姿势。

优化思路

在协助SEO专员工作的时候，主要从三个方面进行处理：内部优化、前端代码优化和外部优化。

内部优化

内部优化主要是针对网站内容和结构的优化。

TDK优化

TDK是SEO中最基础也是最重要的部分，指的是标题（Title）、描述（Description）和关键词（Keywords）。

html

<!DOCTYPE html>
<html>
<head>
  <title>豆腐阅读 - 免费在线小说阅读网站</title>
  <meta name="keywords" content="小说,在线阅读,免费小说,豆腐阅读">
  <meta name="description" content="豆腐阅读提供海量免费小说在线阅读，包括玄幻、都市、言情等各类热门小说。">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

需要注意的几点：

标题是被收录的一个很重要的因素，可以在标题中嵌入关键字，但不要堆砌
描述会显示在搜索结果中，要写得吸引人，同时包含关键词
关键词虽然现在权重降低了，但还是建议填写，3-5个为宜

在项目中，我们会根据不同页面动态设置TDK。比如小说详情页：

javascript

// 动态设置页面TDK
function setPageMeta(novel) {
  document.title = `${novel.name} - ${novel.author} - 豆腐阅读`
  
  const keywords = document.querySelector('meta[name="keywords"]')
  keywords.content = `${novel.name},${novel.author},${novel.category},在线阅读`
  
  const description = document.querySelector('meta[name="description"]')
  description.content = `${novel.name}是${novel.author}创作的${novel.category}小说，${novel.intro.slice(0, 100)}...`
}

内容优化

内容是SEO的核心，搜索引擎喜欢原创、高质量的内容。

关键词密度：在内容中适当增加关键词，但不要刻意堆砌，一般控制在2%-8%
更新频率：保持网站内容的更新，搜索引擎会更频繁地抓取
内容质量：提供有价值的内容，用户停留时间长、跳出率低，搜索引擎会认为这是优质内容

URL优化

URL的结构也会影响SEO效果。

❌ 不好的URL
https://www.example.com/novel?id=1234&type=xuanhuan

✅ 好的URL
https://www.example.com/novel/xuanhuan/1234
https://www.example.com/novel-1234

优化建议：

使用语义化的URL，让用户和搜索引擎都能理解
URL层级不要太深，一般3-4层为宜
可以在URL中包含关键词
使用连字符-而不是下划线_分隔单词

在项目中，我们把URL从/novel/1234调整为了/novel-1234，这是SEO专员给的建议。

robots.txt

robots.txt文件告诉搜索引擎哪些页面可以抓取，哪些不能抓取。

# robots.txt
User-agent: *
Disallow: /admin/
Disallow: /api/
Disallow: /user/
Allow: /novel/
Allow: /author/

Sitemap: https://www.example.com/sitemap.xml

这个文件放在网站根目录，搜索引擎会首先读取它。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/</loc>
    <lastmod>2018-09-28</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.example.com/novel-1234</loc>
    <lastmod>2018-09-27</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

可以使用工具自动生成sitemap，然后提交给搜索引擎。

前端代码优化

前端代码的质量直接影响搜索引擎的抓取效果。

语义化标签

使用语义化的HTML标签，让搜索引擎更容易理解页面结构。

html

<!-- ❌ 不好的做法 -->
<div class="header">
  <div class="title">文章标题</div>
  <div class="content">文章内容...</div>
</div>

<!-- ✅ 好的做法 -->
<article>
  <header>
    <h1>文章标题</h1>
  </header>
  <section>
    <p>文章内容...</p>
  </section>
</article>

常用的语义化标签：

<header>、<footer>、<nav>、<aside>
<article>、<section>
<h1>-<h6>标题标签要合理使用，一个页面只有一个<h1>

图片优化

图片也是SEO的重要部分。

html

<!-- 添加 alt 和 title 属性 -->
<img src="/images/novel-cover.jpg" 
     alt="玄幻小说《斗破苍穹》封面" 
     title="斗破苍穹 - 天蚕土豆">

alt属性在图片无法显示时展示，也会被搜索引擎读取
title属性在鼠标悬停时显示
图片文件名也可以包含关键词，如doupo-cangqiong-cover.jpg

链接优化

合理使用链接可以提升页面权重。

html

<!-- 内部链接 -->
<a href="/novel-1234" title="查看小说详情">斗破苍穹</a>

<!-- 外部链接使用 nofollow -->
<a href="https://external-site.com" rel="nofollow">外部链接</a>

<!-- 重要链接 -->
<a href="/hot-novels" title="热门小说推荐">热门推荐</a>

内部链接帮助搜索引擎理解网站结构
外部链接使用rel="nofollow"避免权重流失
链接的锚文本要有意义，包含关键词

页面结构优化

保持页面结构简洁，重要内容放在前面。

html

<body>
  <!-- 重要内容放在前面 -->
  <header>
    <h1>网站标题</h1>
    <nav>导航菜单</nav>
  </header>
  
  <main>
    <!-- 主要内容 -->
    <article>
      <h2>文章标题</h2>
      <p>文章内容...</p>
    </article>
  </main>
  
  <!-- 次要内容放在后面 -->
  <aside>
    侧边栏内容
  </aside>
  
  <footer>
    页脚信息
  </footer>
</body>

减少页面嵌套层级
避免使用过多的<div>和<span>
重要内容不要用JavaScript动态生成

导航和面包屑

提供清晰的导航结构。

html

<!-- 面包屑导航 -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/">首页</a></li>
    <li><a href="/novel">小说</a></li>
    <li><a href="/novel/xuanhuan">玄幻</a></li>
    <li class="active">斗破苍穹</li>
  </ol>
</nav>

面包屑导航不仅方便用户，也帮助搜索引擎理解页面层级关系。

性能优化

页面加载速度也是SEO的重要因素。

压缩CSS、JavaScript文件
优化图片大小
使用CDN加速
减少HTTP请求
启用浏览器缓存

html

<!-- 压缩后的CSS -->
<link rel="stylesheet" href="/css/main.min.css">

<!-- 图片懒加载 -->
<img data-src="/images/cover.jpg" class="lazyload" alt="封面">

Open Graph Protocol

如果你的内容会被分享到社交媒体，可以使用OG标签。

html

<head>
  <meta property="og:title" content="斗xx苍穹">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://www.example.com/novel-1234">
  <meta property="og:image" content="https://www.example.com/images/cover.jpg">
  <meta property="og:description" content="三十年河东，三十年河西，莫欺少年穷...">
  <meta property="og:site_name" content="豆腐阅读">
</head>

Open Graph Protocol是Facebook在2010年F8会议上公布的一套开放内容协议，可以让网页成为一个"富媒体对象"。使用了OG标签后，你的内容在社交媒体上分享时会展示得更好看，包括标题、描述、图片等信息都会被正确提取。

目前这种协议被Facebook、Twitter、微信等社交平台广泛采用。

外部优化

外部优化主要是增加网站的外部链接，提高网站权重。

参考：网站怎样增加高质量外链？

这里需要理清三个概念：友链、外链和反链。

反链：即反向链接，指其他网页A链接到目标网页B的链接，无论是否同源，A页面上的这个链接对于B来讲都是反链，通常用于内部页面优化，提高网站的权重和排名
外链：指外部网站链接到我们网站的链接，外链越多，爬虫越容易进入我们的网站。这是一个非常重要的概念，直接影响相关性、收录及权重等指标
友链：与其他网站合作互换链接，可以简单理解为增加外链的一种方式，高质量友链可以带来很大的流量

增加外链的方法：

在其他平台发布文章，带上自己网站的链接
与相关网站交换友情链接
在论坛、博客等地方留下有价值的评论和链接
创作优质内容，让别人主动引用

需要注意的是，外链的质量比数量更重要。一个高权重网站的链接，比十个低质量网站的链接更有价值。

单页应用的SEO

前面提到的所有SEO方案，都是围绕着"网页内容能够被搜索引擎抓取"展开的。这正是单页应用SEO的最大问题：页面上的初始数据是空白的！

问题所在

单页应用为了提高用户体验，数据都是异步请求，然后使用JavaScript进行渲染的。

html

<!-- 单页应用的初始HTML -->
<!DOCTYPE html>
<html>
<head>
  <title>我的网站</title>
</head>
<body>
  <div id="app"></div>
  <script src="/js/app.js"></script>
</body>
</html>

搜索引擎爬虫抓取到的就是这样一个空白页面，根本看不到任何有价值的内容。虽然现在Google等搜索引擎已经支持执行JavaScript，但效果还是不如直接返回HTML。

此外，爬虫基本上不会访问URL片段标识符（#）后面的资源，这对于使用Hash路由的单页应用来说是个大问题。

解决方案

SSR（服务端渲染）

最彻底的解决方案就是服务端渲染，在服务器上运行JavaScript，生成完整的HTML返回给客户端。

javascript

// 使用 Vue SSR
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const app = new Vue({
  data: {
    title: '我的网站',
    content: '这是内容'
  },
  template: `
    <div>
      <h1>{{ title }}</h1>
      <p>{{ content }}</p>
    </div>
  `
})

renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // 输出完整的HTML
})

我在项目中尝试实现了Vue的SSR，效果还是比较明显的，搜索引擎能够正确抓取到页面内容，缺点是需要启node服务器，不像直接返回html那样简单。

预渲染

如果不想搞SSR那么复杂，可以使用预渲染。在构建时生成静态HTML文件。

javascript

// 使用 prerender-spa-plugin
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      routes: ['/', '/about', '/contact']
    })
  ]
}

预渲染适合页面数量不多的网站，如果页面太多，构建时间会很长。

History模式

如果使用Vue Router或React Router，建议使用History模式而不是Hash模式。

javascript

// Vue Router
const router = new VueRouter({
  mode: 'history', // 使用 history 模式
  routes: [...]
})

History模式的URL看起来更友好，也更利于SEO。

小结

SEO是增加站点访问流量的一个十分重要的方案。作为前端开发者，我们需要掌握：

TDK优化：合理设置标题、描述和关键词
代码优化：使用语义化标签、优化图片和链接、提升页面性能
内容优化：提供高质量的原创内容，保持更新频率
外链建设：增加高质量的外部链接
单页应用：使用SSR或预渲染解决SEO问题

SEO是一个长期的过程，需要持续优化和维护。但只要掌握了基本的方法，就能让网站在搜索引擎中获得更好的排名，带来更多的流量。

最后，虽然SEO很重要，但内容质量才是根本。再好的SEO技巧，也比不上真正有价值的内容。

#SEO #前端优化

你要请我喝一杯奶茶？

本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。

SEO初体验

什么是SEO ​

优化思路 ​

内部优化 ​

TDK优化 ​

内容优化 ​

URL优化 ​

robots.txt ​

网站地图 ​

前端代码优化 ​

语义化标签 ​

图片优化 ​

链接优化 ​

页面结构优化 ​

导航和面包屑 ​

性能优化 ​

Open Graph Protocol ​

外部优化 ​

单页应用的SEO ​

问题所在 ​

解决方案 ​

SSR（服务端渲染） ​

预渲染 ​

History模式 ​

小结 ​

你要请我喝一杯奶茶？

什么是SEO

优化思路

内部优化

TDK优化

内容优化

URL优化

robots.txt

网站地图

前端代码优化

语义化标签

图片优化

链接优化

页面结构优化

导航和面包屑

性能优化

Open Graph Protocol

外部优化

单页应用的SEO

问题所在

解决方案

SSR（服务端渲染）

预渲染

History模式

小结