thumbnail
9_7. OG 태그 디버깅 방법
nuxt.js
2023.03.06.
  • vue 프로젝트 저장소
  • github nuxt-shopping 배포 저장소 url
  • github nuxt-shopping fake API 서버 저장소
  • 해봐야될거 + 문제점
    1. 나중에 아임포트 결재모듈도 붙여보기
    2. 문제점 1: 새로고침하면 장바구니에 담아놓은 목록들이 다 사라짐
      • 해결책
        1. 브라우저 레벨에서 해결: 로컬스토리지, 세션스토리지, 쿠키
        2. 카트에 담았을 때, 해당 상품 데이터를 서버로 전송
          • 카트 목록 페이지 들어갈 때마다 계정별로 해당 목록을 불러오는 방법
    3. 문제점 2: 이미 카트에 담은 목록 또 담을 수 있음
      • json-server /carts POST API 알아서 같은 값이면 500 에러 뱉어줌
  1. 카카오 OG 태그 디버깅 도구
  2. 페이스북 OG 태그 디버깅 도구

9_7. OG 태그 디버깅 방법

OG 태그 캐싱에 대해 알아보도록 하겠다.

20230306 161511

아까 description을 meta 태그에 정의해 배포했지만, 위와 같이 description은 프리뷰에 제대로 노출되지 않았다.
이는 카카오톡 내부에 해당 내용이 캐싱돼서 이전 값들이 계속해서 보여지기 때문에 그렇다.

아마 OG Tag를 작업하다보면 충분히 이런 현상이 있을텐데, 이런 부분에 대해 어떻게 대처할 수 있는지 알아보도록 하겠다.

20230306 171447

위와 같이 공유하고자하는 페이지 주소를 입력하고 캐시 초기화를 클릭하면

20230306 171529

위와 같이 기존에 들고왔던 스크랩 정보가 삭제된다.

20230306 171659

위에서 디버깅해서 캐시를 비우면된다.

20230306 171726 20230306 171750

다시 스크랩 버튼을 클릭하면 기존 캐시를 삭제하고 다시 스크랩한다.

20230306 171756

위와 같이 내가 어떤식으로 og tag를 입력했는지, 어떤식으로 프리뷰가 노출되는지 볼 수 있다.

9_7_1. og tag 배포 후 확인

20230306 172414 20230306 172718 20230306 172722

9_7_1_1. 에러: 상세 페이지 들어간 후 새로고침하면 페이지를 찾을 수 없다는 에러 발생

static site generator 방식이라서 https://6405a2aa0d79510008f8e75d--benevolent-dango-c87e7b.netlify.app/product/1 이렇게 바로 /product/1에 접근하는 부분에 대해서 접근할 수 없다는 에러이다.

이는 싱글 페이지 어플리케이션에서 라우터를 썼을 때, 히스토리 모드인 경우, 즉, url 에 #이 없는 경우에 서버쪽에서 추가적으로 설정해줘야되는게 있다.

20230306 174343

9_7_1_2. static/_redirects 파일 추가

9_7_1_3. 확인

20230306 174814 20230306 175104 20230306 175118

이제 새로고침해도 페이지를 찾을 수 없다는 에러는 안 뜨지만,

  • 상품 상세 페이지에서 새로고침하면 상품 목록(메인) 페이지로 가는 에러가 발생한다.
    아마 SPA 에 맞는 설정방식이라 SSG 에선 또 다른 static/_redirects 파일 설정을 해줘야되는 것 같다.
  • 그리고 og tag도 meta 태그에 설정이 안되어있는 에러가 발생했다.

9_7_1_4. 에러: 새로고침시 메인 페이지로 가는 현상(상품 상세 페이지에서만 발생하는 현상이다) + og tag 설정 안되는 현상

상품 상세 페이지에서 새로고침시 또 page not found 에러 발생.
meta og tag 는 제대로 나옴.

9_7_1_5. 에러: 상품 상세 페이지 page not found, meta og tag 는 제대로 생성됨

그래도 안되네.. 아.. 어떻게 하는거야..

설정이 먹히긴함.
테스트해보니까 먹힘.

그러면.. path parameter 는 _redirects에서 어떻게 설정하는거야???

9_7_1_6. path parameter 는 _redirects 에서 어떻게 설정하는거야?

20230306 183744

9_7_1_7. nuxt SSG 빌드시 path parameter 사용하는 페이지인 경우

Nuxt.js에서 Netlify로 앱을 배포할 때, 새로고침을 하면 페이지가 제대로 로드되지 않는 문제가 발생할 수 있습니다.
이는 Netlify가 단일 페이지 앱(single-page application)에 대한 서버 사이드 렌더링을 지원하지 않기 때문입니다.

이 문제를 해결하기 위해 Nuxt.js에서는 “generate” 모드를 사용하여 정적 파일로 앱을 빌드하고 Netlify로 배포할 수 있습니다.
그러면 Netlify는 정적 파일을 제공하므로 새로고침이나 직접 URL을 입력하여 페이지에 접근할 때도 제대로 렌더링됩니다.

하지만 동적 라우트(경로 매개변수)를 사용하는 경우, Nuxt.js에서는 “generate” 모드에서 이를 처리하는 방법을 제공합니다.
“generate” 모드에서는 모든 동적 라우트의 HTML 파일을 생성하고, 이를 정적 파일로 빌드한 후 배포합니다.
이렇게 하면 새로고침이나 직접 URL을 입력하여 동적 라우트에 접근할 때도 정상적으로 렌더링됩니다.

다음은 동적 라우트를 사용하는 Nuxt.js 앱을 Netlify로 배포하는 방법입니다.

  1. “nuxt.config.js” 파일에서 “generate” 속성을 설정합니다.

    // nuxt.config.js
export default {
    generate: {
        fallback: true
    }
}

  2. “fallback” 속성은 동적 라우트에 대한 처리 방법을 설정합니다.
    “true”로 설정하면 동적 라우트에 대한 HTML 파일을 생성합니다.
    “false”로 설정하면 404 페이지를 반환합니다.

  3. 앱을 빌드합니다.

    npm run generate

  4. “dist” 폴더에 생성된 정적 파일을 Netlify로 배포합니다.

9_7_1_8. 수정 후 재배포

오, 새로고침하니까 아주 잘된다!!!

20230306 185614

새로고침해도 잘 뜨는데,

아니 근데

20230306 185544

최종 빌드 결과물엔 여튼 product/_id.vue 페이지는 정적 리소스로 빌드가 안된다.
그래서 해당 페이지의 메타데이터를 가져올 수 없다.
카카오톡으로 해당 상세페이지의 주소를 보냈지만 타이틀, 페이지설명, 사진 등 아무것도 뜨지 않는다.

페이스북, 카카오톡 OG 태그 디버깅 사이트가서 보면 invalid url 이라고 못찾는다.

상세 페이지의 OG 태그를 설정해도 소용 없는 상황이잖아?

9_7_1_9. 상세 페이지의 OG Tag..

이게 활성화되려면 이 패스 파라미터로 설정된 페이지들도 정적 파일로 떨어지거나 해야될텐데 그건 현실상 말이 안되는거같고..
왜냐면 상품이 수백개인데, 상세 페이지 수백개 관련해서 정적 파일로 다 빌드하는 것도 말이안돼고..
그런데 OG 태그는 활성화 안되는데.. 어떻게 해야될까.

20230306 185944 20230306 185947 20230306 190023

새로고침은 되지만, 그리고 meta 태그에 og tag 가 다 설정은 되어있지만, 동적 패스 파라미터로 불러와지는 상세 페이지이다보니까 이렇게 카톡 메시지에서 프리뷰를 못 보여준다.

이거 어떻게 해결할 수 있을까?

  1. 넷리파이 _redirects 파일로 해결해야되는건가?
  2. 아니면 다른 방법이 있는걸까?
    • chat gpt한테 좀 더 물어보자!

9_7_2. SSG path parameter 페이지의 og tag 는? / SSR og tag 는?

9_7_2_1. SSG path parameter 페이지의 og tag 는?

  • SSG path parameter 페이지의 og tag 가 진짜 제대로 적용되려면..

20230306 204554

아 이렇게 페이지 url 이 따로 있었네..

20230306 204558 20230306 204601

20230306 211013 20230306 211016

20230306 204747

그런데 여전히 제대로 안되네.. SSG 는 OG Tag 적용이 안되는건가?

9_7_2_2. SSR og tag 는?

SSR 방식으로 배포된 페이지들은 OG 태그 제대로 적용되는지 확인해봐야됨

20230306 211718 20230306 211720 20230306 211726

SSR 은 OG Tag 적용이 잘된다.

20230306 211906 20230306 211930 20230306 211933

20230306 211921 20230306 211923

9_7_3. SSR, SSG og tag 결론

  • SSG 패스파라미터(동적 라우팅 페이지)는 SPA랑 같은 동작원리인가?
    • 그래서 OG 태그가 적용 안되는듯? 애초에 미리 검색도안되는듯하고.. 페북 OG Tag, 카톡 OG Tag 디버깅에서 안되는거보면..
  • SSR은 잘됨! 서버사이드 렌더링이라!

  • nextjs vs gatsby
  • nuxtjs vs gridsome

9_7_5. SSG 에서 dynamic route

SSG 빌드시 dynamic route 는 제외하고 정적 페이지를 빌드한다.

dynamic route 관련 페이지는 SPA 방식으로 빌드되는듯 하다.
이 dynamic route 관련 페이지들은 OG Tag 가 적용되어도 SSR 방식이아니라 찐 SPA 방식이라 카톡 또는 SNS 에서 프리뷰도 제대로 안보이고, SEO 도 안되었던 것.

nuxt.config.js에 generate property 에 routes 를 명시하면 dynamic route 도 정적 페이지를 빌드 때 생성할 수 있다.
동적 라우팅을 여러개 해야한다면 그리고 그걸 일일이 명시하기 싫다면 위에서 세번째 사이트를 참고하면 된다.

9_7_6. SSR, SSG

SSR 로 빌드해서 노드JS 서버에 올려 배포시, 최초 진입한 페이지를 SSR 로 받아온다.
그리고 그 최초로 진입한 페이지에서 버튼 같은걸로 다른 페이지로 이동시엔 SPA 방식으로 동작한다.

  • 이 때문에 fetch 로 데이터를 불러오도록 설정한 컴포넌트가 있는 페이지에 최초진입시엔 서버에서 페이지 들어가기 전에 불러와서 미리 랜더링
  • 그리고 다른 페이지로 들어간 후 fetch 로 데이터를 불러오도록 설정한 컴포넌트가 있는 페이지에 진입시엔 해당 페이지가 그려지고 데이터 받아오고 그 부분 렌더링 (SPA 방식)

이렇게 동작하기 때문에 최초 진입 후엔 서버로부터 doc 를 따로 안 받아왔던 것.
하지만 최초 진입한 페이지는 무조건 서버사이드 렌더링이기 때문에, SEO 든 OG Tag 든 다 적용이 되는 것.

SSR 은 서버에 nodejs 가 있기 때문에 최초 진입할 때만 SSR 이고 그 후엔 SPA 로 동작해도 SEO 든 OG Tag 든 잘 되었던 것.
SSG 는 서버에 nodejs 가 없고, 서버사이드 랜더링이 아니고 정적 파일을 내려주는 거기 때문에, 그런 파일들은 SEO 나 OG Tag 가 잘 되지만, 만약 dynamic route 페이지라 SSG 로 빌드했어도, SPA 로 빌드된 페이지라면(따로 설정 해줘야지 dynamic route 여도 정적 페이지로 빌드) SEO 나 OG Tag 적용 안됨.
해당 페이지 들어가서 요소 보면 OG Tag 나 SEO 를 위해 메타데이터가 다 정의가 되어있어도, SEO 나 OG Tag 로 인한 페이지 프리뷰가 안된다. SPA 이기 때문에! 노드JS 환경이 있는 서버에서 동작하는 것도 아니기 때문!

이제 완벽히 이해. 어제 겪었던 현상 다 이해감.

Thank You for Visiting My Blog, Have a Good Day 😆
© 2022 Developer hyungju-lee, Powered By Gatsby.