如何为我的网站制作图像 link，例如 gatsby.config 中的 https://website.com/image.png？

Question

我想在 SEO 元标记中添加图片 url。但是如何创建图像 link 以添加到元标记中？我正在使用盖茨比。我有 src/img/img1.png 图片，现在我想创建这样的图片 URL

https://website.com/src/img/img1.png

如何在 gatsby-config.js 文件中实现？

Answer 1

大多数 Gatsby 初学者都带有 SEO component，这样您就无需从头开始构建一个。在内部，它使用 <Helmet>，一个将包裹在里面的所有东西放在 <header> 标签中的组件。所以，给定：

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 属性如：

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

此时，您可以在 siteMetadata（在您的 gatsby-config.js 中设置）使用您的图像，或将图像道具传递给您的 SEO 组件：

  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，您有两种不同的解决方法来指向该图片。

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 挂钩获取图像。

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

    image: `/img/img1.png`

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

如何为我的网站制作图像 link，例如 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?

url-routing

gatsby

imageurl

gatsby-image

gatsby-plugin