【HTML】CSR、SSR、SEO

SSR 和 CSR

SSR （Server-Side Rendering）服务端渲染，请求数据和拼装都在服务端完成，相当于在服务端直接完成html。

而 Vue,react 等框架，是在客户端完成渲染拼接的，属于CSR（Client-Side Rendering）客户端渲染。

CSR 和 SSR 区别

1. 页面加载方式：

• CSR：服务器返回一个初始的 HTML 页面，然后浏览器下载并执行 JavaScript 文件，JavaScript 负责动态生成并更新页面内容。这意味着初始页面加载时，内容较少，页面结构和样式可能存在一定的延迟。
• SSR：服务器在返回给浏览器之前，会预先在服务器端生成完整的 HTML 页面，包含了初始的页面内容。浏览器接收到的是已经渲染好的 HTML 页面，因此初始加载的速度较快。因此适用于首屏优化。

2. 内容生成和渲染：

• CSR：页面的内容生成和渲染是由客户端的 JavaScript 脚本负责的。当数据变化时，JavaScript 会重新生成并更新 DOM，从而实现内容的动态变化。这种方式使得前端开发更加灵活，可以创建复杂的交互和动画效果。
• SSR：在 SSR 中，服务器在渲染页面时会执行应用程序的代码，并生成最终的 HTML 页面。这意味着页面的初始内容是由服务器生成的，对于一些静态或少变的内容，可以提供更好的首次加载性能。

3. 用户交互和体验：

• CSR：在 CSR 中，一旦初始页面加载完成，后续的用户交互通常是通过 AJAX 或 WebSocket 与服务器进行数据交互，然后通过 JavaScript 更新页面内容。这种方式可以提供更快的页面切换和响应速度，但对于搜索引擎爬虫和 SEO（搜索引擎优化）来说，可能需要一些额外的处理。
• SSR：在 SSR 中，由于页面的初始内容是由服务器生成的，因此用户交互可以直接在服务器上执行，然后服务器返回更新后的页面。这样可以提供更好的首次加载性能和对搜索引擎友好的内容。

SEO

SEO （Search Engine Optimization，搜索引擎优化）

CSR应用对SEO并不是很友好。因为在首次加载的时候获取HTML 信息较少，主要都是依靠js进行动态获取数据。搜索引擎爬虫可能无法获取完整的页面内容。

SSR 在服务器端预先生成完整的 HTML 页面，搜索引擎爬虫可以直接获取到完整的页面内容。这有助于搜索引擎正确理解和评估页面的内容。

SEO 主要根据 TDK（title，description，keywords）。这些都是可以被爬虫爬取的。此外，语义化标签可有助于爬虫爬取。

CSR 应用：例如 后台管理系统，大屏可视化。

SSR 应用：例如 新闻网站 ，博客网站，电子商务，门户网站

SEO 内部优化：

1. 合理的 Title、Description 和 Keywords（TDK）：

   • <title> 标签用于定义网页的标题，应描述页面内容并包含关键字。
   • <meta name="description"> 标签用于定义网页的描述，应该简洁明了地概括页面内容。
   • <meta name="keywords"> 标签用于定义网页的关键字，包含与页面内容相关的关键字，但不要过度堆砌。

2. 语义化的 HTML 代码：

   • 使用语义化标签（如 <header>、<footer>、<nav>、<article>、<section> 等）描述网页结构，有助于搜索引擎理解页面内容。
   • 使用恰当的标签描述内容，如 <h1> 到 <h6> 标签表示标题级别，<p> 标签表示段落，<ul>、<ol> 标签表示列表等。

3. 符合 W3C 标准：

   • 编写符合 HTML 和 CSS 标准的代码，确保网页在不同浏览器中的兼容性和稳定性。
   • 使用 W3C 的验证工具检查网页代码是否符合标准，如 HTML Validator 和 CSS Validator。

4. 非装饰性图片必须加 alt：

   • 对于网页中的图片，尤其是非装饰性图片（如内容图像），应该为其添加 alt 属性，描述图片内容，有助于搜索引擎理解图像内容和网页主题。

5. 谨慎使用 display: none：

   • 隐藏内容的方式不应该是通过 display: none;，因为搜索引擎可能会将这些内容视为不重要而忽略。可以使用 CSS 技术如 visibility: hidden; 、使用 z-index 或者 JavaScript 控制元素的显示和隐藏。

6. 重要内容页面代码放在最前：

   • 将想要被收录的页面能够顺着主页爬过去（缩短网站层级）。重要的内容放在 HTML 代码的最前面，包括关键词、标题等，这有助于搜索引擎更快地发现页面的关键信息。

7. 少用 iframe：

   • 避免过度使用 <iframe> 元素，因为搜索引擎可能无法正确解析其中的内容（不会抓取里面的内容），从而降低页面的搜索引擎优化效果。

8. 主动给搜索引擎推送：

   • sitemap.xml （记录网站结构） / 单个链接
   • 动态推送 sitemap

9. 使用SSR / SSG：

   • Nuxt / Next
   • SSG 静态页面生成，适合数据量少，内容固定的情况

SEO 外部优化：

1. 外部链接（Backlinks）：

   • 获取高质量的外部链接（即其他网站链接到你的网站），这有助于提升网站的权重和排名。
   • 友情链接。可以通过与其他网站合作、发布高质量内容、参与行业论坛和社交媒体等方式来获取外部链接。

2. 社交媒体分享：

   • 提升网站的社交媒体曝光度，增加网站在社交平台上的分享和转发量，有助于提高网站的流量和排名。

3. 网站速度优化：

   • 提高网站的加载速度，可以通过优化图片、减少 HTTP 请求、使用浏览器缓存、使用 CDN（内容分发网络）等方式来优化网站速度。

4. 用户体验优化：

   • 提升网站的用户体验，包括页面导航清晰、内容易于阅读、页面响应快等方面，可以提高用户满意度，从而提升网站在搜索引擎中的排名。

5. 内容优化：

   • 提供高质量、原创的内容，满足用户需求，吸引更多的访问者。
   • 使用关键字合理地分布在内容中，但避免过度堆砌关键字，保持内容的自然性和可读性。

综上所述，通过内部优化和外部优化两个方面的工作，可以有效地提升网站在搜索引擎中的排名和曝光度，增加网站的流量和用户体验。