我的 gatsby 项目有这个非常奇怪的问题，其中 SEO 组件（与文档中建议的默认值非常相似）正在影响我的页面布局。无论我将 SEO 组件放在哪里（在布局包装器组件内部或外部，我的导航栏似乎都受到了影响......非常奇怪，因为我所看到的 seo 组件没有样式或 jsx 或 css 或任何东西。它只是一种方式为 SEO 添加元标记 .. 有人可以帮忙吗？这是我的页面布局（在这里使用基本的反应上下文和 seo 组件来注入元数据）
<NavActive.Provider value={active}>
<SEO image={logo} />
<Layout active={active} setActive={setActive}>
<div className={`${active&&'body-active'}`}>
<Banner />
<Column />
<Paragraph text={text} header/>
<Blackbar />
<Paragraph text={text} />
<Blackbar button />
<Split />
<div className='c'>
<Blackbar />
</div>
</div>
</Layout>
</NavActive.Provider>
然后这是我的 seo 组件的结构方式。不知道是什么原因造成的！
/**
* SEO component that queries for data with
* Gatsby's useStaticQuery React hook
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useLocation } from "@reach/router"
import { useStaticQuery, graphql } from "gatsby"
function SEO({ description, lang, meta, image, title }) {
const { pathname } = useLocation()
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
author
image
url
}
}
}
`
)
const seo = {
title: title || "Orcawise - Start a willing conversation",
description: site.siteMetadata.description,
image: image || `${site.siteMetadata.url}${site.siteMetadata.image}`,
url: `${site.siteMetadata.url}${pathname}`,
}
return (
<>
<Helmet>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
{/* <meta property="og:image" content={seo.image} />
<meta property="og:url" content={seo.url} />
<meta property="twitter:image" content={seo.image} />
<meta property="og:description" content={seo.description} />
<meta name="author" content={seo.author} /> */}
</Helmet>
<Helmet
htmlAttributes={{
lang,
}}
title={seo.title}
titleTemplate={`%s | ${seo.title}`}
meta={[
{
property: `og:title`,
content: seo.title,
},
{
name: `description`,
content: seo.description,
},
{
name: `author`,
content: seo.author,
},
{
property: `og:description`,
content: seo.description,
},
{
property: `og:url`,
content: seo.url,
},
{
property: `og:image`,
content: seo.image,
},
{
property: `og:type`,
content: `website`,
},
{
name: `twitter:card`,
content: `summary_large_image`,
},
{
name: `twitter:image`,
content: seo.image,
},
{
name: `twitter:creator`,
content: seo.author,
},
{
name: `twitter:title`,
content: seo.title,
},
{
name: `twitter:description`,
content: seo.description,
},
].concat(meta)}
/>
</>
)
}
SEO.defaultProps = {
lang: `en`,
meta: [],
description: ``,
image: null,
url: ``,
}
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
image: PropTypes.string,
url: PropTypes.string,
}
export default SEO