Руководство по добавлению тегов SEO на статический сайт Gatsby и улучшению рейтинга SEO.

Введение

Поисковая оптимизация (SEO) – это практика повышения доступности веб-сайта для конечных пользователей за счет повышения его видимости в Google, Bing, Yahoo, DuckDuckGo и любых других поисковых системах. Лучшая обнаруживаемость поисковыми системами повысит шансы на увеличение посетителей сайта. Статические веб-сайты, созданные с помощью Gatsby, могут использовать Head API для отображения метаданных HTML во время сборки на стороне сервера, и они будут добавлены к статическим HTML-страницам, создаваемым Gatsby. Это помогает повысить рейтинг вашего сайта и лучше работать в результатах поисковых систем.

В этом уроке мы создадим статический сайт Gatsby, используя стандартную стартовую панель. Мы разработаем компонент SEO, используя Gatsby Head API, чтобы добавить все статические метаданные HTML на все страницы, куда бы мы их ни импортировали.

Далее в этом руководстве мы научимся добавлять метаданные SEO, динамически получая их из WordPress CMS.

Предпосылки

  • На вашем компьютере установлен Node.js версии 18 или выше.
  • Инструмент Gatsby CLI установлен.
  • Visual Studio Code установлен на вашем компьютере.

Создать начальный проект Gatsby по умолчанию

Запустите VS Code и откройте встроенный терминал, который поставляется вместе с ним. Чтобы создать новый проект по умолчанию, используйте команду ниже. Назовите свой проект SeoTagDemo.

npm init gatsby

Давайте кратко рассмотрим файлы и каталоги верхнего уровня.

.
├── node_modules
├── src
├── .gitignore
├── gatsby-config.js
├── package-lock.json
├── package.json
└── README.md

Перейдите в каталог проекта и запустите локальный сервер разработки с

npm run develop

Гэтсби запустит среду разработки с горячей перезагрузкой, доступную по умолчанию в http://localhost:8000..

В этом разделе мы научились настраивать сайт Gatsby на нашем локальном компьютере. В следующем разделе мы добавим компонент SEO на наш сайт с помощью Head API.

Добавить компонент SEO с помощью Head API

По умолчанию Gatsby добавит в проект Head API. Перейти к src/pages/index.js . Экспорт метода с именем Home имеет особое значение, и Gatsby использует этот экспорт для вставки действительных метатегов HTML в раздел Head веб-страницы.

export const Head = () => <title>Home Page</title>

Итак, приведенный выше блок кода устанавливает заголовок страницы. Замените экспорт Head отдельным Seo component, который мы собираемся добавить. Создайте новый компонент папки и добавьте файл Seo.js.

//src/pages/index.js
-export const Head = () => <title>Home Page</title>
+export const Head = () => <Seo />

//src/components/Seo.js
import React from "react"
const Seo = () => {
  return <title>Home Page </title>
}
export default Seo

Не забудьте импортировать новый компонент Seo в index.js. Мы изменим этот компонент Seo и импортируем его в наши шаблоны страниц. Таким образом, мы можем повторно использовать его на сайте.

В файле gatsby-config.js добавьте следующий код, чтобы установить метаданные сайта. Метаданные сайта — это информация, относящаяся к вашему сайту, такая как название сайта, автор и описание. Эти метаданные могут использоваться плагинами и другими частями вашего сайта Gatsby для улучшения SEO и предоставления полезной информации посетителям.

Вот пример того, как установить метаданные сайта в файле gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: "Gatsby Seo demo tutorial",
    description: "Learn how to add SEO metatags using Head API",
    author: "My Name",
    siteUrl: "https://mydomain.example.com",
  },
  plugins: [
    // ...
  ],
};

После добавления объекта siteMetadata в файл конфигурации вы можете получить доступ к этой информации на своем сайте Gatsby, используя язык запросов graphql. Гэтсби предоставил useStaticQuery hook для выполнения graphql query.

//src/components/Seo.js
import React from "react";
import { graphql, useStaticQuery } from "gatsby";
const Seo = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
          description
        }
      }
    }
  `);
  return (
    <>
      <title>{data.site.siteMetadata.title}</title>
      <meta
        name="title"
        content={data.site.siteMetadata.title}
      ></meta>
      <meta
        name="description"
        content={data.site.siteMetadata.description}
      ></meta>
    </>
  );
};
export default Seo;

В приведенном выше коде мы используем хук useStaticQuery для запроса метаданных сайта, а затем отображаем заголовок сайта и описание в метатегах страницы.

Перейдите кlocalhost:8000 в браузере. В Chrome щелкните правой кнопкой мыши окно и откройте DevTools. Выберите Элементы и разверните тег <head></head>. В этом теге вы найдете следующие строки:

<title data-gatsby-head="true">Seo Tag demo tutorial</title>
<meta name="title" content="Seo Tag demo tutorial" data-gatsby-head="true">
<meta name="description" content="Learn how to add SEO metatags using Head API" data-gatsby-head="true">

Вы успешно добавили метаданные сайта на страницы своего сайта. В этом разделе мы добавили SEO компонент для нашего сайта. После добавления компонента мы использовали graphql для получения метаданных сайта из файла конфигурации Gatsby. В следующем разделе мы обновим наш компонент, чтобы он извлекал метаданные сайта из CMS WordPress вместо файла конфигурации.

Исходные метаданные из WordPress CMS

Чтобы получить метаданные сайта из WordPress на сайте Gatsby, вы можете использовать плагин gatsby-source-wordpress. Вот шаги, чтобы начать:

  • Установите плагин gatsby-source-wordpress, выполнив следующую команду в каталоге сайта Gatsby:
npm install gatsby-source-wordpress
  • Добавьте плагин в файл gatsby-config.js и настройте его для получения метаданных сайта. В конфигурации мы указываем плагину получать данные из конечной точки GraphQL вашего сайта WordPress. Вот пример:
module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-wordpress",
      options: {
        url: "https://your-wordpress-site.com/graphql",      
      },
    },
  ],
}
  • Затем измените запрос GraphQL в компонентах Gatsby Seo, чтобы запрашивать данные Site и SiteMetadata. Обновите код, как показано ниже:
//src/components/Seo.js
const Seo = () => {
 const data = useStaticQuery(graphql`
    query {
      site: wp {
        siteMetadata: generalSettings {
          title
          description
        }
      }
    }
  `);
  return (
    <>
      <title>{data.site.siteMetadata.title}</title>
      <meta
        name="title"
        content={data.site.siteMetadata.title}
      ></meta>
      <meta
        name="description"
        content={data.site.siteMetadata.description}
      ></meta>
    </>
  );
};
export default Seo;
}

В этом примере мы выполняем запрос GraphQL для извлечения generalSettings из WordPress, а затем используем его внутри компонента Seo.

Чтобы подключиться к WordPress GraphQL API, необходимо установить плагины WPGatsby и WPGraphQL на ваш сайт WordPress. Я написал еще одну статью с подробным руководством о том, как настроить WordPress и включить GraphQL API.

Заключение

В этом уроке мы узнали, как улучшить SEO статического сайта с помощью Gatsby’s Head API. Мы создали многоразовый компонент SEO и импортировали его в компонент макета нашего сайта или на отдельные страницы. Кроме того, мы узнали, как получать метаданные сайта из экземпляра WordPress с помощью GraphQL.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.