seo 组件 gatsby- 影响布局

Question

我的 gatsby 项目遇到了这个非常奇怪的问题，其中 SEO 组件(与文档中建议的默认组件非常相似)正在影响我的页面布局。无论我将 SEO 组件放在哪里(在布局包装器组件的内部或外部，我的导航栏似乎都受到了影响……非常奇怪，因为我所看到的 seo 组件没有样式或 jsx 或 css 或任何东西。这只是一种方式为 SEO 添加元标记 .. 有人可以帮忙吗？这是我的页面布局(使用基本的 react 上下文和 seo 组件在这里注入(inject)元细节)

<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

very strange because the seo component from what i can see has no stylings or jsx or css or anything. its just a way to add meta tags for SEO.. can someone help?

好吧，您正在添加 Bootstrap 样式:

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

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