SEO 컴포넌트 리팩토링 및 og:image 에러 수정

[kimyouknow]

About

1. og:image태그 경로 설정
2. useStaticImage hooks
3. blog-config 이미지 경로 수정
4. main-og-image 추가

Description

1. og:image태그 경로 설정

The pathname prop will be the relative path of the page so you need to construct an absolute URL with siteUrl.
출처: https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-seo-component/#seo-component

검색 결과 stackoverflow - Open graph can resolve relative url?에서도 og:image의 경로는 상대경로가 아닌 절대경로로 해줘야한다고 한다.

blog-config.js에서 설정한 mainOgImage를 seo컴포넌트에 적용하기 위해 2,3번을 진행했다.

2. useStaticImage hooks

src/common/image컴포넌트 내부에 있는 static 폴더 내부에 원하는 이미지를 가져오는 query를 useStaticImage hooks로 분리했다.

export interface useStaticImageProps {
   src: string
 }

 const useStaticImage = ({ src }: useStaticImageProps) => {
   const assetImages = useStaticQuery<AssetsImageType>(imageQuery)

   const target = useMemo(
     () => assetImages.images.edges.find(({ node }) => src === node.relativePath),
     [assetImages, src],
   )

   return target
 }

 export default useStaticImage

 const imageQuery = graphql`
   query {
     images: allFile(filter: { sourceInstanceName: { eq: "static" } }) {
       edges {
         node {
           relativePath
           extension
           publicURL
           childImageSharp {
             gatsbyImageData(layout: CONSTRAINED)
           }
         }
       }
     }
   }
 `

사용 예시

// SEO
const target = useStaticImage({ src: mainOgImage })
const mainOgImagePath = target?.node.publicURL || ''

// Image
const Image = ({ src, size = 'm', isCircle = false, ...rest }: ImageProps) => {
  const target = useStaticImage({ src })

  if (!target) return null

  const {
    node: { childImageSharp, publicURL },
  } = target

  return <SImage size={size} isCircle={isCircle} image={childImageSharp.gatsbyImageData} alt={publicURL} {...rest} />
}

3. blog-config 이미지 경로 수정

2번에서 image를 static 폴더에서 가져오기 위해 blog-config에서 이미지 경로를 다음과 같이 수정

- profileImage: `static/profile-image.png`,
- mainOgImage: 'static/main-og-image.png',
+ profileImage: `profile-image.png`,
+ mainOgImage: 'main-og-image.png',

cf> favicon

favicon: 'static/pencil.png'의 경우 gatsby-plugin-manifest 플러그인으로 렌더링해서 경로까지 적어줘야 한다.

4. main-og-image 추가

아래 결과 참고

Result

메인페이지

• slack

• discord

• kakao

포스트 페이지

• slack

• discord

• kakao

Ref

#30
#29
#27
#15
17fdb75

• https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-seo-component/#seo-component
• https://github.com/joshbuchea/HEAD#social