Netlify에서 처음으로 OGP on SPA

5840 단어 ReactSPAOGPNetlify자바스크립트
아무래도. Cocoda!의 엔지니어의 장점입니다.
Cocoda!의 일부가 로그인하지 않고 볼 수 있는 사양이 되어, OGP를 표시시키고 싶어졌습니다. 처음 OGP 대응 이었기 때문에 기억으로 남겨 둡니다.

환경



React.js의 SPA를 Netlify에서 호스팅하고 있습니다.

요구사항



Twitter에서 공유할 때 OGP가 페이지별로 동적으로 바뀌어 표시되도록 하고 싶다!

OGP란?



Open Graph Protocol의 약자.
SNS에서 공유했을 때, 링크처의 정보가 표시되는 자주(잘) 보는 ale입니다.


OGP를 설정하지 않으면 공유하면 아래와 같은 간단한 인상이됩니다. (postd 씨, 미안해요. 그냥 공유했을 때 잘 말하지 않았던 것 같아서 사용하겠습니다. 엄청 좋아하는 미디어입니다.)


공유하거나 공유하고 싶은 페이지는 OGP를 설정하고 싶네요.

OGP를 설정하는 방법



OGP 설정은 meta 태그로 가능합니다.


이 OGP는 다음 태그로 표시됩니다. 개발자 도구에서 확인할 수 있습니다.
<head>
  <meta property="og:url" content="https://news.google.com">
  <meta property="og:title" content="Google ニュース">
  <meta property="og:image" content="https://lh3.googleuserc...">
  <meta property="og:description" content="Google ニュースが世界中のニュース提供元から集約した広範囲にわたる最新情報">
</head>

OGP 생성 문제



js에서 meta 태그를 동적으로 다시 쓰면 언뜻 곧 OGP 표시할 수 있을 것 같지만, 그렇게 달지 않았다. . . 😢

Twitter나 Facebook 클라이언트는 js를 해석해 주지 않기 때문에, 공유했을 때에, 동적으로 재기록하기 전의, 취득한 원소의 html에 써 있는 meta 태그 밖에 봐주지 않습니다.

즉, 서버에서 반환한 정적 파일의 OGP를 읽어야 합니다.

해결책



조사한 결과 해결책이 두 가지있었습니다.
  • SSR (서버 사이드 렌더링)
  • prerender

    • SSR



    (원래 브라우저에서만 움직였다) JavaScript를 서버 내부에서 실행하여 HTML을 생성하는 것

    by https://medium.com/@sundaycrafts/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E4%BD%93%E9%A8%93%E3% 82%92%E5%90%91%E4%B8%8A%E3%81%95%E3%81%9B%E3%82%8B%E3%82%B5%E3%83%BC%E3%83% 90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA% E3%83%B3%E3%82%B0javascript-%E6%AD%B4%E5%8F%B2%E3%81%A8%E5%88%A9%E7%82%B9-df68cd7cd991

    여기서 자세하게 말하는 것은 삼가합니다만, 프런트 엔드가 복잡해질 것 같다-라는 인상이 있었습니다.

    prerender



    prerender 는 미리 렌더링된 파일을 로드하는 것입니다 👀. 이렇게하면 js가 동적 응용 프로그램이더라도 SSR없이 클라이언트에 정적 파일을 반환 할 수 있습니다.

    사이트를 호스팅하는 데 사용하는 Netlify에서 beta 버전으로 prerender를 지원합니다.

    Our built-in prerendering service will cache prerendered pages for between 24 and 48 hours; this is not adjustable.
    당사의 기본 제공 사전 렌더링 서비스는 미리 렌더링된 페이지를 24~48시간 동안 캐시합니다. 이것은 조정할 수 없습니다.

    과연.

    간단하게 설정할 수 있을 것 같았기 때문에 우선 Netlify의 prerender 기능을 시험해 보기로 했습니다. (게다가 무료)

    Prerender까지의 절차



    1. React Helmet 을 사용하여 동적으로 meta 태그 재작성


    2.Netlify Settings 탭의 Prerendering 섹션으로 이동


    3. Enable Prerendering에 체크를 넣는다


    4. robots.txt에 OGP를 표시하려는 사이트의 크롤링 허용
    User-agent: Twitterbot  # Twitterは許可する
Allow: /allow           # /allow パスはクロールを許可する

    5. fetch as google하기
    robots.txt는 캐시되므로 fetch as google에서 Google로 다시 읽어 들입니다.


    5. OGP 표시 확인

    Twitter에서 OGP 표시를 미리 볼 수 있습니다. Card validator


    ! ! ! ! 이상! ! ! !
    폭속으로 OGP를 설정할 수 있었습니다. 대단한 Netlify.

    요약



    매우 간단하게 OGP를 설정할 수 버렸습니다.
    SPA에서 OGP 생성으로 고민하는 사람에게 도달하면 좋다.
    Angular에서 Cropper.js를 사용하는 방법과 빠는 포인트
    SPA 사이트에서 Chartbeat에 PV를 보내는 방법.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage