seo component gatsby- effecting layout - seo

Question

having this very bizarre problem with my gatsby project where the SEO component (quite similar to the default on suggested in docs) is effecting my page layout. no matter where i put the SEO component (inside or outside the layout wrapper component my navbar seems to be effected... 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? here is my page layout (using basic react context and seo compoennt here to inject meta deatail)
<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>
and then here is the way my seo compoennts is structured. have NO idea what could be causing this!
/**
* 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?
Well, you are adding Bootstrap styles in:
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
Try removing/commenting it to see if it affects the layout. The rest of the component seems quite standard.