前端面试题宝典

面试官：讲一下SEO，你做过哪些优化

简介：你对SEO做过哪些优化呢？
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~

哈喽大家好，今天的文章有uncle13提供。SEO是一系列技术和策略。是为了提高网站在搜索引擎结果页面（SERP）中的排名，从而吸引更多的有机流量。具体要怎么做，来看看今天的分享吧。

SEO（Search Engine Optimization）代表“搜寻引擎最佳化”或“搜寻引擎优化”，它是一种通过优化网站内容、结构、链接和其他相关因素来提高网站在搜索引擎自然排名中的位置的过程。SEO的主要目的是增加网站的可见性，从而吸引更多的访问者通过搜索引擎的搜索结果来访问网站。

本文将以三个层面展开：

  1. TDK优化
  2. 网站质量
  3. SEO手段

一、TDK优化

TDK优化是网站SEO（搜索引擎优化）中的一个重要环节，它指的是对网站的标题（Title）、描述（Description）和关键词（Keywords）进行优化，以提升网站在搜索引擎中的排名和点击率。

  • T（Title）：即网页的标题，是搜索引擎结果页面（SERP）中显示的最重要元素之一。它告诉用户和搜索引擎该页面的主要内容是什么。
  • D（Description）：即网页的描述，是对网页内容的简短总结，虽然不直接影响排名，但会影响用户的点击率。
  • K（Keywords）：即网页的关键词，虽然现代搜索引擎对关键词标签的重视程度降低，但在页面内容中合理使用相关关键词仍然很重要。

TDK优化的具体方法

1. 标题（Title）优化
  • 独特性：确保每个网页的标题都是独一无二的，能够准确反映页面的主题。
  • 关键词布局：在标题中合理布局关键词，但不要过度堆砌，以免影响用户体验和搜索引擎的判断。
  • 字符限制：一般来说，标题的字符数应控制在60~70个字符之间（包括空格），以保证在SERP中完整显示。
  • 吸引力：编写具有吸引力的标题，能够激发用户的点击欲望。
2. 描述（Description）优化
  • 相关性：描述应与网页内容高度相关，准确概括页面的主要内容。
  • 关键词融入：在描述中自然融入关键词，以提高相关性。
  • 字符限制：描述的字符数一般控制在150~160个字符之间，以保证在SERP中完整显示。
  • 吸引点击：编写能够吸引用户点击的描述，包括强调页面的独特价值或优惠信息等。
3. 关键词（Keywords）优化
  • 选择与布局：选择与网页内容相关的关键词，并在页面内容中自然融入。注意关键词的密度和分布，避免过度优化。
  • 多样性：使用多样化的关键词组合，以覆盖更多的搜索意图。
  • 分析工具：利用关键词分析工具（如Google Keyword Planner、百度指数等）来了解关键词的搜索量和竞争程度，从而做出更合理的选择。
注意事项：
  • 避免重复：确保每个页面的TDK都是独一无二的，避免重复或过于相似的TDK。
  • 稳定性：一旦确定了TDK，就不要轻易修改，以免影响网站的稳定性和搜索引擎的信任度。
  • 持续优化：TDK优化是一个持续的过程，需要定期检查和调整以适应搜索引擎算法的变化和用户需求的变化。

二、网站质量

1、确保页面性能

网站性能直接关系到用户体验和搜索引擎的评价。一个性能卓越的网站能够迅速响应用户请求，减少加载时间，提高用户留存率和转化率。以下是一些提升网站性能的关键措施：

  1. 优化图片和文件大小：使用适当的图片格式和压缩工具来减小文件大小，同时保持图片的清晰度。
  2. 利用缓存技术：通过浏览器缓存、CDN（内容分发网络）和服务器缓存等技术减少数据加载时间。
  3. 代码优化：减少不必要的代码和注释，合并和压缩CSS、JavaScript文件，使用异步加载技术来避免阻塞页面渲染。
  4. 服务器优化：选择合适的服务器配置，优化数据库查询，减少服务器响应时间。
  5. 监测和调优：使用工具如Google PageSpeed Insights、GTmetrix等来监测网站性能，并根据建议进行调优。
2、HTML语义化

HTML语义化是提升网站可读性和SEO效果的重要手段。通过选择合适的标签来表达内容的意义和结构，可以帮助浏览器和搜索引擎更好地理解网页内容。

2-1. 合理使用标题标签（h1-h6）

h1标签应包含网页的主标题，它是页面内容的核心概括，对于搜索引擎和用户来说都至关重要。h2-h6标签则用于表示次级标题和细分结构，帮助构建清晰的内容层次。确保每个页面只有一个h1标签，且内容应与页面主题紧密相关。

2-2. 强调标签（strong、em）

使用<strong>和<em>标签来强调文本内容。这两个标签具有语义上的强调作用，其中<strong>表示强烈的重要性，而<em>则表示强调或语气上的变化。与单纯的样式标签（如<b>和<i>）相比，它们更有价值，因为它们向搜索引擎提供了关于文本重要性的额外信息。

2-3. 列表标签（ul、ol、li）

在列举信息时，应使用<ul>（无序列表）、<ol>（有序列表）和<li>（列表项）标签。这些标签不仅提高了内容的可读性，还有助于搜索引擎理解页面的内容结构。通过使用列表标签，可以清晰地展示信息的层次和顺序，从而提升用户体验和SEO效果。

2-4. 图片标签（img）

为所有图片添加alt属性是非常重要的。alt属性提供了图片内容的文字描述，这对于搜索引擎理解图片内容至关重要。当图片无法加载或用户使用屏幕阅读器时，alt属性还可以提供替代信息。因此，在插入图片时，务必添加准确、简洁的alt属性描述。

2-5. 其他语义化标签

HTML5引入了许多新的语义化标签，如<nav>（导航）、<aside>（侧边栏）、<header>（页眉）、<footer>（页脚）、<article>（文章内容）和<section>（章节）等。这些标签能够清晰地划分网页结构，使内容更加有条理和易于理解。同时，它们也有助于提高搜索引擎的抓取效率，因为搜索引擎可以更容易地识别和理解页面的各个部分。因此，在开发过程中，应充分利用这些语义化标签来优化网页结构。

3、其他注意点
  1. 避免使用JS输出重要内容：由于搜索引擎爬虫可能无法很好地解析和执行JavaScript代码，因此应避免将重要内容完全放在JS中输出。重要内容应直接以HTML形式呈现。
  2. 慎用iframe：iframe虽然可以方便地嵌入外部内容，但搜索引擎往往难以完全抓取iframe内的内容。因此，除非必要，否则应尽量避免使用iframe来呈现重要内容。
  3. 保证文字可访问性：对于需要截取的文字或特殊效果，应优先考虑使用CSS来实现，以确保文字内容能够完整呈现给搜索引擎和用户。

三、SEO手段

1、搜索引擎站点提交

向各大搜索引擎提交网站收录信息是提升网站在搜索引擎中可见性和排名的一个有效方法。以下是几个主要的搜索引擎站点提交平台及其提交方式的概述：

  1. Google Search Console（Google 站长工具）：

    • Google Search Console 是 Google 提供的一项免费服务，用于监控和管理网站的搜索引擎表现。
    • 提交方式：在 Google Search Console 中，通过“URL 提交”功能直接提交单个页面或批量提交 sitemap（网站地图）。此外，还可以通过“请求索引”功能请求 Google 重新抓取并索引你的网站。

  2. Bing Webmaster Tools（必应站长工具）：

    • 类似于 Google Search Console，Bing Webmaster Tools 是微软提供的服务，用于帮助网站管理员监控其网站在 Bing 搜索引擎中的表现。
    • 提交方式：在 Bing Webmaster Tools 中，通过“提交 URL”功能提交单个页面或 sitemap，以及设置自动提交功能，以便 Bing 能够及时获取你的网站更新。

  3. Baidu Sitemap（百度站长平台）：

    • 百度站长平台是中国最大的搜索引擎百度提供的服务，旨在帮助网站管理员更好地管理网站在百度中的收录和排名。
    • 提交方式：在百度站长平台中，通过“提交网站”功能提交网站的基本信息，并通过“Sitemap”功能提交你的网站地图。此外，还可以设置自动推送和主动推送功能，以加快百度爬虫对网站内容的抓取速度。

除了上述主要的搜索引擎外，还有其他一些地区和行业的搜索引擎也提供了类似的站点提交功能。向这些搜索引擎提交你的网站可以进一步扩大网站受众范围。

在提交网站时，请确保网站内容质量高、结构合理，并且已经设置了正确的 robots.txt 文件和 meta 标签，以便搜索引擎能够正确地抓取和索引你的网站内容。此外，定期更新网站内容并优化网站结构也是提高网站在搜索引擎中排名的关键。

2、站点地图

站点地图是一个网站的全部URL列表，同时包含每个网址的其他元数据，如更新时间、更改频率以及相对于网站上其他网址的重要程度。它帮助搜索引擎蜘蛛快速找到网站的所有链接，从而更全面地获取网站信息。站点地图通常有两种格式：

  • sitemap.xml：这是大多数搜索引擎使用的格式，用于提交网站网址。
  • sitemap.html：这是一种可直接放在网站上的页面，用于用户访问或搜索引擎快速找到全站链接。
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://www.example.com/</loc>
    <lastmod>2024-07-03T23:00:00+08:00</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>http://www.example.com/about.html</loc>
    <lastmod>2024-06-01T12:00:00+08:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>http://www.example.com/products/product1.html</loc>
    <lastmod>2024-05-15T15:30:00+08:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.6</priority>
  </url>
  <!-- 更多URL元素可以继续添加 -->
</urlset>

  1. XML声明：<?xml version="1.0" encoding="UTF-8"?> 声明了这是一个XML文档，并使用UTF-8编码。

  2. 根元素：<urlset> 是站点地图的根元素，它包含了所有URL的列表。这个元素有一个命名空间属性 xmlns，它指定了站点地图遵循的XML架构（Schema）。

  3. URL元素：每个 <url> 元素代表网站上的一个页面。它包含以下子元素：

    • **<loc>**：页面的URL。这是必填项，必须包含完整的网址，包括协议（如http://或https://）。
    • **<lastmod>**：页面最后修改的时间。这是可选的，但建议提供以帮助搜索引擎了解页面的更新频率。时间格式应为ISO 8601格式（如示例中所示）。
    • **<changefreq>**：页面内容预计更改的频率。这是可选的，但可以帮助搜索引擎优化其抓取策略。可选值包括always、hourly、daily、weekly、monthly、yearly和never。
    • **<priority>**：页面相对于网站上其他页面的重要性。这也是可选的，值范围从0.0到1.0，其中1.0表示最高优先级。
注意事项：
  • 站点地图文件应放置在网站的根目录下，或者通过robots.txt文件指定其位置。
  • XML站点地图文件应小于10MB且包含的URL不应超过5万个。如果网站很大，可能需要创建多个站点地图文件，并在根站点地图文件中使用 <sitemapindex> 元素来引用它们。
  • 定期更新站点地图以反映网站内容的最新变化。
3、robots.txt文件

robots.txt 是一个纯文本文件，通常位于网站的根目录下。该文件使用简单的文本格式来告诉对应的爬虫被允许的权限。当一个搜索引擎爬虫（也称为“蜘蛛”或“机器人”）访问一个网站时，它会首先检查该网站根目录下是否存在robots.txt文件，并根据文件中的内容来确定其访问范围。

主要作用：
  1. 控制爬虫访问：通过指定规则，网站管理员可以控制哪些页面或目录允许被搜索引擎爬虫访问，哪些应该被忽略。这有助于保护网站的隐私和安全，同时优化搜索引擎的索引效果。
  2. 节省服务器资源：通过禁止爬虫访问一些不必要的页面或大型文件（如图片、视频等），可以节省服务器的带宽和处理能力，提高网站的整体性能。
  3. 引导爬虫：robots.txt文件还可以包含网站地图（Sitemap）的链接，引导爬虫更全面地抓取网站内容。
文件内容：
  1. User-agent：用于指定该指令适用于哪个或哪些搜索引擎爬虫。例如，User-agent: * 表示适用于所有爬虫；User-agent: Googlebot 表示仅适用于谷歌爬虫。
  2. Disallow：用于指定禁止爬虫访问的页面或目录。例如，Disallow: /private/ 表示禁止爬虫访问 /private/ 目录下的所有页面。
  3. Allow（非标准但常用）：用于在 Disallow 规则下允许特定的页面或目录被访问。需要注意的是，并非所有搜索引擎都支持 Allow 指令，但谷歌等主流搜索引擎是支持的。

以下是一个简单的robots.txt文件示例：

User-agent: *
Disallow: /private/
Disallow: /admin/

User-agent: Googlebot
Allow: /images/
Disallow: /secret/

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

在这个示例中，所有爬虫都被禁止访问 /private/ 和 /admin/ 目录；而谷歌爬虫则被允许访问 /images/ 目录，但禁止访问 /secret/ 目录。此外，文件还指定了网站地图的位置，以便搜索引擎爬虫更全面地抓取网站内容。

注意事项：
  1. 文件名和位置：robots.txt文件应命名为小写（robots.txt），并放置在网站的根目录下。一些系统中的URL是大小写敏感的，因此确保文件名正确无误非常重要。
  2. 规则优先级：如果同一个 User-agent 下同时存在 Disallow 和 Allow 指令，Allow 指令的优先级更高。但是，如果某个目录或页面同时被多个 Disallow 指令所禁止，则这些指令将共同作用于该目录或页面。
  3. 非强制性：虽然robots.txt文件为网站和爬虫之间提供了一种协议机制，但它并不是强制性的。搜索引擎爬虫可以选择忽视robots.txt文件中的规则，尽管这通常被视为不道德的行为。
  4. 定期更新：随着网站内容的更新和变化，robots.txt文件也需要定期更新以反映这些变化。例如，如果某个目录或页面不再需要被爬虫访问，应及时在robots.txt文件中添加相应的 Disallow 指令。
4、内链与外链

内链和外链是网站优化和建设中两个重要的概念，它们在提升网站流量、排名、知名度和用户体验等方面发挥着不同的作用。

  1. 内链：内链是指在一个网站内部链接到另一个网页的链接，也称为内部链接。它是网站内部不同页面之间相互连接的方式，有助于用户更好地浏览和了解网站的内容，同时也对搜索引擎优化（SEO）有积极作用。
  2. 外链：外链是指从一个网站链接到另一个网站的链接，也称为反向链接或链接。它是从其他网站指向自己网站的链接，是一种从外部获取流量和链接的方式。外链的质量和数量对于网站的影响非常大，是提升网站权重和排名的重要因素之一。

无论是内链还是外链，在网站优化和建设中都扮演着重要的角色。内链有助于提升网站的用户体验和页面权重；外链则有助于从外部获取流量和链接，提高网站的曝光率、排名、知名度和信誉度。因此，在网站优化和建设过程中，需要合理使用内链和外链策略，以实现最佳效果。

5、Canonical URL（网址规范化）

Canonical URL，即网址规范化，也被称为Canonical Tag或标准链接，是一种HTML语法标签，主要用于指定搜索引擎在搜索结果（SERP）上应该呈现哪个版本的URL，以解决因URL格式不同而造成的重复内容问题。

作用：

  1. 指定SERP中要显示的网址：告诉搜索引擎哪个URL是原创、标准的，以便在搜索结果中优先展示。
  2. 整合重复内容、降低负面影响：对于多个内容相同但URL不同的页面，Canonical URL可以指定一个标准URL，从而降低其他重复URL的负面影响。
  3. 避免爬虫耗时检索重复网页：通过减少重复内容的检索，提高搜索引擎的检索效率。

场景：

  1. 电子商务网站中的产品页面：当同一产品因不同颜色、价格或规格而产生多个独立网址时，可以使用Canonical URL指定一个标准网址。
  2. 联合发布或抄袭的文章：当同一篇文章被发布在多个平台或版面下时，可以通过Canonical URL指定原始文章或主推文章的网址。
  3. 支持多种设备类型的网站：对于响应式网站或移动版网站，可以使用Canonical URL指定主要版本的URL。
  4. 动态网址和参数：当网站使用动态URL或包含大量参数时，可以使用Canonical URL来确认哪个网页最重要。

与301重定向的区别：

  • Canonical URL：是一种软性的、提示性的方法，它告诉搜索引擎哪个URL是推荐的、标准的。但它并不改变用户的访问路径，也不会导致浏览器重定向到另一个URL。
  • 301重定向：是一种硬性的、强制性的方法，它会导致浏览器自动将用户从原始URL重定向到新的URL。这种方法会改变用户的访问路径，并且通常用于永久更改网站的URL结构。
6、网站301重定向

301重定向是一种重要的自动转向技术，用于当搜索引擎向网站服务器发出访问请求时，服务返回的HTTP数据流中头信息部分状态码的一种，表示本网址永久性转移到另一个地址。

例如，如果你的网站从http://www.olddomain.com迁移到http://www.newdomain.com，你可以设置301重定向，将http://www.olddomain.com重定向到http://www.newdomain.com，这样搜索引擎会认为http://www.newdomain.com是http://www.olddomain.com的永久性替代，从而将权重转移到新域名上。

301重定向的好处包括：

  • 集中域名权重，提高新域名的排名。
  • 避免重复收录，防止搜索引擎重复索引旧网址和新网址。
  • 优化用户体验，让用户更方便地访问网站。
7、优化网站伪静态页面设置

伪静态页面技术旨在通过URL重写机制，将原本由数据库动态生成的页面（如.php、.asp等）显示为静态页面（如.html、.htm）的形式，从而提升搜索引擎的抓取效率和用户体验。这种方法不实际在服务器上创建静态文件，而是通过服务器配置（如Apache的.htaccess或Nginx的rewrite规则）实现URL的“伪装”。

假设你有一个动态文章页面，其原始URL为http://example.com/article.php?id=123，经过伪静态处理后，URL变为http://example.com/article/123.html。用户访问后者时，服务器会根据重写规则，内部转发请求到article.php并附上相应的id参数，而用户浏览器地址栏则显示更友好的静态URL。

8、强化HTTPS使用

随着网络安全意识的提升，谷歌等搜索引擎已将HTTPS作为网站排名的正面信号。HTTPS通过SSL/TLS协议加密客户端与服务器之间的数据传输，不仅保护用户数据免受窃取和篡改，还增强了网站的可信度。

实施策略：

  • 购买SSL证书：选择适合您网站需求的SSL证书类型（如DV、OV、EV）。
  • 配置服务器：在Apache或Nginx服务器上安装并配置SSL证书，确保所有HTTP请求自动重定向到HTTPS。
  • 更新网站代码：检查并更新网站中的链接，确保它们指向HTTPS版本的URL。
9、SSR（服务端渲染）技术

SSR技术针对现代SPA（单页应用）在SEO和首屏加载速度上的不足，提供了一种有效的解决方案。通过服务端预先渲染HTML内容并发送给客户端，SSR不仅提升了SEO性能，还加快了页面加载速度。

流行框架支持：

  • Vue.js：Nuxt.js是Vue的SSR框架，它简化了SSR应用的开发和部署。

  • React：Next.js为React提供了SSR和SSG（静态站点生成）功能，帮助开发者构建高性能、SEO友好的应用。

  • SEO优化：确保搜索引擎爬虫能够抓取到完整的页面内容。

  • 快速首屏加载：用户无需等待JavaScript执行完毕即可看到页面内容。

10、轻量级SEO优化：预渲染prerender-spa-plugin

如果你只想改善部分页面的SEO，可以不采用SSR的解决方案，毕竟无论是next.js，还是nuxt.js，都是有一定学习成本的。那么你可以使用prerender-spa-plugin等插件来实现预渲染页面，在构建时就针对特定的路由生成静态的HTML文件。

最后

还没有使用过我们刷题网站（https://fe.ecool.fun/）或者前端面试题宝典的同学，如果近期准备或者正在找工作，千万不要错过，题库主打无广告和更新快哦~。

老规矩，也给我们团队的辅导服务打个广告。