#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
компонент пуст? Как вы это используете?