配置 SEO 元数据
配置 SEO 元数据
当您想自定义页面在搜索结果或社交预览中的显示方式时,可以在站点级别设置默认值,或在单个页面上覆盖它们。
Fern 自动为文档站点中的每个页面生成所有 SEO 元数据。搜索引擎和社交媒体预览无需任何配置即可开箱即用。
当您确实想要自定义 SEO 设置时,可以在站点级别设置默认值,或在单个页面上覆盖它们。建议标题保持在 50-60 个字符之间,描述保持在 150-160 个字符之间以获得最佳显示效果。
此页面上的元数据配置用于对用户不可见的 SEO 和社交标签。对于可见的页脚链接,请参见页脚链接配置。
工作原理
Fern 按以下顺序查找元数据值:
- 页面前置字段 — 特定页面的自定义 SEO 值
- 站点级
docs.yml— 所有页面的默认 SEO 值 - 自动默认值 — 从页面现有的
title、description、subtitle或excerpt字段生成
示例
og:image 是在社交媒体预览中显示的图片。如果您没有在页面前置字段中设置 og:image,Fern 会使用 docs.yml 中的站点级 og:image。如果两者都没有配置,则完全省略该标签。
站点级默认值
在 docs.yml 中为整个站点设置默认 SEO 元数据。除非被页面特定元数据覆盖,否则这些设置将应用于所有页面。
核心元数据
搜索引擎使用的身份和描述字段,在社交平台间共享。建议标题保持在 50-60 个字符之间,描述保持在 150-160 个字符之间以获得最佳显示效果。如果您的文档可通过多个 URL 访问(例如自定义域名和 buildwithfern.com 子域名),请设置 canonical-host 以告诉搜索引擎哪个 URL 是权威的。
metadata.og:site_name
用于 Open Graph 标签的网站名称。
metadata.og:title
在社交媒体预览中显示的标题。未设置时回退到页面的 title。
metadata.og:description
在社交媒体预览中显示的描述。未设置时回退到页面的 description、subtitle 或 excerpt。
metadata.og:url
文档的规范 URL。未设置时回退到页面的解析 URL。
metadata.og:locale
内容的语言区域(例如 en_US)。无默认值;未设置时省略该标签。
metadata.canonical-host
文档网站的主机。用于设置元数据标签和站点地图等文档的规范 URL。默认为 instances 中定义的 URL。
社交图片
当您的文档在 LinkedIn、Slack、Discord 和其他平台上被分享时显示的图片。您可以设置适用于每个页面的单一图片,或让 Fern 动态为每个页面生成唯一图片。
手动设置
使用 og:image 设置适用于每个页面的静态图片。使用 1200x630px 图片以在各平台上获得最佳显示效果——这是标准的 Open Graph 尺寸,在大多数预览中都能正确渲染。避免在图片中嵌入文本,因为在某些平台上可能会被裁剪。
metadata.og:image
在社交媒体预览中显示的图片。推荐尺寸为 1200x630 像素。无默认值;未设置时省略该标签。
metadata.og:image:width
Open Graph 图片的宽度(像素)。仅在设置 og:image 时应用。
metadata.og:image:height
Open Graph 图片的高度(像素)。仅在设置 og:image 时应用。
metadata.og:logo
公司 logo 的 URL。无默认值;未设置时省略该标签。
动态设置 Beta
除了为所有页面使用单一静态图片外,您还可以启用动态 OG 图片生成。启用时,Fern 自动为没有在前置字段中设置的每个页面生成唯一的 og:image。下面的 og:dynamic:* 子设置仅在 og:dynamic: true 时读取——否则会被忽略。fern check 会对冲突设置发出警告,以便您可以在本地解决它们。
您可以选择为动态生成的 OG 图片提供自定义背景图片(og:dynamic:background-image)。
metadata.og:dynamic
当为 true 时,为没有设置自定义 og:image 的页面启用动态 OG 图片生成。任何站点级的 og:image 和 twitter:image 仍然应用于首页;其他页面使用动态生成的图片。
metadata.og:dynamic:background-image
动态生成的 OG 图片的自定义背景图片。可以是 URL 或相对文件路径。相对路径从设置此属性的 YAML 文件(例如 docs.yml)解析。设置时,此图片用作背景而不是纯色。无默认值;未设置时动态 OG 图片渲染时不使用背景图片。
将重要的视觉内容保持在安全区域内——四边都有 80px 内边距的中央区域。页面标题、描述、logo 和 URL 渲染在背景之上,因此安全区域外的任何艺术品可能会被覆盖或根据平台被裁剪。

metadata.og:dynamic:text-color
覆盖动态生成的 OG 图片的文本颜色。接受任何有效的 CSS 颜色值(例如 "#1a1a1a")。默认情况下,Fern 从您的主题(grayScale[11])读取文本颜色。如果没有可用的主题颜色,则回退到深色模式的 #ffffff 或浅色模式的 #1a1a1a。必须与 og:dynamic:background-color 不同,以便文本保持可见。
metadata.og:dynamic:background-color
覆盖动态生成的 OG 图片的背景颜色。接受任何有效的 CSS 颜色值(例如 "#ffffff")。默认情况下,Fern 从您的主题读取背景颜色。如果没有可用的主题颜色,则回退到 #0A0A0A。
metadata.og:dynamic:logo-color
选择在动态生成的 OG 图片中渲染的 logo 变体。接受 dark 或 light,匹配 docs.yml 中顶级 logo: 设置下的相应条目。如果您的 docs.yml 只定义了一个 logo 变体,则无论此设置如何都使用该变体。当 og:dynamic:show-logo: false 时无效。
metadata.og:dynamic:show-logo
切换动态生成的 OG 图片中 logo 的可见性。当启用 og:dynamic 时默认为 true。
metadata.og:dynamic:show-section
切换动态生成的 OG 图片中章节标题的可见性。章节标题来源于页面的导航面包屑。当启用 og:dynamic 时默认为 true。
metadata.og:dynamic:show-description
切换动态生成的 OG 图片中页面描述的可见性。描述从页面的前置字段(description、subtitle 或 excerpt)中提取。当启用 og:dynamic 时默认为 true。
metadata.og:dynamic:show-url
切换动态生成的 OG 图片中页面 URL 的可见性。当启用 og:dynamic 时默认为 true。
metadata.og:dynamic:show-gradient
切换动态生成的 OG 图片中强调色渐变覆盖的可见性。渐变使用您的强调色。当启用 og:dynamic 时默认为 true。
Twitter / X
控制您的文档在 X 上分享时在 Twitter Card 预览中的显示方式。
metadata.twitter:title
在 Twitter Card 预览中显示的标题。未设置时回退到 og:title(然后回退到页面标题)。
metadata.twitter:description
在 Twitter Card 预览中显示的描述。未设置时回退到 og:description(然后回退到页面描述)。
metadata.twitter:handle
您公司的 Twitter 用户名。无默认值;未设置时省略该标签。
metadata.twitter:image
在 Twitter Card 预览中显示的图片。未设置时回退到 og:image。
metadata.twitter:site
您网站的 Twitter 用户名。无默认值;未设置时省略该标签。
metadata.twitter:card
Twitter Card 类型。选项有 summary、summary_large_image、app 或 player。
页面级覆盖
在页面的前置字段中配置 SEO 元数据,以控制单个页面在搜索结果和社交分享中的显示方式。这些设置会覆盖站点级默认值。
只有文档中记录的 SEO 字段才会作为元标签添加到 HTML <head> 中。自定义前置字段不会自动出现在页面元数据中。要添加自定义元数据,请使用自定义 JavaScript。
基础元数据
搜索引擎使用的页面标题、URL 和关键词字段。当您需要为搜索引擎提供与可见页面标题不同的标题时,请使用 headline。
headline
设置时,文档头部的 <title /> 标签将使用此值而不是 title 属性。例如,您的 title 可能是”快速开始”(在侧边栏和 H1 中显示),而 headline 可能是”快速开始 | PlantStore API 文档”,为搜索引擎提供更多上下文。如果未设置,Fern 使用 title 并附加您的站点名称。
canonical-url
覆盖此页面的规范 URL。必须是包含协议的完整 URL(例如 https://buildwithfern.com/learn/docs/content/frontmatter)。未设置时默认为页面的解析 URL。
keywords
与页面相关的逗号分隔关键词(例如 plants, garden, nursery)。仅接受逗号分隔的字符串,不接受数组。无默认值;未设置时省略该标签。
Open Graph
控制此页面在 LinkedIn、Slack、Discord 和其他支持 Open Graph 的平台上分享时的显示方式。建议标题保持在 50-60 个字符之间,描述保持在 150-160 个字符之间以获得最佳显示效果。
og:site_name
内容分享时应显示的网站名称。回退到 docs.yml 中的站点级 metadata.og:site_name。
og:title
内容分享时应显示的页面标题。未设置时回退到页面的 title。
og:description
内容分享时应显示的页面描述。未设置时回退到页面的 description、subtitle 或 excerpt。
og:url
页面的 URL。未设置时回退到页面的解析 URL。
og:image
内容分享时显示的图片 URL。回退到 docs.yml 中的站点级 metadata.og:image。
og:image:width
图片的宽度(像素)。无默认值;仅在设置 og:image 时使用。
og:image:height
图片的高度(像素)。无默认值;仅在设置 og:image 时使用。
og:locale
页面的语言区域,通常格式为 language_TERRITORY(例如 en_US)。回退到 docs.yml 中的站点级 metadata.og:locale。
og:logo
内容分享时显示的 logo 图片 URL。回退到 docs.yml 中的站点级 metadata.og:logo。
Twitter / X
控制此页面在 X 上分享时在 Twitter Card 预览中的显示方式。
twitter:title
在推文中应显示的页面标题。未设置时回退到 og:title(然后回退到页面标题)。
twitter:description
在推文中应显示的页面描述。未设置时回退到 og:description(然后回退到页面描述)。
twitter:handle
页面创建者或站点的 Twitter 用户名。回退到 docs.yml 中的站点级 metadata.twitter:handle。
twitter:image
在推文中显示的图片 URL。未设置时回退到 og:image。
twitter:site
您网站的 Twitter 用户名。回退到 docs.yml 中的站点级 metadata.twitter:site。
twitter:url
页面的 URL。未设置时回退到 og:url(然后回退到页面 URL)。
twitter:card
在 Twitter 上分享时使用的卡片类型。选项:summary、summary_large_image、app、player。
索引控制
控制搜索引擎是否索引此页面或关注其链接。这些是不同的:noindex 完全从搜索结果中移除页面,而 nofollow 将页面保留在结果中,但告诉搜索引擎不要通过其链接传递排名信用。
对于您希望在侧边栏中可见但从搜索结果中排除的页面(例如早期访问文档),请使用 noindex。要同时在侧边栏和搜索结果中隐藏页面,请在 docs.yml 中使用 hidden: true,它会自动处理两者——详见隐藏内容。请谨慎使用 nofollow——在文档中很少需要。
noindex
如果为 true,搜索引擎不会索引该页面,并且会从 llms.txt 端点中排除。
nofollow
如果为 true,搜索引擎不会关注页面上的任何链接。