npm 包 onus-meta 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 onus-meta？

onus-meta 是一个能够帮助开发者快速添加网站元信息的 npm 包。它包含了一系列的 HTML meta 标签，例如：title、description、keywords、author、robots 以及 og 标签等等。开发者可以根据自己的需求，通过简单的配置，快速地添加网站所需的元信息，提高网站 SEO 优化和用户体验。

如何使用 onus-meta？

安装

在终端中输入以下命令进行安装：

npm install --save onus-meta

引入

在 HTML 文件中引入所需的 meta 标签，并在头部引入 onus-meta：

<head>
  <!-- onus-meta -->
  <script src="node_modules/onus-meta/dist/onus-meta.js"></script>

  <!-- meta tags -->
  <title>Example Website</title> <!-- 自定义标题 -->
  <meta name="description" content="Example website description."> <!-- 自定义描述 -->
</head>

或者，可以选择从 CDN 引入 onus-meta：

<head>
  <!-- onus-meta -->
  <script src="https://cdn.jsdelivr.net/npm/onus-meta/dist/onus-meta.js"></script>

  <!-- meta tags -->
  <title>Example Website</title> <!-- 自定义标题 -->
  <meta name="description" content="Example website description."> <!-- 自定义描述 -->
</head>

配置

在您的 JavaScript 文件中使用 MetaConfig 对象进行配置。以下是一些常用的配置示例：

1. 自定义网站标题

const metaConfig = new MetaConfig({
  title: "Example Website - Home"
});

addOnusMetaTags(metaConfig.getTags());

2. 自定义网站描述

const metaConfig = new MetaConfig({
  description: "Example website description."
});

addOnusMetaTags(metaConfig.getTags());

3. 自定义网站关键词

const metaConfig = new MetaConfig({
  keywords: ["example", "website", "keywords"]
});

addOnusMetaTags(metaConfig.getTags());

4. 设置网站作者

const metaConfig = new MetaConfig({
  author: "Your Name"
});

addOnusMetaTags(metaConfig.getTags());

5. 禁止搜索引擎索引网站

const metaConfig = new MetaConfig({
  robots: "noindex"
});

addOnusMetaTags(metaConfig.getTags());

6. 设置 og 标签

-- -------------------- ---- -------
----- ---------- - --- ------------
  --- -
    -
      --------- -----------
      -------- -------- ------- - -----
    --
    -
      --------- -----------------
      -------- -------- ------- -------------
    --
    -
      --------- -----------
      -------- -----------------------------------------
    -
  -
---

--------------------------------------

总结

onus-meta 让添加网站元信息变得更加简单，通过一些简单的配置，开发者可以自定义网站的标题、描述、关键词、作者、robots 以及 og 标签等等。这让网站的 SEO 优化和用户体验提高了许多。如果您需要快速添加元信息，不妨试试 onus-meta。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/206606