seo Question posted in
Some basic information to get you started with this can be found here.

Implement yoast seo in vue.js

How can I implement yoast seo in vue.js?
I try to search an information in google but I could not found anything related. Do anyone have recommend?

Tags:

3

Answers


  1. 0

    You will need to hook the WordPress REST API into your Vue.js app. Once you have the Yoast plugin installed, you can use a plugin such as this one in order to get the SEO data you require, or create your own endpoints for the queries that you need.

    Login or Signup to reply.
  2. 0

    it’s a quite complex topic. You either need an SSR setup (e.g. using Nuxt.js) or (what’s actually better) you use either this theme:

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

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

    or this:

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

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

    The latter one is made by myself due to problems coming with Nuxt.js (window object, keep-alive not working, extra node.js server, not being able to use all the PHP templates). At the time I’ve started working on it the bucky355 theme didn’t exist but it’s quite similar to my. Even though I would consider my theme as more simple to use.

    Login or Signup to reply.
  3. 0

    You can use vue-yoast components:

    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search