GatsbyJS에서 Twitter 카드 이미지에 머리말 이미지 사용

와 같이 Gatsby로 Twitter 카드를 자동으로 생성하는 몇 가지 훌륭한 패키지가 있지만 일부 기사는 사용자 정의 썸네일 이미지로 더 성공적일 수 있습니다. 예를 들어 이미지가 없는 경우:

이미지 포함:



이 튜토리얼에서는 Gatsby 블로그에 Twitter 카드의 썸네일 이미지를 추가하는 간단한 방법을 보여줍니다.

설정

아래에 설명된 방법에는 react-helmet , gatsby-source-filesystem , gatsby-transformer-remark , gatsby-remark-images 및 gatsby-transformer-sharp 와 같은 몇 가지 패키지가 필요합니다. 다행히 gatsby-starter-blog 템플릿은 이러한 모든 패키지가 사전 설치 및 구성되어 제공되므로 이 템플릿을 사용하여 설명하겠습니다. 먼저 설명서에 따라 gatsby new를 사용하여 새 저장소를 설정합니다.

gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

모든 것이 이미 설정되고 구성되었으므로 시작하기 위해 수행해야 할 다른 작업이 없습니다.

이미지 및 머리말 속성 추가

우리의 목표는 게시물 중 하나의 머리말에 이미지를 정의하고 해당 데이터를 blog-post 템플릿으로 전달하고 마지막으로 적절한 메타 태그에 추가될 SEO 구성 요소로 전달하는 것입니다.
gatsby-starter-blog는 content/blog 폴더에 블로그 기사를 저장합니다. 이 시점에서 hello-world 폴더에 이미지를 추가하거나 템플릿과 함께 제공되는 salty_egg.jpg 이미지를 사용할 수 있습니다.


content/blog/hello-world/index.md를 열고 이미지 파일을 가리키는 문자열이 있는 thumbnail라는 새 머리말 속성을 추가합니다.

---
title: "Hello World"
date: "2015-05-01T22:12:03.284Z"
description: "Hello World"
thumbnail: './salty_egg.jpg'
---

블로그 템플릿의 썸네일 이미지에 액세스

다음으로 blog-post 템플릿 내의 썸네일 이미지에 액세스하여 SEO 구성 요소에 전달해야 합니다. src/templates/blog-post.js로 이동하여 파일 맨 아래에 있는 pageQuery 변수까지 아래로 스크롤합니다. 머리말 데이터 title , date 및 description 를 가져오고 있습니다. thumbnail 속성을 가져오려면 description 바로 아래에 다음을 추가해야 합니다.

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        thumbnail {
          childImageSharp {
            sizes(maxWidth: 600) {
              ...GatsbyImageSharpSizes
            }
          }
        }
      }
    }
  }
`;

Sharp은 이미지를 처리하고 maxWidth에 전달한 sizes보다 작은 다양한 크기를 제공합니다.

그런 다음 동일한 파일 내의 BlogPostTemplate 구성 요소로 이동합니다. 우리의 목표는 thumbnail를 이 템플릿 내의 SEO 구성 요소에 전달하는 것이므로 먼저 thumbnail 데이터 및 markdownRemark 개체에서 frontmatter 속성을 가져옵니다.

...
const BlogPostTemplate = ({ data, pageContext, location }) => {
  const post = data.markdownRemark
  const siteTitle = data.site.siteMetadata.title
  const { previous, next } = pageContext
  const thumbnail = post.frontmatter.thumbnail // <---
  ...
}

그런 다음 썸네일을 SEO 및 title 소품 아래의 description 구성 요소로 전달합니다.

<SEO
  title={post.frontmatter.title}
  description={post.frontmatter.description || post.excerpt}
  thumbnail={thumbnail}
/>

메타 태그에 썸네일 전달

마지막 단계는 meta 구성 요소 내의 twitter seo 태그에 이미지를 설정하는 것입니다. 축소판 속성을 열고src/components/seo.js 가져옵니다.

const SEO = ({ description, lang, meta, title, thumbnail }) => {

twitter:image 메타 태그에는 축소판 이미지의 전체 URL이 필요합니다. src 객체에서 다음과 같은 이미지thumbnail를 얻을 수 있습니다.


src 문자열을 저장할 변수를 생성하되 해당 기사에 대한 thumbnail 문자열도 실제로 있는지 확인하십시오. 그렇지 않으면 Gatsbyjs는 undefined 개체의 childImageSharp를 찾기 때문에 축소판이 없는 기사에서 충돌이 발생합니다.

const imageSrc = thumbnail && thumbnail.childImageSharp.sizes.src;

이제 사이트에서 이미지의 위치를 ​​찾았으므로 imageSrc 문자열에 전체 도메인을 추가하여 이미지의 전체 URL을 생성해야 합니다. 창 개체에서 도메인 원본을 가져올 수 있습니다: window.location.origin . 그러나 Gatsby 빌드는 해당 환경에서 window가 undefined인 경우 종종 오류를 발생시킵니다. 따라서 우리는 window 가 undefined 이 아닌지 빠르게 확인해야 합니다.

let origin = "";
if (typeof window !== "undefined") {
  origin = window.location.origin;
}

다음으로 두 변수를 연결하여 이미지의 전체 URL을 만들 수 있습니다.

const image = origin + imageSrc;

마지막으로 위에서 정의한 twitter:image 변수를 가리키는 content 속성을 사용하여 twitter 메타 태그 image 를 태그 배열에 추가합니다.

{
  name: `twitter:image`,
  content: image,
},

결론

이제 블로그 게시물에 맞춤 미리보기 이미지를 추가하고 Twitter에서 링크를 공유하면 미리보기 이미지가 카드와 함께 표시됩니다. 또한 를 사용하여 카드가 어떻게 표시되는지 테스트할 수 있습니다.