SEO 对于现代 Web 应用来说已经变得越来越重要，它不仅能够提升你的站点的搜索引擎排名，还可以让你的站点更容易被爬虫收录，从而帮助你获得更多的流量。而为了方便前端开发者快速实现 SEO 优化，@deveodk/vue-seo 作为一个高度封装的包，在帮助你实现 SEO 自定义配置的同时，还可以提升开发效率。
安装
我们可以通过 npm 来安装 @deveodk/vue-seo 包
npm install --save @deveodk/vue-seo
使用方法
使用 @deveodk/vue-seo 也非常简单，只需要在需要设置 SEO 的组件中传入 metaInfo 即可，metaInfo 是一个对象，你可以将你需要设置的 SEO 信息都放在里面。
下面我们通过一个简单的示例来说明如何使用 @deveodk/vue-seo，假设我们有一个博客主页，需要设置 SEO 信息。
首先，在 BlogHome.vue 组件中传入 metaInfo 和 title 。
-- -------------------- ---- -------
----------
-----
----------- -- -- ---------
------
-----------
--------
------ ------- -
---------- -
------ -
------ ----- ------
----- -
- ----- -------------- -------- ----- -- -- -------- ----- -
-
-
-
-
---------接下来，我们需要在 App.vue 组件中引入 VueSEO 和 BlogHome 组件，并将 BlogHome 组件放入渲染函数中。
-- -------------------- ---- -------
----------
---- ---------
---------- --
------
-----------
--------
------ ------ ---- ------------------
------ -------- ---- ---------------------------
------ ------- -
----------- -
--------
--
--------- -
-- --- ------
--------------- -
------------- --- ------ -- --- ----- -
-------------- --- - -- ------ -- ----- --
---------------- -
----- -----------
-------- ------ ---- --- ------------
- -- --- ---- --
--
-
-
---------这里我们通过 Vue.use 来初始化 VueSEO，传入一些默认配置信息。在组件中使用 metaInfo 的时候，VueSEO 会使用这些默认配置来增强 SEO 设置的效果。
示例代码
-- -------------------- ---- -------
----------
-----
----------- -- -- ---------
------
-----------
--------
------ ------- -
---------- -
------ -
------ ----- ------
----- -
- ----- -------------- -------- ----- -- -- -------- ----- --
- ----- ----------- -------- ------ ---- --- ------------ --
- --------- ----------- -------- -------- -- -- ----- --
- --------- ----------------- -------- ----- -- -- -------- ----- --
- --------- ----------- -------- --------------------------------------- --
- ----- ---------------- -------- -------- -- -- ----- --
- ----- ---------------------- -------- ----- -- -- -------- ----- --
- ----- ---------------- -------- --------------------------------------- -
-
-
-
-
---------在上面的示例中，我们通过 metaInfo 设定了 title，同时也设定了 description、keywords 以及 Open Graph 和 Twitter Cards 的相关信息。
总的来说，@deveodk/vue-seo 是一个高度封装的 SEO 解决方案，使用起来非常方便。虽然它已经帮我们封装了 SEO 相关的细节，但我们仍然需要关注我们站点的 SEO 性能，让我们的站点更好的被搜索引擎收录。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005678381e8991b448e3e5a