在vuejs标签上放置Microdata属性可以吗？

Question

在我们的站点中，我们有用vuejs构建的产品细节页面，其中包括一些非标准的HTML元素。我们有以下方法来显示产品的平均评级

<rating :stars="5"
        :rating="@Model.Rating"
        size="'large'"></rating>

Vuejs然后在浏览器中转换上面的标记，以显示许多星型图标，为浏览器生成完全不同的HTML标记。我们需要添加对Schema.org的支持。将itemprop="ratingValue"属性添加到上面的元素可以吗?例如：

<rating :stars="5"
        :rating="@Model.Rating"
        size="'large'"
        itemprop="@Model.Rating"></rating>

还是Microdata要求将属性放在标准的HTML元素上？

Answer 1

看看https://ssr.vuejs.org/en/

请注意，到目前为止，Google和Bing可以索引同步JavaScript应用程序。同步是这里的关键词。如果您的应用程序从加载旋转器开始，然后通过Ajax获取内容，爬虫将不会等待您完成。这意味着，如果在SEO很重要的页面上异步获取内容，则可能需要进行SSR。

如果您在内容服务器端呈现您的schema.org标记，那么如果包含您标记的内容是在API请求或其他异步操作之后呈现的，那么搜索引擎将无法看到您的标记。

注意：itemprop="@Model.Rating"可能不会做您想做的事情，您可能想要:itemprop="@Model.Rating"，或者您将得到文本@Model.Rating作为itemprop的值。