前端 SEO 优化手段

428 阅读2分钟

最近做的项目涉及到 SEO,简单记录一下。

什么是 SEO

首先,我们需要知道什么是 SEO。
SEO(Search Engine Optimization),搜索引擎优化,它是针对多页面应用的。
搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。

如何进行 SEO

预渲染

  • prerender-spa-plugin
    1. vue 项目中安装 prerender-spa-pluginnpm install prerender-spa-plugin -S
    2. vue.config.js 中配置

合理设置页面的 TDK

网站的 TDK 指的是 Title(标题)、Description(描述)和 Keywords(关键字)这三个元标签。它们能帮助搜索引擎理解网页内容,并影响着搜索结果页面的展示方式。

<title>标题</title>
<!--注意:在 HTML5 中,meta 标签不需要被关闭-->
<meta name="description" content="描述内容">
<meta name="keywords" content="关键字">

⏩ 查看 Nuxt 是如何设置 TDK 的

我们在查看一些网站的源码时,经常会发现 head 标签中有一些元标签是这样写的:

<meta property="og:title" content="页面标题">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="这是一个示例页面的描述。">

这属于 Open Graph 协议内容的一部分,Open Graph 协议是通过定义一组元数据标签,让网页在社交网络上分享时能够呈现出更丰富的信息,从而提高用户体验和分享内容的吸引力,便于网页的推广和社交网络互动。

使用语义化标签

使用语义化标签就是使用正确的标签做正确的事情。良好的语义化使得 HTML 文档结构清晰、布局合理、可读性强。

例如可以使用 h1-h6headerfooterpolullitabletheadtbodytdthtr 等。

优化图片

为 img 标签添加 alt 属性,便于搜索引擎理解图像内容。

<img src="img.png" alt="图片名称" />

提高网页加载速度

具体的优化方式,可以查看这篇文章 ⏩ 【面试官:如何进行前端性能优化?】。

监控和改进

例如我们可以通过安装百度统计,根据百度统计提供的数据,来改善网站内容和结构,从而间接进行 SEO,提高网站排名。

⏩ 查看 Nuxt 是如何使用百度统计的

持续更新中⏳

007r.png