Next.js 13全新元数据API，支持SEO优化 | Next.js 13.2教程
目录
- 📝 介绍
- 📚 关于Next 13
- 💡 版本13.3中的变化
- 📑 元数据的新位置
- 🏷️ 元数据对象的可用标签
- 📌 标题和标题模板
- 📄 在页面中更新元数据
- ✨ 自定义页面布局
- 🌐 针对搜索引擎和社交媒体的元数据优化
- 🚫 停止使用head标签和head.js文件
- 🔗 相关资源
📝 介绍
在最近的Next 13应用版本中，特别是在Next发布Next 13.2之后，你可能会注意到一个变化，即在打开应用目录后，找不到head特殊文件了。这是因为在13.3版本中，head文件被弃用并移除了。从现在开始的所有未来版本中，你的元数据将不再保存在head文件中。那么元数据的位置在哪里呢？在这个视频中，我将向你展示如何在新的layout.js文件中使用这个新的元数据功能。
📚 关于Next 13
Next.js是一个流行的React框架，用于构建现代化的Web应用程序。它具有灵活的路由功能、SSR（服务器端渲染）支持和静态导出等先进特性，使开发人员能够创建高性能、可扩展的应用。
💡 版本13.3中的变化
在Next 13.3版本中，出现了一些重大变化。其中一个重要变化是head文件的移除。在之前的版本中，开发人员可以使用head文件来存储应用的元数据。然而，从13.3版本开始，head文件被弃用了，并且在以后的版本中将被完全移除。
📑 元数据的新位置
从Next 13.2及更高版本开始，在layout文件中有一个特殊的导出常量，名为metadata。现在，所有的元数据将存储在这个metadata对象中。让我们来了解一下metadata对象中的所有可用标签。
🏷️ 元数据对象的可用标签
metadata对象中的第一个和最重要的键是"标题（title）"。它控制着你的网站的名称和浏览器标签栏上显示的标题。例如，在我的主页的metadata标签中，我想要显示"我的Next网站"。如果我打开我的应用，你会注意到标签栏中的文本已经被更改为"我的Next网站"。
除了标题之外，还有一个叫做"标题模板（title templates）"的选项。如果你只想在你的应用根目录中创建一个元数据模板，并且在其他页面中不想创建layout文件，那么你可以这样做。在你的根目录中的标题中，你可以将一个带有"value"和"default"的对象作为字符串的替代。这是你所有未来页面中默认标题的设置。然后，在你的后续页面中使用"template"键和一个带有百分号和小写字母"s"的字符串来更新页面自身的标题，它将只更新这部分内容。让我给你演示一下这是什么意思。
📌 标题和标题模板
这里是我的About页面。假设我不想为我的元数据创建一个全新的layout，只想更新标题模板的一部分，而不用担心其他元数据。我可以在页面的顶部这样写：export const metadata = { title: '关于页面' };。这样，页面标签栏上就会显示"关于页面 - 我的标题"。如果你更喜欢这种方式，你也可以选择这样来做。
再解释一遍，如果你的页面没有layout，在它上面仍然可以添加元数据，但它将使用该页面所使用的layout的默认模板标题。即使是根布局，这个模板也将用于这个页面的标题，根据我根据文档的理解。如果我对此理解有误，请在阅读下面的文档链接之后，在下面的评论中告诉我们。
其中一个关于嵌套标题布局的事项是，如果你只使用了模板，例如只添加了一个描述而没有添加标题，那么默认标题将显示在这个页面上。让我们再次访问该页面。如果我刷新页面，你会注意到它只显示了我们在layout中添加的默认标题。
📄 在页面中更新元数据
如果你想要为你的页面设置一个独特的描述，你需要在页面中添加一个描述。否则，当页面使用的layout中没有描述时，将显示其中使用的layout的描述。所以，如果你想要为你的页面设置一个独特的描述，你需要为你的页面添加一个描述。在描述中，你可以说出你页面的一些特点，这将显示在像Google搜索结果页面上以及页面本身的描述中。
另外，你也可以添加其他的元数据标签，如"关键词（keywords）"和"Open Graph（开放图谱）"等。关键词可以帮助搜索引擎了解你的页面或网站的主题，从而更好地进行索引。而Open Graph则允许网页在社交媒体上更好地展示，包括标题、描述、URL和图片等信息。
✨ 自定义页面布局
如果你想要为特定的页面更换布局，你可以创建一个自定义的layout文件。这个layout文件将只对特定的页面生效，不会影响其他页面。这种灵活性使得你可以根据需要创建不同的布局，以及不同的元数据配置。
🌐 针对搜索引擎和社交媒体的元数据优化
为了优化你的网站在搜索引擎和社交媒体上的展示效果，你可以使用特定的元数据标签。比如，你可以添加Twitter元数据标签来设置Twitter卡片的标题、描述、站点ID、创建者信息、图片等。你还可以使用Manifest标签来控制Web扩展API的使用，以及使用其他可用标签来定制页面的表现和功能。
🚫 停止使用head标签和head.js文件
请注意，在Next 13.2及更高版本中，head标签和head.js文件已经停止使用。如果你升级到13.2版本并且仍然在应用目录中使用head标签，那么你的网站可能会出现问题。因此，你应该接受这个改变，并开始使用顶部的export const metadata来管理你的元数据。
🔗 相关资源
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
