seo 组件 gatsby - 影响布局

Question

在我的 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

Answer 1

很奇怪，因为我看到的 seo 组件没有 样式或 jsx 或 css 或任何东西。它只是添加元标记的一种方式 对于 SEO.. 有人可以帮忙吗？

嗯，你正在添加 Bootstrap 样式：

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />

尝试删除/评论它，看看它是否会影响布局。组件的其余部分似乎很标准。