likes
comments
collection
share

浅谈SEO

作者站长头像
站长
· 阅读数 55

Hello, 各位勇敢的小伙伴, 大家好, 我是你们的嘴强王者小五, 身体健康, 脑子没病.

本人有丰富的脱发技巧, 能让你一跃成为资深大咖.

一看就会一写就废是本人的主旨, 菜到抠脚是本人的特点, 卑微中透着一丝丝刚强, 傻人有傻福是对我最大的安慰.

欢迎来到 小五 的 随笔系列 之 浅谈SEO.

前言

👉 什么是SEO?

为了提升网页在搜索引擎自然搜索结果中的收录数量及排序位置做的优化行为

👉 搜索引擎工作原理

由名为 ”搜索引擎蜘蛛“ 的程序在互联网中爬行，从一个链接到另一个链接，依次分析存储其关键词，形成一个庞大的数据库；该数据库每个关键词对应多个网址，用户搜索关键词时，显示对应网址；

值得注意的是，”搜索引擎蜘蛛“ 会舍弃其识别出的重复信息或垃圾信息，并且绝大多数都只会爬网页可见信息，不会跟踪解析js等文件；

浅谈SEO

渲染机制

👉 客户端渲染

<html>
  <head>
    <title>我是客户端渲染的页面</title>
  </head>
  <body>
    <div id='root'></div>
    <script src='index.js'></script>
  </body>
</html>

根节点下是什么内容，我们不得而知，只有浏览器将 index.js 跑完后才会知晓，这就是典型的客户端渲染。

其首次加载速度慢（加载并执 js），且不利于 SEO（搜索引擎不会解析 js 内容）

👉 服务端渲染

// VDom
import React from 'react';

const VDom = () => {
  return <div>我是一个被渲染为真实DOM的虚拟DOM</div>
}

export default VDom;

// 渲染
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import VDom from './VDom';

const app = express();
const RDom = renderToString(<VDom />); // 将虚拟DOM转换为真实DOM
const Page = `
  <html>
    <head>
      <title>test</title>
    </head>
    <body>
      ${RDom}
    </body>
  </html>
`;
            
app.get('/index', function(req, res) {
  res.send(Page);
});

const server = app.listen(3000);

客户端接收到的是一个由服务端处理后的完整的 HTML

其首屏加载速度快且利于SEO；但本该浏览器做的事情分担给服务端去做，会占用大量服务器资源；

👉 总结

服务端渲染多用于如新闻、电商等需渲染接口数据的场景；

其它 SEO 需求则可采用客户端渲染：

  1. SSG预加载 -> 如 about us 等页面，其修改频率低且逻辑少，应当作为静态资源进行强缓存或做预加载（webpack插件 prerender-spa-plugin 可实现）；

  2. index.html 作为首页，其本身即可做 SEO；

编码

👉 title

建议使用标题加描述的形式，如 标题-描述

👉 keywords

从重要到不重要顺次排列，数量不要过多，10个以里即可

👉 description

高度概括网页内容

👉 语义化

尽量让代码语义化，在正确的标签做正确的事

👉 目录层次

尽量让 ”搜索引擎蜘蛛“ 跳转三次即可到达站内任意页面

👉 a标签

”搜索引擎蜘蛛“ 顺着链接依次爬取；故需要爬取的路由请勿使用逻辑跳转，而是采取a标签的形式进行跳转；

👉 h1

h1标签自带权重，每个页面仅可有一个h1标签

👉 alt

尽量对 img 标签加上 alt 描述

国际化方案

子域名

zh.example.com
en.example.com

动态路由

example.com/zh/
example.com/en/

👉 tips: 可通过 accept-language 判断浏览器语言做首页重定向（”搜索引擎蜘蛛“ 该值为空）

用 hreflang 将国际化版本告诉谷歌

Google 以此为依据向使用该语言搜索的用户提供特定语言的页面

格式：<link rel="alternate" hreflang="lang_code" href="url_of_page" />

lang_codeurl_of_page
语言 其中 x-default 用于设置默认值 采用 ISO 639-1 格式网址 使用完整URL eg: https://zh.example.com/user

也可在站点地图中设置该link标签

站点地图 - sitemap

站点地图可帮助搜索引擎发现网站上的网址，一般适用于网站规模较大、内容页间互不关联或缺少有效链接等场景

👉 以下均采用xml格式

标签说明
urlset命名空间
url标记开始结束
loc页面完整URL
lastmod最新更新时间 格式：yyyy-mm-dd
changefreq更新频率 always、hourly、daily、weekly、monthly、yearly、never
priority权重 >= 0 && <= 1

新建 sitemap.xml，将该网址写入 robots.txt 中

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/user</loc>
      <lastmod>2022-09-04</lastmod>
    </url>
  </urlset>

多语言版

标签说明
sitemapindex文件头尾的父标记
sitemap每个站点地图的父标记
<?xml version="1.0" encoding="UTF-8"?>
  <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <sitemap>
      <loc>https://www.example.com/sitemap_zh.xml</loc>
    </sitemap>
    <sitemap>
      <loc>https://www.example.com/sitemap_en.xml</loc>
    </sitemap>
  </sitemapindex>

sitemap_zh.xml

<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
      <loc>https://www.example.com/zh/</loc>
      <changefreq>always</changefreq>
      <priority>1.0</priority>
    </url>
    <url>
      <loc>https://www.example.com/zh/user</loc>
      <changefreq>weekly</changefreq>
      <priority>0.8</priority>
    </url>
  </urlset>

使用 hreflang

<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
      <loc>https://www.example.com/zh/</loc>
      <xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/en/" />
      <xhtml:link rel="alternate" hreflang="zh" href="https://www.example.com/zh/" />
    </url>
    <url>
      <loc>https://www.example.com/zh/user</loc>
      <xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/en/user" />
      <xhtml:link rel="alternate" hreflang="zh" href="https://www.example.com/zh/user" />
    </url>
  </urlset>

robots.txt

用于告知 ”搜索引擎蜘蛛“ 什么内容能爬，什么内容不能爬以及 sitemap.xml 位置信息

其应挂载于网站的根目录下：https://www.example.com/robots.txt

字段说明
User-agent搜索引擎UA
allow允许访问的目录
disallow不允许访问的目录
Sitemap站点地图地址

格式如下：

User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /
Disallow: /error/

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

搜索引擎UA

通过配置nginx，让不同 ”搜索引擎蜘蛛“ 做不同事情

server {
  listen 80;
  server_name www.deeruby.com;

  location / {
    if ($http_user_agent ~* "baiduspider|360Spider|Sogou Spider") {
        # do something (如：这些引擎跳转中文路由)
    }
  }
}

规范网址

用于对几个完全相同或高度相似的页面指定唯一URL，避免权重被分散进而导致排名降低

/** 内容相同的三个网址 */
https://www.example.com
https://example.com
https://test.example.com

通过设置 rel=canonical 可指定规范化网址

<link rel="canonical" href="https://example.com" />

外链

更多优质的外链可显著增加网站排名

浅谈SEO

转载自:https://juejin.cn/post/7139676355746086949
评论
请登录