Структурированные данные для SEO с использованием Gatsby или SPA

Question

Здравствуйте. Я заинтересован в добавлении следующих структурированных данных JSON -LD на мой сайт Gatsby. Я пометил React в этом, поскольку ответ в Гэтсби, как правило, очень низкий. Что я хотел бы сделать, это следовать примеру здесь https://developers.google.com/search/docs/guides/intro-structured-data

Как добавить структурированные данные на сайт Gatsby или React?

Я ищу и для решения stati c (т.е. для страницы контактов), и для решения Dynami c (т.е. для страницы рецепта) для автоматического заполнения значений

Answer 1

Лучшие практики для создания и добавления SEO описаны в этой официальной документации Gatsby .

Вы добавляете компонент SEO с шлемом React:

// src/components/SEO.js

const SEO = ({ title, description, image, pathname, article }) => (
  <StaticQuery
    query={query}
    render={({
      site: {
        siteMetadata: {
          defaultTitle,
          titleTemplate,
          defaultDescription,
          siteUrl,
          defaultImage,
          twitterUsername,
        }
      }
    }) => {
      const seo = {
        title: title || defaultTitle,
        description: description || defaultDescription,
        image: `${siteUrl}${image || defaultImage}`,
        url: `${siteUrl}${pathname || '/'}`,
      }
      return ()
    }}
  />
)
export default SEO

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