Gatsby — Добавление мета-тегов для SSR с помощью react-head / react-helmet не работает на динамически создаваемых страницах

#gatsby

#gatsby

Вопрос:

Я изучал эту проблему уже неделю и все еще в тупике. У меня есть веб-сайт, который использует Gatsby с Prismic, и у меня есть 2 разных типа страниц: статические и динамически создаваемые страницы. Статические могут включать такие страницы, как домашняя страница, страница контактов, страница о нас и т. Д. Динамические могут включать сообщения в блогах, страницы сервисов и т. Д.

Я использовал react-helmet для ввода метаданных на страницы, но с тех пор перешел на использование react-head. Это работает на статических страницах, оно включено в SSR-версию страниц, но не работает для динамических страниц. Я также вставил консоль.войдите в компонент макета, который я использую на всех страницах, и на статических страницах он отображается в терминале, а на динамических страницах — нет.

Моя конфигурация включает следующие плагины:

 plugins: [
    `gatsby-plugin-catch-links`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-resolve-src`,
    `gatsby-plugin-remove-trailing-slashes`,
    `gatsby-plugin-emotion`,
    `gatsby-plugin-preload-fonts`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: "gatsby-source-prismic-graphql",
      options: {
        repositoryName: "<redacted>",
        linkResolver: () => (post) => `/${post.uid}`,
        omitPrismicScript: true,
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `sample`,
        short_name: `sample`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `sample-notext.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-107057776-1",
        head: true,
      },
    },
    {
      resolve: "gatsby-plugin-iltorb",
      options: {
        extensions: ["css", "html", "js", "svg", "png", "ttf"],
      },
    },
    `gatsby-plugin-preact`,
    {
      resolve: `gatsby-plugin-html-minifier`,
      options: {
        minifyCSS: true,
        minifyJS: true,
        minifyURLs: true,
        removeEmptyAttributes: true,
        removeComments: true,
      },
    },
    {
      resolve: "gatsby-plugin-html-attributes",
      options: {
        lang: "en",
      },
    },
    {
      resolve: `gatsby-plugin-nprogress`,
      options: {
        color: "#dd8d83",
        showSpinner: false,
        minimum: 0.4,
      },
    },
    `gatsby-plugin-react-head`,
  ],
  

Страницы (как динамические, так и статические) обычно выглядят так:

 <Layout
    meta={{
        title: `${post.post_title[0].text} | Not Just a Box Events`,
        description: meta.description,
        image: blog.page_hero_image.url,
    }}
>
    {children}
</Layout>
  

и макет такой:

 <LayoutContainer className="div">
    <div className="Layout">
        <header>
            <Meta
                name="p:domain_verify"
                content="1228088838575c68d8e15366463bb836"
            />
            <Link rel="preconnect" href="https://images.prismic.io" />
            <Title>{meta.title}</Title>
            <Meta name="title" content={meta.title} />
            <Meta name="description" content={meta.description} />
            <Meta property="og:type" content="website" />
            <Meta
                property="og:url"
                content=""
            />
            <Meta property="og:title" content={meta.title} />
            <Meta
                property="og:description"
                content={meta.description}
            />
            <Meta property="og:image" content={meta.image} />
            <Meta
                property="twitter:card"
                content="summary_large_image"
            />
            <Meta
                property="twitter:url"
                content=""
            />
            <Meta property="twitter:title" content={meta.title} />
            <Meta
                property="twitter:description"
                content={meta.description}
            />
            <Meta property="twitter:image" content={meta.imagge} />
            {headerChildren}
        </header>
        <main className="Layout__content">{children}</main>
        <Footer data={footerInfo} />
    </div>
</LayoutContainer>
  

Когда я просматриваю источник страницы для динамических страниц, я не вижу метатегов, которые пытаюсь сгенерировать. Я вижу только это:

 <html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="theme-color" content="#663399"/><meta name="generator" content="Gatsby 2.21.1"/>
  

а затем некоторый код CSS и т. Д. Ни один из метатегов, которые я хотел.

Пожалуйста, помогите

Ответ №1:

Это намного проще, чем то, что вы пробовали. Просто используйте <SEO> компонент (встроенный) в любом стартере Gatsby, например:

 <Layout>
<SEO description={meta.description} 
     title={`${post.post_title[0].text} | Not Just a Box Events`} 
     image={blog.page_hero_image.url} />
    {children}
</Layout>
  

Обратите внимание, что вам может потребоваться адаптировать компонент для получения image as a prop .

Этот подход будет работать как для статических, так и для динамических страниц. SSR не должен влиять на SEO.

Комментарии:

1. По сути, этот SEO-компонент по-прежнему использует react-helmet. Я до сих пор не понимаю, почему, даже если я использовал react-helmet, он не работает

2. Что вы имеете в виду под «не работает»? Ваш SEO компонент пуст? Как вы это используете?