# 烹饪指南
<head>
<meta name="keywords" content="cooking, blog" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="preconnect" href="https://example.com" />
<script type="application/ld+json">
{JSON.stringify({
'@context': 'https://schema.org/',
'@type': 'Organization',
name: 'Meta Open Source',
url: 'https://opensource.fb.com/',
logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
})}
</script>
</head>
一些内容……
Docusaurus是个挺实用的工具，但很多人并不清楚它在元数据和SEO方面的具体作用。它就像一座宝藏丰富的宝库，许多人却不知道如何去挖掘其中的宝物。
元数据的自动添加
---
title: 给搜索引擎看的标题；可能和正文标题不一样
description: 关于此页的简短描述
image: 在社交媒体卡片中显示的缩略图
keywords: [描述, 中心的, 关键词]
---
Docusaurus系统为Markdown页面自动设置了描述、标题、规范URL等元数据。这样的做法确实让工作变得简单。技术上，它显著降低了时间投入。比如，在开发小项目时，不必逐个添加这些信息。而且，在构建React页面时，为布局添加相关字段对搜索引擎优化也有帮助。
网页的SEO十分关键。在当下网络环境中，若网站的SEO效果不好，公众很难找到它。特别是新成立的小公司官网，若不重视SEO，吸引访问者的挑战会变得相当大。
import React from 'react';
import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';
export default function page() {
return (
<Layout title="Page" description="A React page demo">
<Head>
<meta property="og:image" content="image.png" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="preconnect" href="https://example.com" />
<script type="application/ld+json">
{JSON.stringify({
'@context': 'https://schema.org/',
'@type': 'Organization',
name: 'Meta Open Source',
url: 'https://opensource.fb.com/',
logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
})}
</script>
</Head>
{/* ... */}
</Layout>
);
}
推荐的元数据设置方式
建议通过description和keywords等字段来调整。Docusaurus会自动将相关信息填入description和og:description标签。若不使用这种方式，就需要手动添加这两个元数据标签，这样操作起来会相对复杂。这就像是一家小餐馆，如果选择了现成的简单管理方法，却偏要选择繁琐的旧路，效率自然会下降。
从实际角度出发，在那些信息更新频繁的网站上，运用这种自动处理元数据的技术，能有效提高工作效率。以个人技术博客为例，博主们可以更快地更新和发布技术文章。
默认组件接受的属性
Docusaurus的组件具备title和description等属性功能。这些属性对于Docusaurus系统的融合非常关键。在实际应用中，开发者能够借助这一特点，轻松地在页面布局和功能设计中融入必要的信息。
以一个例子来说，若一家企业在开发软件内的文档系统，利用这个功能，它们可以快速且精确地呈现页面标题和内容，这样也就减少了额外代码的需要。
静态生成HTML文件
Docusaurus是一款用于创建静态网站的软件，它能够依据不同的URL路径自动生成相应的HTML文件。这一特性对于搜索引擎检索信息非常有益。资讯网站若能让搜索引擎方便地获取内容，其访问量有望大幅提升。
从地理位置角度分析，不管网站设立在哪里，若想被搜索引擎收录并吸引访客，静态HTML文件的生成方式显得尤为明显。
User-agent: *
Disallow:
图片相关的元数据
图片的alt属性对搜索引擎识别图片信息很有帮助，而且在使用屏幕阅读器阅读或图片出现损坏时，它同样能发挥作用。此外，给图片加上title属性，当鼠标停留在图片上时，会出现一个提示框。比如，在众多图片教程网站上，alt标签能协助视力不佳的读者通过屏幕阅读器来理解图片内容。
实际上，一些电商平台准许给商品图片配上文字说明。当用户把鼠标放在这些说明上，就能看到更多信息，比如产品的特别之处或是使用场景。
更多的页面优化相关
为了获得详尽的搜索结果，我们必须提供帖子的发布时间、作者和缩略图等关键信息。这是完善内容的基础做法。众多知名新闻平台，每篇报道都会标注发布日期和作者等详细信息，这样便于读者和搜索引擎对内容进行有效的索引和解读。
网站搜索活动需遵循robots.txt规则，若想避免网站被收录，可以通过调整网站设置来实现。一些托管服务允许用户设置X-Robots-Tag。这些做法主要是为了保护网站的自主性。对于某些有特定用途的网站，比如仅限内部员工访问的知识库，可以采用这种设置，以阻止外部搜索引擎进行索引。
<head>
<meta name="robots" content="noindex, nofollow" />
</head>
在搭建网站过程中，你是否留意了信息的准确输入和搜索引擎的优化？若觉得这篇文章对你有帮助，不妨点赞支持，或者分享给他人。