1

如何在 vue.js 中实现 yoast seo？我尝试在谷歌中搜索信息，但找不到任何相关信息。有人有推荐吗？

4

3 回答 3

1

您需要将Wordpress REST API挂接到您的 Vue.js 应用程序中。一旦你安装了 Yoast 插件，你就可以使用这样的插件来获取你需要的 SEO 数据，或者为你需要的查询创建自己的端点。

于 2018-02-20T15:02:05.163 回答
1

这是一个相当复杂的话题。你要么需要一个 SSR 设置（例如使用 Nuxt.js），要么（实际上更好）你使用这个主题：

http://vue-wordpress-demo.bshiluk.com

https://github.com/bucky355/vue-wordpress

或这个：

https://wue-theme.tech-nomad.de

https://github.com/Tech-Nomad/wue-theme

后一个是我自己制作的，因为 Nuxt.js 出现问题（窗口对象，keep-alive 不起作用，额外的 node.js 服务器，无法使用所有 PHP 模板）。在我开始研究它的时候，bucky355 主题并不存在，但它与我的非常相似。尽管我认为我的主题更易于使用。

于 2019-05-30T19:53:34.073 回答
0

您可以使用vue-yoast组件：

<template>
  <div id="app">
    <label>Title</label>
    <input v-model="metaTitle" />

    <label>Meta Description</label>
    <input v-model="metaDescription" />

    <label>Description</label>
    <input v-model="description" />

    <label>Focus Keyword</label>
    <input v-model="focusKeyword" />

    <snippet-preview
      :title="metaTitle"
      :description="metaDescription"
      :url="url"
      baseUrl="https://my-site.com/"
      @update:titleWidth="(value) => titleWidth = value"
      @update:titleLengthPercent="(value) => titleLengthPercent = value"
      @update:descriptionLengthPercent="(value) => descriptionLengthPercent = value" />

    <content-assessor
      :title="metaTitle"
      :titleWidth="titleWidth"
      :description="metaDescription"
      :url="url"
      :text="description"
      :locale="locale"
      :resultFilter="assessorResultFilter" />

    <seo-assessor
      :keyword="focusKeyword"
      :title="metaTitle"
      :titleWidth="titleWidth"
      :description="metaDescription"
      :url="url"
      :text="description"
      :locale="locale"
      :resultFilter="assessorResultFilter" />
  </div>
</template>

<script>
import { SnippetPreview, ContentAssessor, SeoAssessor } from 'vue-yoast'
import 'vue-yoast/dist/vue-yoast.css'
export default {
  name: 'App',
  components: {
    ContentAssessor,
    SeoAssessor,
    SnippetPreview
  },
  data () {
    return {
      focusKeyword: 'one',
      metaTitle: 'Hello!',
      metaDescription: 'The short description',
      url: 'page/1',
      description: '<h2>Here is subtitle!</h2> and some contents in HTML',
      titleWidth: 0,
      titleLengthPercent: 0,
      descriptionLengthPercent: 0,
      translations: null,
      locale: 'en_US'
    }
  },
  methods: {
    assessorResultFilter (value) {
      return value
    }
  }
}
</script>

<style>
#app {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}
label {
  display: block;
  margin: 0;
  padding: 0;
}
.vue-yoast {
  margin-bottom: 10px;
}
</style>
于 2021-06-02T15:39:55.373 回答