Карты сайтов в безголовом WordPress с помощью Faust.js

В этой статье я расскажу о картах сайта в безголовом WordPress с использованием открытого фреймворка для безголового WordPress — Faust.js.

XML карты сайта

Карта сайта XML — это список URL-адресов, которые вы хотите сделать общедоступными. Он помогает поисковым системам просматривать ваш сайт, предоставляя им точную карту всего вашего содержимого. В карту сайта можно также включить метаданные, которые перечислены в протоколе карты сайта, такие как время последнего изменения страницы, информация о видео и изображениях.

Ниже приведено изображение традиционного URL WordPress XML sitemap. По умолчанию это ваш URL WordPress с добавленным путем /wp-sitemap.xml, и это заложено в ядро WordPress начиная с версии 5 и выше:

Преимущества XML Sitemap

• Более быстрое индексирование: XML-карта сайта будет взаимодействовать с поисковыми системами. Вы можете отправить свою карту сайта в Google Search Console, и это поможет добиться того, что страницы вашего сайта будут индексироваться поисковыми системами гораздо быстрее. Это повышает ваш рейтинг в результатах выдачи страниц поисковых систем.

• Автоматическое уведомление об обновлениях: Google будет получать автоматические уведомления, когда вы публикуете новый контент или изменяете существующий.

• Категоризация вашего контента: Позволяет Google знать, какие страницы относятся к той или иной категории, чтобы не приходилось гадать.

XML Sitemaps в фреймворке Faust.js

Создание и обработка карт сайта могут быть сложными, если вы используете WordPress в архитектуре без головы. К счастью, команда Faust.js в WP Engine создала функцию в рамках фреймворка, которая позволяет работать с ними в рамках одного файла в каталоге pages.

Установка

Первым шагом будет установка фреймворка Faust.js с помощью следующей команды в терминале:

npx create-next-app 
    -e https://github.com/wpengine/faustjs/tree/main 
    --example-path examples/next/getting-started 
    --use-npm 
    my-app
cd my-app

Скопируйте образец шаблона окружения:

cp .env.local.sample .env.local

Подключите свой сайт WordPress:

Перейдите к файлу .env.local в корне вашего проекта и вставьте URL вашего WP в качестве значения:

# Your WordPress site URL
NEXT_PUBLIC_WORDPRESS_URL=https://headlessfw.wpengine.com

Настройка пермалинков и видимости чтения:

Установите пермалинки В WP Admin >> Settings >> Permalinks на: /posts/%postname%/.

Настройки чтения в WP Admin >> Settings >> Reading >>> Search Engine Visibility снимите флажок:

Faust.js

Затем вернитесь к приложению Faust.js и в папке src в корне проекта перейдите в каталог /pages. В директории pages создайте файл и назовите его

В sitemap.xml.tsx, который вы только что создали, скопируйте и вставьте этот блок кода:

import { getSitemapProps } from '@faustjs/next/server';
import { GetServerSidePropsContext } from 'next';

export default function Sitemap() {}

export function getServerSideProps(ctx: GetServerSidePropsContext) {
  return getSitemapProps(ctx, {
    sitemapIndexPath: '/wp-sitemap.xml',
    wpUrl: 'https://buddydemo1.wpengine.com',
    frontendUrl: 'http://localhost:3000',
  });
}

В этом файле в первую очередь происходит импорт свойств sitemap на серверный фреймворк Faust.js, а также импорт контекста свойств на стороне сервера из Next.js.

Далее мы экспортируем функцию по умолчанию, которая представляет собой Sitemap с пустым объектом. После этого в Next.js появляется функция, позволяющая осуществлять рендеринг на стороне сервера. В этой функции мы передаем контекст реквизитов на стороне сервера, а затем возвращаем объект config с реквизитами карты сайта.

Объект config требует свойства sitemapIndexPath со значением пути WordPress sitemap.xml, свойства wpURL со значением URL WordPress и URL фронтенда Faust.js. В данном случае я разрабатываю локально localhost:3000.

Теперь, когда я установил этот файл в каталоге pages в Faust, я могу запустить npm run dev, чтобы запустить сервер dev, и я могу получить динамический доступ к содержимому WordPress на моем сайте Headless. Я в восторге!!! 🎉

Определение страниц Next.js для Sitemaps

Последнее, что нам нужно учесть в нашей карте сайта, это страницы Next.js. Поскольку мы используем Headless WordPress, URL-адреса фронтенда также должны быть в карте сайта. В том же файле sitemap.xml.tsx просто добавьте массив свойств pages и поместите относительные пути Next.js в объекты внутри массива следующим образом:

import { getSitemapProps } from '@faustjs/next/server';
import { GetServerSidePropsContext } from 'next';

export default function Sitemap() {}

export function getServerSideProps(ctx: GetServerSidePropsContext) {
  return getSitemapProps(ctx, {
    sitemapIndexPath: '/wp-sitemap.xml',
    wpUrl: 'https://buddydemo1.wpengine.com',
    frontendUrl: 'http://localhost:3000',
    pages: [
      {
        path: '/about',
        changefreq: 'monthly',
      },
      {
        path: '/',
      },
    ],
  });
}

Запустив снова свой сервер разработки и посетив URL sitemap, я теперь имею содержимое WordPress и содержимое Next.js в faust-pages:

Super Jamstoked!!! ⚡ Одним из многих преимуществ использования фреймворка, такого как Faust.js, является то, что он избавляет разработчика от работы, особенно в Headless WordPress. Такие функции, как карты сайта, должны работать просто из коробки с возможностью учета ваших URL из WordPress и вашего front-end без лишних усилий.

Готово! Что дальше?

Если Faust.js не ваш конек, оставайтесь с нами, я создам еще один пост в блоге по этому поводу, но я создам XML sitemap, используя только Next.js и Headless WordPress!!!