如何将异步JSON + LD结构化数据添加到Nuxt.js Web应用程序

为确保内容易于索引并以丰富的摘要显示,我们使用Google的JSON + LD结构化数据。

大多数以内容为导向的网站(例如食谱网站或新闻网站)都使用schema.org词汇表,但是您应依赖developers.google.com上的文档来了解Google搜索的行为,而不是schema.org文档。

在WordPress上运行的网站默认内置SEO并输出结构化数据,因此大多数博客甚至都不知道schema.org,更不用说处理它了。 作为自定义网站的开发人员,您需要确保至少可以跟上该要求。

服务器端结构化数据交付

Nuxt.js是用于使用服务器端呈现(SSR),代码拆分,静态生成等功能创建Vue.js应用程序的最小框架。 如果您正在使用Vue.js进行开发,但不熟悉Nuxt.js,我敦促您检查一下它,因为它将大大加快开发速度并标准化应用程序的结构。

它充满活力的生态系统已经提供了库,您可以将其插入您的应用程序以允许结构化数据,但是我喜欢负责我们自己的源代码。 因此,此处将不使用任何第三方库。

以下代码段对已经熟悉Nuxt.js结构的用户非常有用:

   
导出默认值{
data(){
返回{
结构化数据:{
“ @context”:“ http://schema.org”,
“ @type”:“食谱”,
//更多结构化数据...
},
}
},
head(){
返回{
__dangerouslyDisableSanitizers:['script'],
脚本:[{innerHTML:JSON.stringify(this.structuredData),类型:'application / ld + json'}]
}
},
异步asyncData(context){
//在服务器端预取并返回配方数据。
}
}

片段说明

data()内部,我们定义了要在结构化数据块中打印的所有值。 万一您需要使用从数据库后端动态获取的数据来提供结构化数据对象,则需要将该对象放置在asyncData()本身而不是data()

Nuxt.js有一个非常方便的方法,可以借助head()将元数据注入到页面的head部分。 这正是我们的结构化数据块所属的地方。 我们通过返回一个strict字段来创建脚本标签,该字段包含内部HTML以及带有已转换为JSON字符串的structuralData值。 确保声明类型为application/ld+json的脚本。

默认情况下,我们将获取经过清理的HTML,这是__dangerouslyDisableSanitizers: ['script']可以防止的。 否则,内部HTML内容将包含被转换为“”的引号。 这不是Google能够解析的内容。

结论

现在,您可以确保自己的内容易于Google的抓取工具阅读,并在其搜索结果中以丰富的摘要形式显示。