Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
Feb 16, 2023

Conversation

kimyouknow
Copy link
Owner

@kimyouknow kimyouknow commented Feb 16, 2023

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

스크린샷 2023-02-16 오후 5 37 44

  • discord

스크린샷 2023-02-16 오후 5 38 30

  • kakao

스크린샷 2023-02-16 오후 5 39 15

포스트 페이지

  • slack

스크린샷 2023-02-16 오후 5 37 31

  • discord

스크린샷 2023-02-16 오후 5 38 41

  • kakao

스크린샷 2023-02-16 오후 5 39 05

Ref

#30
#29
#27
#15
17fdb75

@kimyouknow kimyouknow merged commit 5e1545e into main Feb 16, 2023
@kimyouknow kimyouknow self-assigned this Feb 16, 2023
@kimyouknow kimyouknow deleted the bug/image-path branch February 16, 2023 08:40
@kimyouknow kimyouknow changed the title seo컴포넌트 리팩토링 및 og:image 에러 수정 SEO 컴포넌트 리팩토링 및 og:image 에러 수정 Feb 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant