如何在gatsby.config中为我的网站创建像https://website.com/image.png这样的图像链接? [英] How to make image link for my website like this https://website.com/image.png in gatsby.config?

问题描述

我想在SEO的meta标签中添加图片网址.但是，如何创建图像链接以添加元标记?我正在使用盖茨比.我有 src/img/img1.png 图片，现在我要创建这样的图片网址

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 

如何在gatsby-config.js文件中做到这一点?

How can I do it in gatsby-config.js file?

推荐答案

大多数盖茨比启动器都带有

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

您可以添加og:image属性，例如:

You can add og:image property like:

{
  name: `og:image`,
  content: site.siteMetadata?.image || image,
},

这时，您可以在 siteMetadata (在 gatsby-config.js 中设置)中使用图片，或将图片道具传递给 SEO组件:

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`
  },

或者:

<SEO image="https://website.com/src/img/img1.png" />

---

将图片保存在 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`
  },

然后使用前面提到的方法通过 useStaticQuery 钩子获取图像.

Then using the previous mentioned methods to get your image using useStaticQuery hook.

将图像移动到 /静态文件夹:静态文件夹中的所有内容都将被克隆到具有相同内部结构的/public 文件夹中.因此，您可以使用以下方法直接引用该图像:

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`

假设您的静态文件夹结构为/static/img/img1.png

Assuming that your static folder structure is /static/img/img1.png

这篇关于如何在gatsby.config中为我的网站创建像https://website.com/image.png这样的图像链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！