最近为广东工业大学BanGDream同好会写了个spa页面，想着以这个结构简单的站点为基础，练习一下SEO.
本文的SEO基本以Google Search为目标，bing的中午搜索比较孱弱，baidu需要实名，故不讨论。
首先是Standardisation，站点的页面组织和媒体资源都要按标准的结构和格式存储。站点的媒体图片以webp格式为佳，可以使用Cloudflare的image功能在edge节点上自动化转换，当然也可以手动规范格式。
针对站点的各种icon——这里指的是logo等资源，而非图标，使用类似http://favicon.io/的工具可以轻松转换为所需的标准化大小和输出元数据信息site.webmanifest。但这里需要注意，提供的源图片最好为svg格式，否则转换后的32*32大小的图标会在搜索预览里相当模糊，有碍体验。
sitemap.xml也是重要的一环，有相当多工具可以自动化生成，不再赘述。建议在Google search console导入站点后，立刻手动上传站点地图，加快索引。
接下来是元数据，这里以vue3 SPA页面为例，index.html的description和keywords字段最好包括名称，别名，地点和相关领域等所有信息（通常的SEO也确实是这样做的）。以本站点为例，考虑到主要关键字为广东工业大学和Bangdream，相关衍生keywords可以是：
- GDUT
- 少女乐团派对
- 邦邦
- 同好会
- 音游
- 节奏游戏
- ガルパ
- 厂工
vue页面还可以使用@vueuse/head插件方便的在每个view内使用结构化语句插SEO标签，以home.vue为例，调用usehead方法传入json结构体：
useHead({
title: 'GDUT BangDream同好会 - 广东工业大学BangDream爱好者聚集地',
meta: [
// 基础SEO标签
{
name: 'description',
content: 'GDUT BangDream同好会是广东工业大学的BangDream爱好者社团，拥有60+活跃成员。我们举办音游比赛、观影会、团建活动，欢迎所有BangDream爱好者/Bangdreamer加入我们一起krkrdkdk！'
},
{
name: 'keywords',
content: 'GDUT BangDream同好会,广东工业大学,GDUT,厂工,BangDream,少女乐团派对,音游,社团,同好会,krkr,邦邦,观影会,团建,广工,bandori,bangdreamer,节奏游戏,ガルパ'
},
{
name: 'author',
content: 'GDUT BangDream同好会'
},
{
name: 'robots',
content: 'index,follow'
},
// Open Graph标签 - 社交媒体分享
{
property: 'og:type',
content: 'website'
},
{
property: 'og:site_name',
content: 'GDUT BangDream同好会'
},
{
property: 'og:title',
content: 'GDUT BangDream同好会 - 广东工业大学BangDream爱好者聚集地'
},
{
property: 'og:description',
content: 'GDUT BangDream同好会是广东工业大学BangDream爱好者社团，60+成员一起krkrdkdk！音游比赛、观影会等精彩活动等你来参加。'
},
{
property: 'og:url',
content: 'https://gdutbandori.org'
},
{
property: 'og:image',
content: 'https://gdutbandori.org/images/logos/logo.png'
},
{
property: 'og:image:width',
content: '1200'
},
{
property: 'og:image:height',
content: '630'
},
{
property: 'og:image:alt',
content: 'GDUT BangDream同好会徽标'
},
{
property: 'og:locale',
content: 'zh_CN'
},
// Twitter Card标签
{
name: 'twitter:card',
content: 'summary_large_image'
},
{
name: 'twitter:site',
content: '@gdutbandori'
},
{
name: 'twitter:title',
content: 'GDUT BangDream同好会 - 广东工业大学BangDream爱好者聚集地'
},
{
name: 'twitter:description',
content: 'GDUT BangDream同好会是广东工业大学BangDream爱好者社团，60+成员一起krkrdkdk！'
},
{
name: 'twitter:image',
content: 'https://gdutbandori.org/images/logos/logo.png'
},
{
name: 'twitter:image:alt',
content: 'GDUT BangDream同好会徽标'
},
// 移动端优化
{
name: 'viewport',
content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
},
{
name: 'format-detection',
content: 'telephone=no'
}
],同时，使用schema.org标准的结构化数据，可以增加搜索引擎对于站点相关性的理解，能够更好的展示给目标群体：
script: [
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Organization',
name: 'GDUT BangDream同好会',
alternateName: ['广东工业大学BangDream同好会', 'GDUT邦邦同好会'],
url: 'https://gdutbandori.org',
logo: 'https://gdutbandori.org/images/logos/logo.png',
description: '广东工业大学BangDream爱好者聚集地，举办音游比赛、观影会等活动',
foundingDate: '2025-03',
memberOf: {
'@type': 'Organization',
name: '广东工业大学'
},
address: {
'@type': 'PostalAddress',
addressLocality: '广州',
addressRegion: '广东省',
addressCountry: 'CN'
},
contactPoint: {
'@type': 'ContactPoint',
email: '[email protected]',
contactType: 'customer service'
},
sameAs: [
'https://gdutbandori.org'
]
})
}
]
})以上内容只是一点微小的经验，拾人牙慧而已。笔者深知这些知识对于一些人来说不过是基础中的基础。甚至这篇博文作为wp页面来说，SEO表现非常一般，令人啼笑皆非。权当学习记录，如果能帮到什么人，那就更好了。
Comments | NOTHING