一、什么是 SEO？
SEO（Search Engine Optimization，搜索引擎优化） 是指通过一系列技术与内容策略，让网站在搜索引擎（如 Google、Bing、百度）自然搜索结果中获得更高的排名、更多的流量和更好的展示。SEO 不等于“欺骗搜索引擎”，而是让网站对用户和搜索引擎都更清晰、更有价值。
二、 为什么要优化SEO？
当用户在搜索引擎搜索手机或某一个产品时，排名优先的产品网站一般先被用户浏览，靠自然搜索获取流量也是提高产品知名度的手段之一，所以我们需要了解一定搜索引擎排名规则后，对我们的产品官网进行从内到外的调整，让网站提升尽量多的排名，获取更多的流量， 从而提升产品知名度，提高产品竞争力。
三、搜索引擎是如何工作的
主要分为三个核心步骤：爬行（Crawling），即使用网络爬虫（Spider）自动发现和收集互联网上的网页信息；索引（Indexing），对爬行收集到的信息进行分析、分类并存储到巨大的索引库中；以及排名（Ranking），当用户进行搜索时，搜索引擎根据数百种因素（如相关性、权威度等）对索引中的内容进行打分和排序，最后将最相关的结果呈现给用户。
四、作为前端，如何优化SEO
1. SSR服务端渲染
现在大部分项目都基于现代web框架vue和react的SPA应用，SPA的核心特点是通过JavaScript动态加载和重写当前页面，而不是像传统多页应用（MPA）那样在服务器端生成完整的HTML。因此，搜索引擎爬虫在初始抓取时只能看到一个空的HTML骨架，无法直接识别通过JavaScript生成的内容，而且爬虫的Javascript执行能力仍有一些限制，SPA在首次加载时可能需要下载大量的JavaScript代码，这可能导致较慢的加载时间，影响用户体验和搜索引擎排名。
SSR (服务器端渲染)通过在服务器上提前生成完整的HTML 内容，解决了客户端渲染（CSR）中搜索引擎爬虫只能看到空白页面的问题，从而提高了对搜索引擎的友好度，使得搜索引擎能更好地理解和索引页面内容，从而提升网站的SEO排名。
对于vue和react项目，相应的支持ssr的框架是更好的选择，比如Nuxt.js(Vue),Next.js(React)。
2. 准确的TDK描述
TDK = Title（标题） + Description（描述） + Keywords（关键词） 。
这是放在网页 <head> 里的三项最基本的元信息，搜索引擎和社交平台会读取它们来展示结果或生成卡片。以下是一个🌰，
<head>
<title>轻量办公椅 | 舒适扶手可调 | Acme家居</title>
<meta name="description" content="Acme 轻量办公椅：人体工学设计、可调扶手与高度、通风靠背，30天无理由退货。立刻查看优惠价与用户评价。">
<meta name="keywords" content="办公椅, 人体工学, 可调扶手, 办公家具">
<link rel="canonical" href="https://example.com/products/ergonomic-chair-xyz">
<!-- Open Graph（可选） -->
<meta property="og:title" content="轻量办公椅 — Acme 家居">
<meta property="og:description" content="人体工学、可调扶手，享受舒适办公。查看详情与促销。">
<meta property="og:image" content="https://example.com/images/chair-xyz-hero.jpg">
</head>
- title是网站的标题，搜索引擎会优先检索title信息
- description是对网站的简短描述，通常在搜索引擎结果页标题下方显示，应概括网页内容。
- keywords: 网页内容中的关键词汇，反映了页面主题和内容，每个关键字要有对应内容匹配。
注意：现代主流搜索引擎（如 Google、Bing、百度）普遍不把 meta keywords 作为排名信号，但在某些小型搜索或内部站点搜索里仍有用。重点应放在 Title 与 Description。
3.语义化标签
语义化的html代码和符合w3c标准是seo的关键要素之一。
语义化是指使用具有明确含义的html元素，搜索引擎在爬取网站时，也会更容易理解网站的内容以便进行收录，有助于搜索引擎理解网页内容，还能提高网页的可读性和可维护性。
代码示例：从 “div 汤” 到语义化重构
非语义（问题：难以被屏幕阅读器/爬虫理解）：
<div class="header">
<div class="logo">Logo</div>
<div class="menu">
<div class="item">Home</div>
<div class="item">Blog</div>
</div>
</div>
<div class="content">
<div class="post">
<div class="title">标题</div>
<div class="meta">作者 • 2025-09-16</div>
<div class="body">文章正文...</div>
</div>
</div>
语义化重构：
<header>
<div class="logo">Logo</div>
<nav aria-label="主导航">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/blog">博客</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>标题</h1>
<p class="meta">作者 • <time datetime="2025-09-16">2025-09-16</time></p>
<section>
<p>文章正文...</p>
</section>
</article>
</main>
<aside>
<!-- 相关文章 / 广告 -->
</aside>
<footer>
© 2025 公司名
</footer>
注意：图片必须加alt，链接必须加title。
4. 编写robots文件
robots.txt 是放在网站根目录（https://example.com/robots.txt）的一个文本文件，用来告诉爬虫（search engine crawlers）哪些路径可以抓取、哪些不可以抓取。它遵循 Robots Exclusion Protocol，是对爬虫的“礼貌性建议”（大部分主流爬虫会遵守），不是用于安全保护（敏感信息不应仅靠它隐藏）。编写robots.txt,可以告诉爬虫可以被抓取和不需要抓取的内容，让搜索引擎关注需要索引的内容，提高网站收录效率。
5.https
启用 HTTPS 是必须的：它本身是一个（轻量但真实的）排名信号，同时能改善用户信任、浏览器安全提示、页面渲染能力和性能机会；配置错误或证书问题则会立刻伤及抓取与索引。
Google 已把使用 HTTPS 作为搜索排名的轻量信号之一——虽然权重不大，但在竞争接近的页面间可以成为加分项。
Chrome 等浏览器会把 HTTP 页面标注为 “Not secure”，这会降低用户信任、提高跳出率，进而影响用户行为指标（点击率 / 停留 / 转化），这些间接信号会影响搜索表现。
6.内部和外部链接
-
内部链接（Internal link） ：同一域名（或同一站点/子目录）内部不同页面之间的超链接。
例：https://example.com/blog/post1→https://example.com/blog/post2。 -
外部链接（External link / outbound link / backlinks） ：指向站外域名的链接（站外链接）或站外指向本站的链接（反向链接 / backlinks）。
- 出站（Outbound）指向外部网站的链接。
- 反向链接（Backlink）是外部站点指向你站点的链接（对 SEO 很重要）。
7.sitmap.xml
除了上述技术，确保你的SPA具有一个详细的sitemap.xml文件也是一个好方法，它能帮助搜索引擎发现你的所有重要页面。
sitemap（站点地图） 是一个（通常为 XML）文件，列出你站点上可被爬取的 URL 以及可选的元数据（lastmod、changefreq、priority 等），用于帮助搜索引擎更智能、更高效地抓取你的网站。对大型站点、深层分页、JS 渲染页面、图片/视频内容尤为重要。
一个最小可用的 XML sitemap 示例:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2025-09-10</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://example.com/blog/seo-guide</loc>
<lastmod>2025-09-15</lastmod>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
