Skip to content

前端SEO优化

SEO(Search Engine Optimization)搜寻引擎最佳化,常见的技术优化手段通常是针对于搜索引擎爬虫的,通过建立一系列约定的规则或手段来使得搜索引擎更好地抓取到网站的信息。

title标签

html
 <title>这里填写标题</title>
  • 一个页面使用一个不重复的标题
  • 简单精准,避免通用模糊
  • 突出搜索意图

meta标签

description

html
<meta name="description" content="这里填写描述">
  • 一个页面使用一个独立的描述
  • 控制内容长度,少于160个字符

robots

html
<head> 
  <meta name=”robots” content="${content}"> 
</head>  
<!-- 
content可选:index | noindex | follow | nofollow
index: 告诉搜索引擎收录我 
noindex:告诉搜索引擎不要收录我 
follow:告诉搜索引擎爬取页面的links 
nofollow:告诉搜索引擎不要爬取页面的links
如果不设置此标签,等同于content="index, follow"  
-->

body内容

  • 标题:分级恰当,层级关系明确(标签:h1、h2、h3),标题含义明确

  • 文件名称语义化:img文件名称最好是有语义的,能标识该图片内容的

  • 图片说明 alt-tag:img标签的alt属性值不能空,要填写该图片的描述

    html
    <img src="huyou.jpg" alt="xxxx">

语义化链接

  • bad case:www.example.com/?p=123456
  • good case:www.example.com/topic-name

提升网站速度

测速工具:

https://developers.google.com/speed/pagespeed/insights/

信息提供

sitemaps网站地图

提供给搜索引擎网站地图信息的协议,通过它可以告知搜索引擎关键path信息,类似网站的目录,可以手动配置,也可以使用生成器自动生成:https://www.xml-sitemaps.com/

配置生成后放到网站根目录

VitePress

.vitepress/config.ts配置

typescript
export default defineConfig({
    title: 'title',
    description: '技术笔记,技术圈,程序员,前端,后端,小程序,安全,运维,软件开发,编程,javascript',
    sitemap: {
        hostname: 'https://example.com'
    }
})

Google 相关

Google Search Console 谷歌的收录索引添加

Google Analytics 谷歌的分析工具,广告相关

Google Trends 谷歌查看搜索趋势

基于 MIT 许可发布