seo 组件 gatsby- 影响布局

如何解决seo 组件 gatsby- 影响布局

我的 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`,{
            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`,{
            name: `twitter:creator`,{
            name: `twitter:title`,{
            name: `twitter: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

解决方法

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

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

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

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