问题
I want to add image url in meta tag for SEO. But how can I create image link to add in meta tag? I am using gatsby. I have src/img/img1.png image and now I want to create image URLs like this
https://website.com/src/img/img1.png
How can I do it in gatsby-config.js file?
回答1:
Most of Gatsby starters comes with a SEO component, that saves you to build one from scratch. Internally, it uses <Helmet>
, a component that puts everything that is wrapped inside, in the <header>
tag. So, given:
import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
function SEO({ description, lang, meta, title, image }) {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
author
image
}
}
}
`
)
const metaDescription = description || site.siteMetadata.description
const defaultTitle = site.siteMetadata?.title
return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
meta={[
{
name: `description`,
content: metaDescription,
},
{
property: `og:title`,
content: title,
},
{
property: `og:description`,
content: metaDescription,
},
{
property: `og:type`,
content: `website`,
},
{
name: `twitter:card`,
content: `summary`,
},
{
name: `twitter:creator`,
content: site.siteMetadata?.author || ``,
},
{
name: `twitter:title`,
content: title,
},
{
name: `twitter:description`,
content: metaDescription,
},
].concat(meta)}
/>
)
}
SEO.defaultProps = {
lang: `en`,
meta: [],
description: ``,
}
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
}
export default SEO
You can add og:image property like:
{
name: `og:image`,
content: site.siteMetadata?.image || image,
},
At this point, you can use your image at the siteMetadata
(set in your gatsby-config.js
) or pass an image prop to your SEO
component:
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
image: `https://website.com/src/img/img1.png`
},
Or:
<SEO image="https://website.com/src/img/img1.png" />
Having your image at src/img/img1.png
, your have two different workarounds to point to that image.
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
image: `${__dirname}/src/img/img1.png`
},
Then using the previous mentioned methods to get your image using useStaticQuery
hook.
Moving your image to /static folder: everything that is inside the static folder will be cloned to /public
folder with the same internal structure. So, you can refer to that image directly using:
image: `/img/img1.png`
Assuming that your static folder structure is /static/img/img1.png
来源:https://stackoverflow.com/questions/65776334/how-to-make-image-link-for-my-website-like-this-https-website-com-image-png-in