跳到主要内容

站点基础建设

工程目标

为网站补齐基础站点配置,确保页面展示、搜索发现、链接分享和浏览器侧安全策略都具备可检查的基线。

站点上线后,不只是页面能打开就可以。还需要让用户看得懂、搜索引擎找得到、社交平台分享得好看,并具备基本安全性。


总览

配置项是什么主要作用常见位置
tagline站点一句话定位说明网站主题,辅助 SEO 和品牌表达站点配置、首页、关于页
OG Image分享链接时的预览图让微信、飞书、Slack 等分享卡片更好看/img/og-image.png
robots.txt爬虫访问规则告诉搜索引擎哪些能抓、哪些别抓/robots.txt
sitemap.xml站点地图帮助搜索引擎发现页面/sitemap.xml
favicon浏览器小图标提升标签页和收藏夹识别度/favicon.ico
SEO Meta页面标题、描述、分享信息影响搜索结果和链接预览HTML <head>
安全响应头浏览器安全策略降低点击劫持、类型嗅探、权限滥用等风险Nginx / Web Server

1. Tagline

tagline 是站点的一句话定位。

例子:

tagline: "面向 AI 学习、实践与产业动态的知识库"

注意:配置里有 tagline,不代表用户一定能看到。只有页面或主题把它渲染出来,才会显示在网页上。


2. OG Image

OG Image 是链接被分享到社交平台或聊天软件时的封面图。

推荐:

项目建议
尺寸1200 x 630
格式pngjpg
内容站点名 + 简短定位
路径/img/og-image.png

Docusaurus 配置示例:

themeConfig: {
image: "img/og-image.png",
}

生成后通常会出现在 HTML 中:

<meta property="og:image" content="https://example.com/img/og-image.png">

注意:微信不一定严格使用 og:image,有时会缓存旧结果,或者从正文图片里抓图。


3. robots.txt

robots.txt 用来告诉搜索引擎爬虫哪些路径可以访问。

例子:

User-agent: *
Allow: /
Disallow: /admin/

Sitemap: https://example.com/sitemap.xml

注意:robots.txt 不是安全机制。敏感页面不能只靠 Disallow,应该加登录、Basic Auth 或不要公开部署。


4. sitemap.xml

sitemap.xml 是站点地图,列出希望搜索引擎发现的页面。

作用:

  • 帮助搜索引擎发现新页面。
  • 帮助搜索引擎发现深层文档页。
  • 适合文档站、博客、知识库。

Docusaurus 配置示例:

sitemap: {
changefreq: "daily",
priority: 0.7,
ignorePatterns: ["/admin/**"],
filename: "sitemap.xml",
}

注意:有 sitemap 不代表一定会被收录,它只是帮助发现页面。


5. Favicon

favicon 是浏览器标签页和收藏夹里的小图标。

Docusaurus 示例:

favicon: "favicon.ico"

常见路径:

/favicon.ico

6. SEO Meta

SEO Meta 是页面头部的标题、描述和分享信息。

常见内容:

<title>AI-Basecamp</title>
<meta name="description" content="页面描述">
<meta property="og:title" content="分享标题">
<meta property="og:description" content="分享描述">
<meta property="og:image" content="分享图 URL">

基本原则:

  • 标题要清楚。
  • 描述要说明页面价值。
  • 重要页面尽量有独立的 titledescription

7. 安全响应头

安全响应头由 Nginx 等 Web Server 返回,用来增强浏览器侧安全。

常见配置:

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=()" always;
响应头作用
Strict-Transport-Security强制使用 HTTPS
X-Content-Type-Options防止浏览器误判文件类型
X-Frame-Options限制页面被 iframe 嵌入
Referrer-Policy控制来源信息泄露
Permissions-Policy限制摄像头、定位等浏览器能力

注意:Nginx 中如果某个 location 单独写了 add_header,可能不会继承上层响应头。


8. 上线检查

检查项说明
tagline是否准确说明站点定位
OG Image图片能否直接访问,分享卡片是否正常
robots.txt是否允许核心页面抓取,是否屏蔽后台路径
sitemap.xml是否生成,是否包含核心页面
favicon浏览器标签页是否正常显示
SEO Meta首页和重要页面是否有标题与描述
安全响应头线上响应是否带基础安全头
线上产物不只看源码,要检查部署后的 HTML

9. 常见误区

误区正确认识
配了 tagline 用户就能看到需要页面实际渲染
配了 og:image 微信一定显示微信可能缓存,也可能不采用 OG 图
有 sitemap 就一定收录sitemap 只帮助发现,不保证收录
robots.txt 可以保护隐私它不是安全机制
Nginx 顶层 header 一定生效具体 location 可能覆盖
本地 build 成功就等于线上生效还要确认部署后的 HTML