Join
IceSlam
@iceslam
VueJS
July 29, 2020

SEO-оптимизация проекта на Vue/Nuxt с использованием WordPress REST API

WordPress и VueJS/NuxtJS - инструкция по SEO

Этот туториал очень просто демонстрирует, как можно было бы использовать Yoast Seo Plugin для WordPress, чтобы получить SEO-заголовок и Meta-данные во фронтенд VueJS/NuxtJS через WordPress REST API.

В этом пазле несколько кусочков и я постараюсь как можно понятнее, не занимая много времени, объяснить каждый кусочек, в достаточных, не очень трудоемких деталях.

Я создал простейший пример, чтобы продемонстрировать, как это работает, но вам понадобится гораздо больше, чтобы все это работало гладко в production-версии вашего проекта, про это я кратко коснусь в конце.

Мы пройдем через следующие шаги:

  • Установим VueJS (NuxtJS) фронтенда для отображения отдельных постов
  • Настроим WordPress API, чтобы получать данные поста через эндпоинт RESTful API
  • Добавим Yoast SEO плагин в этот эндпоинт
  • Подключим фронтенд VueJS к API чтобы получить данные поста и SEO мета-дату

В этом туториале предполагается следующее:

  • Промежуточное знание разработки WordPress (PHP)
  • Понимание разработки Javascript и некоторые моменты из того, что с этим связано: NPM и т. д
  • Небольшое знакомство с SEO-плагином Yoast для WordPress
  • Интерес к использованию VueJS

Установим VueJS (NuxtJS) фронтенда для отображения отдельных постов

Выберите каталог на вашем компьютере и создайте новый nuxt проект вот так:

npx create-nuxt-app <project-name>

Следуйте инструкциям и настройте его, как вы хотите — я пошел с NPM без Yarn, без проверки на ошибки, без тестов.

Выполните следующие действия, чтобы увидеть свой сайт на: http://localhost:3000

npm run dev

И вуаля - вы увидите, как работает ваш замечательный новый проект!

Страница по умолчанию после установки и запуска проекта на NuxJS

После этого вам нужно будет перейти в каталог “pages” и создать новую папку под названием “post”. Внутри этой папки создайте два файла: index.vue и _id.vue.

Индексный файл будет использоваться для отображения страницы списка постов, которые мы не будем рассматривать в этом учебнике, и _id.vue будет использоваться для отображения отдельных постов.

В ' _id.vue ' теперь добавьте следующий код:

<template>
  <section class="container">
    <div>
      <logo/>
      <h1 class="title">
        Static Post Title
      </h1>
      <span class="content">
        Static Post Content
      </span>
    </div>
  </section>
</template>
<script>
  export default {}
</script>
<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}
</style>

Затем посетите эту страницу: http://localhost:3000/post/1

И мы получаем прекрасный маленький шаблон поста, показывающий одни и те же статические данные снова и снова, независимо от того, какой идентификатор вводится в URL-адрес.

Наша статичная страница поста

Далее мы настроим WordPress API, который подгружает данные поста

Я устанавливаю WP локально через Docker, но это полностью ваш выбор, как вы хотите выполнить установку. После того, как вы настроили сайт, мы работаем с WordPress Rest API для обслуживания данных поста — с некоторыми дополнительными метаданными SEO с помощью SEO-плагина Yoast.

WordPress по умолчанию предоставляет конечную точку API для постов.

Вы можете посетить адрес: http://localhost/wp-json/wp/v2/posts/POST_ID

Мой адрес выглядит так: http://devapi.seotest.com:20080/wp-json/wp/v2/posts/1

Это приведет к ответу, который выглядит примерно следующим образом:

{  
   "id":1,
   "date":"2019-01-03T09:54:21",
   "date_gmt":"2019-01-03T09:54:21",
   "guid":{  
      "rendered":"http://devapi.seotest.com:20080/?p=1"
   },
   "modified":"2019-01-03T09:54:21",
   "modified_gmt":"2019-01-03T09:54:21",
   "slug":"test-post-seo",
   "status":"publish",
   "type":"post",
   "link":"http://devapi.seotest.com:20080/test-post-seo/",
   "title":{  
      "rendered":"My test Post for SEO"
   },
   "content":{  
      "rendered":"<p>My test post main body content &#8211; ain&#8217;t that nice!</p>\n",
      "protected":false
   }........

Вот так! У вас есть настройка конечной точки API, которая возвращает данные поста, и вам даже не нужно было писать какой-либо код!

Добавим SEO-данные для этих постов

Следующая часть также довольно прямолинейна. Нужно добавить seo-метаданные Yoast к этому ответу.

Перво - наперво - посетите страницу плагинов и установите плагин Yoast SEO

Я собираюсь сосредоточиться только на названии и мета-описании, чтобы этот пост не стал слишком длинным, но остальные поля следуют очень похожей схеме.

Добавьте следующий код в свои functions.php:

add_action( 'rest_api_init', 'slug_register_yoast_seo_meta' );

function slug_register_yoast_seo_meta() {
    register_rest_field( 'post',
        '_yoast_wpseo_title',
        array(
            'get_callback'    => 'get_seo_meta_field',
            'update_callback' => null,
            'schema'          => null,
        )
    );
    register_rest_field( 'post',
        '_yoast_wpseo_metadesc',
        array(
            'get_callback'    => 'get_seo_meta_field',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}

function get_seo_meta_field( $object, $field_name, $request ) {
    return get_post_meta( $object[ 'id' ], $field_name, true );
}

Это приводит к следующему:

Хуки в функции 'rest_api_init' регистрируют два пользовательских поля. Используем 'rest_api_init' вместо ' init’, чтобы этот код выполнялся только на запросах API, а не на обычных постах...

Указываем функцию обратного вызова для извлечения двух полей как ' get_seo_meta_field’, которая просто принимает идентификатор объекта (в данном случае post) и имя поля (либо ‘_yoast_wpseo_title’, либо ‘_yoast_wpseo_metadesc’) и возвращает значение этого мета-поля поста.

Замечательно! Теперь у нас есть конечная точка API для постов, которая возвращает метаданные Yoast SEO!

Полное описание того, как добавить дополнительные мета-поля в конечные точки, вы можете найти здесь: https://v2.wp-api.org/extending/modifying

Подключите приложение VueJS для извлечения данных поста

Это последний шаг — нам нужно сказать фронтенду Vue, чтобы он извлекал данные поста для каждого поста из API WordPress. Мы делаем это следующим образом:

Мы собираемся использовать Axios для этого, поэтому в вашем _id.vue добавьте следующее в теги <script>.

<script>
import axios from 'axios'export default {
  
  asyncData ({ params }) {
    return axios.get(`http://devapi.seotest.com:20080/test-post-seo/wp-json/wp/v2/posts/${params.id}`)
      .then(response => {
        return { post: response.data }
      })
      .catch((error) => {
        return { error: error }
      })
  },
  data () {
    return {
      post: {},
      error: []
    }
  }
}
</script>

Что здесь будет происходить?

  • Мы импортируем Axios в файл
  • Мы используем метод Nuxt ‘asyncData ' для выполнения нашего запроса Axios
  • Мы используем параметр динамического идентификатора, чтобы получать разные сообщения, посещая разные URL-адреса
  • Мы добавляем возвращаемые POST-данные в объект ‘пост’, что мы создали

Теперь мы можем отображать динамический заголовок и динамическое содержимое для нашего поста примерно так:

<template>
  <section class="container">
    <div>
      <h1 class="title">
        {{post.title.rendered}}
      </h1>
      <span v-html="post.content.rendered"></span>
    </div>
  </section>
</template>

Пожалуйста, обратите внимание на:

v-html=”post.content.rendered”

Это форматирует HTML разметку возвращенную красиво и мы должны увидеть что-то вроде следующего:

Ура! Мы получили заголовок!

Конечно, сам контент будет зависеть от того, что вы помещаете в посте, созданное на стороне WordPress, а идентификатор в строке URL будет зависеть от идентификатора этого поста.

Далее мы хотим включить SEO данные следующим образом:

<script>
import axios from 'axios'export default {
  head () {
    return {
      title: this.post._yoast_wpseo_title,
      meta: [
        { hid: 'description', id: 'description', name: 'description', content: this.post._yoast_wpseo_metadesc }
      ]
    }
  },
  asyncData ({ params }) {

Полный код для файла ниже:

<template>
  <section class="container">
    <div>
      <h1 class="title">
        {{post.title.rendered}}
      </h1>
      <span v-html="post.content.rendered"></span>
    </div>
  </section>
</template>
<script>
import axios from 'axios'export default {
  head () {
    return {
      title: this.post._yoast_wpseo_title,
      meta: [
        { hid: 'description', id: 'description', name: 'description', content: this.post._yoast_wpseo_metadesc }
      ]
    }
  },
  asyncData ({ params }) {
    return axios.get(`http://devapi.go2africa.com:20080/wp-json/wp/v2/posts/${params.id}`)
      .then(response => {
        return { post: response.data }
      })
      .catch((error) => {
        return { error: error }
      })
  },
  data () {
    return {
      post: {},
      error: []
    }
  }
}
</script>
<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}
.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}
.links {
  padding-top: 15px;
}
</style>

Это было сделано самым простым из возможных способов - просто чтобы проиллюстрировать, как связать все это вместе. Я упоминаю ниже, как мы на самом деле сделали совсем немного больше, чтобы заставить это работать в production.

Заключение

Ну вот, теперь у тебя есть Vue.JS фронтенд с SEO, предоставляемым SEO-плагином Yoast из бэкенда WordPress!

Вот скриншот нашего примера:

Вы можете увидеть SEO-заголовок и мета-описание, проходящие через вкладку и консоль!

Переведено: IceSlam

Оригинал: NONA-WEB

IceSlam
July 29, 2020, 21:45
0 views
0 reactions