草庐IT

vue.js - Nuxt.js SEO 实践

coder 2024-02-28 原文

我正在寻找重构它的方法:

nuxt.config.js

const headConfig = require('./config/head')
const modulesConfig = require('./config/modules')

const config = {
  head: headConfig,

(...)
}

module.exports = Object.assign({}, config, modulesConfig)

config/head.js

module.exports = {
  meta: [
    {charset: 'utf-8'},
    {name: 'viewport', content: 'width=device-width, initial-scale=1'},
    {name: 'fb:app_id', content: 'xxxx'},
    {hid: 'og:url', name: 'og:url', content: 'xxxx'},
    {hid: 'og:type', name: 'og:type', content: 'website'},
    {hid: 'og:image', name: 'og:image', content: 'xxxx'},
    {hid: 'og:site_name', name: 'og:site_name', content: 'xxxx'},
    {hid: 'keywords', name: 'keywords', content: 'xxxx'}
]
}

我希望能够做的一个例子是自动将“og:url”设置为页面的 url。无需每次都重复。

目前我在我的 Nuxt.js 应用程序的每个页面中都包含了这个:

    {
      hid: 'og:url',
      property: 'og:url',
      content: 'https://website.com' + this.$route.fullPath
    },

我确信有更好的方法可以自动将其设置在某处:/

最佳答案

最好的选择可能是创建一个全局 Mixin :

https://v2.vuejs.org/v2/guide/mixins.html#Global-Mixin

这应该允许您创建一个 head mixin，它将自动导入到每个组件中，因此您可以定义 og:url 一次并让它自动注入(inject)到所有地方。

这是一个如何将其注册为 Nuxt 插件的示例:

/plugins/headMixin.js

import Vue from 'vue'

export default ({ route }) => {
  Vue.mixin({
    head() {
      return {
        meta: [
          {
            hid: `og:url`,
            property: 'og:url',
            content: 'https://www.yoursite.com' + route.fullPath
          }
        ]
      }
    }
  })
}

在 nuxt.config.js 中:

plugins: [
    '~/plugins/headMixin.js'
]

关于vue.js - Nuxt.js SEO 实践，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51810085/

jsNuxt39strongcontentvue.jsseonuxt.js

有关vue.js - Nuxt.js SEO 实践的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  2. 叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2

    导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  4. ruby-on-rails - Rails 中同一个类的多个关联的最佳实践？ - 2

    我认为我的问题最好用一个例子来描述。假设我有一个名为“Thing”的简单模型，它有一些简单数据类型的属性。像...Thing-foo:string-goo:string-bar:int这并不难。数据库表将包含具有这三个属性的三列，我可以使用@thing.foo或@thing.bar之类的东西访问它们。但我要解决的问题是当“foo”或“goo”不再包含在简单数据类型中时会发生什么？假设foo和goo代表相同类型的对象。也就是说，它们都是“Whazit”的实例，只是数据不同。所以现在事情可能看起来像这样......Thing-bar:int但是现在有一个新的模型叫做“Whazit”，看起来

  5. ruby-on-rails - 向 Rails 3 添加 Ruby 扩展方法的最佳实践？ - 2

    我有一个要在我的Rails3项目中使用的数组扩展方法。它应该住在哪里？我有一个应用程序/类，我最初把它放在(array_extensions.rb)中，在我的config/application.rb中我加载路径:config.autoload_paths+=%W(#{Rails.root}/应用程序/类)。但是，当我转到railsconsole时，未加载扩展。是否有一个预定义的位置可以放置我的Rails3扩展方法？或者，一种预先定义的方式来添加它们？我知道Rails有自己的数组扩展方法。我应该将我的添加到active_support/core_ext/array/conversion

  6. Ruby 最佳实践 : working with classes - 2

    参见下面的示例，我想最好使用第二种方法，但第一种也可以。哪种方法最好，使用另一种的后果是什么？classTestdefstartp"started"endtest=Test.newtest.startendclassTest2defstartp"started"endendtest2=Test2.newtest2.start 最佳答案 我肯定会说第二种变体更有意义。第一个不会导致错误，但对象实例化完全过时且毫无意义。外部变量在类的范围内不可见:var="string"classAvar=A.newendputsvar#=>strin

  7. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  8. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  9. ruby - 存储外部 API 的密码 - 最佳实践 - 2

    如果我构建了一个应用程序来访问来自Gmail、Twitter和Facebook的一些数据，并且我希望用户只需输入一次他们的身份验证信息，并且在几天或几周后重置，那会怎样是在Ruby中动态执行此操作的最佳方法吗？我看到很多人只是拥有他们客户/用户凭证的配置文件，如下所示:gmail_account:username:myClientpassword:myClientsPassword这看起来a)非常不安全，b)如果我想为成千上万的用户存储此类信息，它就无法工作。推荐的方法是什么？我希望能够在这些服务之上构建一个界面，因此每次用户进行交易时都必须输入凭据是不可行的。

  10. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

随机推荐