前言
为什么要学习SEO
SEO对于Web站点很重要，有助于优化网页在搜索引擎中的排名，提升网站可见性和流量。掌握SEO技术可以确保网页结构和内容对搜索引擎友好，从而提高用户访问量和用户体验。而且SEO被面试问的很多
SEO是什么？
SEO(Search Engine Optimization，搜索引擎优化) 是优化网站以提高其在搜索引擎结果页（SERP）中的排名。它包括关键词优化、网站结构改进、内容优化和获取外部链接等策略，目的是增加网站的曝光率和访问量。
面试回答
为什么SEO对一个网站至关重要
因为很多我们开发的网站，类似于门户网站或者功能网站
一方面需要通过营销宣传来提升我们产品的知名度，另一方面靠自然搜索结果获取流量也是一个非常重要的过程
所以我们需要在了解一定的搜索引自然排名机制的基础上，对我们的网站进行内部和外部的调整优化，让用户在使用关键字搜索时我们的网站可以尽量高的提升自然排名，获取更多的流量，从而达到我们预期的销量以及品牌的知名度
seo有哪些关键的点？ 你在日常开发中，都采取了哪些措施来进行SEO呢
方式一 SSR服务器端渲染 ⭐️⭐️⭐️
比如Vue、React来开发的，大部分页面元素是由客户端javascript动态生成的很多的搜索引擎，在爬虫时只能抓取静态的HTML源代码，而不会执行avascript，因此动态生成的内容无法被爬虫索引口另外很多的搜索情况不会等待数据加载完成后再进行抓取，也会导致我们网站的很多关键信息不能被完整的收录
SSR能够在服务器上执行avascript并染出完整的HTML页面，然后将其发送到客户端
这样，爬虫在抓取网站时就能获取到完整的页面内容，从而提升SEO效果。
如果是开发初期就计算进行SEO优化的话，我们一般会直接选择- 些比较成熟的SSR框架
比如对于vue来说选摔Nuxtjs 对于React来说选择Next
方式二 准确的TDK描述
TDK就是我们常说的title、description、keywords
Title（标题）：也就是网站显示的标题，不仅仅用户会看到，搜索引擎通常会首先检索和收录title信息，所以title至关重要
title一般不需要过长，多个关键词之间使用“|“或者““分割，会被搜索引擎提取和收录
description（描述）：这是对网页内容的简短描述，通常在搜索引擎结果页中标题下方显示。描述应概述页面内容，包含相关关键词，并吸引用户点击口Keywords（关键词）：这是网页内容中重要的词汇，反映了页面的主题和内容，每个关键字都要有对应的内容匹配
虽然现代搜索引擎（如Google）对关键词标签的重视程度已经降低，但在某些情况下，合理使用关键词仍然有助于SEO
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title: 网站标题 -->
<title>前端性能优化与SEO最佳实践 - 我的博客</title>
<!-- Description: 网页描述 -->
<meta name="description" content="了解前端性能优化和SEO最佳实践，提升网站加载速度和搜索排名。提供实用技巧和策略。">
<!-- Keywords: 关键词 -->
<meta name="keywords" content="前端优化, SEO, 网站性能, 页面加载速度, SEO策略, 网站优化">
</head>
方式三 语义化的HTML元素、图片alt、h1合理使用
语义化的HTML代码和符合W3C规范是SEO的关键要素之一
语义化是指使用具有明确含义的HTML元素，搜索引擎在爬取网站时，也会更容易理解网站的内容以便进行收录，从侧面也能印证我们的网页更加的规范而且这不仅有助于搜索引擎理解网页内容，还能提高网页的可读性和可维护性。
包括Header，Nav，Aside，Article，Footer元素，这些都能帮助爬虫更好的获取页面内容，理解网页。
图片要求必须加alt规范
我们要求每个前端在使用图片时，必须加上和图片相关的alt，一方面是图片无法显示时用户可以看到提示，另一方面也有利于SEO优化
标签h1/h2/h3等的使用
H1、H2、H3等HTML标题标签在SEO中起着非常重要的作用 这些标签有助于搜索引理解网页内容的结构和层次 人而更准确地索引和评估页面的相关性
<body>
<header>
<h1>欢迎来到优化SEO的示例网站</h1>
<nav>
<ul>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>关于我们</h2>
<p>我们是一家致力于提供高质量服务的公司。通过优化 SEO，我们帮助客户提升网站的搜索引擎排名。</p>
</section>
<section id="services">
<h2>我们的服务</h2>
<article>
<h3>SEO优化</h3>
<p>我们提供专业的 SEO 优化服务，帮助您的网站在搜索引擎中获得更高的排名。</p>
</article>
<article>
<h3>网站设计</h3>
<p>我们设计响应式网站，以确保您的网站在各种设备上都能完美显示。</p>
</article>
</section>
<section id="contact">
<h2>联系我们</h2>
<p>如需更多信息或询问服务，请通过以下方式与我们联系：</p>
<address>
<p>邮箱: <a href="mailto:[email protected]">[email protected]</a></p>
<p>电话: (123) 456-7890</p>
</address>
</section>
</main>
<footer>
<p>© 2024 优化SEO的示例网站</p>
</footer>
</body>
方式四 编写合理的robots.txt文件
robots.txt是一个存放在网站根目录中的文本文件
- 其主要作用是告诉搜索引擎爬虫哪些部分的网站可以被抓取（爬取）以及哪些部分不应该被抓取
为什么需要使用robots.txt - 通过指示搜索引擎忽略不重要的文件或目录，可以让搜索引擎更专注于重要内容的抓取和索引,当然也可以避免一些敏感或私有内容被无意中索引
- 所以如果网站不编写robots.txt， 能会降低网站的SEO效率 因为搜索引擎花费更多时间和资源在不重要的页面上。
方式五 内部链接和外部链接
- 内部链接是指从一个页面到同一网站内另一个页面的链接。 它可以提高提高网站导航、增强网站的权重、提升网站的索引
- 外部链接是指从一个网站指向另一个网站的链接。 在网页中放合适的外部链接，也有利用于提升网站的权重指数，容易被搜索引擎收录
其他方式
- Sitemap 文件：这是一个包含网站所有页面的文件，通常以 XML 格式提供，帮助搜索引擎快速找到和索引网站内容。
- 网站导航：这是用户在网站上移动的工具，比如菜单和链接结构。良好的导航设计提高了用户体验和页面访问量，有助于搜索引擎理解页面的重要性。
- 响应式设计：确保网站在各种设备和屏幕尺寸上正常显示和操作。这不仅提高了用户体验，还能影响搜索引擎排名，因为搜索引擎重视移动友好的网站。