面试中的SEO优化：从基本概念到实用策略

ZhaiMou

于 2024-08-27 22:58:00 发布

阅读量1.2k

点赞数 38

文章标签： seo 前端 javascript 面试网络 html5

本文链接：https://blog.csdn.net/weixin_63625059/article/details/141614429

版权

seo

前言

为什么要学习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:info@example.com">info@example.com</a></p>

<p>电话: (123) 456-7890</p>

</address>

</section>

</main>

<footer>

<p>&copy; 2024 优化SEO的示例网站</p>

</footer>

</body>