React(CSR)가 아니라 Next(SSR)을 하는 이유! SEO에 대해 알아보자

본인은 커뮤니티 플랫폼을 운영하는 회사에 다니고 있다.

그래서 나를 맨날 괴롭히는 숙명같은것 seo... (가끔 내가 바이럴회사를 다니는건지 헷갈림)

우리의 사이트가 seo 순위에서 내려가면 상사가 나를 들들 볶기 시작한다.

그렇게 맨땅에 헤딩하듯 겪어보며 느끼는 SEO를 하려면 중요우선순위가 무엇인지를 공유해보겠다.

 

일단 seo를 적용하려면 ssr은 필수이다.

걍 react로 하면 안됨? 싶지만 ㅇ ㅖ, 구글은 몰라도 네이버는 csr를 잘 긁어가지 못한다.

근데 우리나라 검색엔진 점유율이...^^........ 외국인 상대로만 하는 사이트는 모르겠는데 일단 고객층이 한국인이 포함되어있다면 네이버를 무시할 수가 없다.

 

물론 react에서도 어떻게어떻게  ssr을 적용하는 방법이 있긴있다 더럽게 복잡하고 어려워서 그렇지

그래서 그나마 좀 간편하게 ssr을 적용할 수 있는 대체제로 나온게 react의 프레임워크인 next.js인데

 

얠 하다보면 좀 드는생각이 분명 꽤나 최신 프레임워크인데 보면볼수록 php랑 닮아있다는 생각이 든다. (왜 퇴화하지?)

 

어쨌든 리액트에 꾸역꾸역 ssr를 도입하는거에 비하면 next에서는 ssr가 자체지원이 된다.

 

다만 ssc와 scc를 적절히 섞어쓰면서 어떤건 ssc를 써야하는지 scc를 써야하는지 설계하는게 조금 난이도가 있긴하다.

덕분에 react면 이렇게까지? 싶을정도로 next에서는 컴포넌트를 무수히 쪼개개된다..;; (버튼하나 만드는데도 클라이언트컴포넌트로 해야되서 따로 분리해야됨 ㅠㅠ)

 

아무튼 서론은 이쯤에서 하고 그래서 seo때문에 ssr을 해야하는건 알겠는데 next에서 해야하는게 뭔데? 싶을거다.

 

일단 제일 중요한건

 

1. seo에 잡혔으면 하는 데이터는 무조건 server side component를 이용한다.

매우 중요하다. 굳이 next로 만들어놓고 client side components에서 데이터를 호출한다면

next를 쓰는 의미가 없다. 그런 멍청한짓 하지말자.

2. meta 태그 title, description (중요 별 5개)

seo가 중요하므로 canonical태그니 keywords 태그니 메타태그를 온갖거 다 때려박아볼것이다.

근데 경험해보니 중요한건 그냥 title이랑 description이 제일 중요하다.

https://searchadvisor.naver.com/tools/sitecheck

네이버

네이버 웹마스터도구에 가보면 간단체크라는게 있다.

여기서 사이트 검색을 해보면 ㅇㅇ 너네 타이틀 넘 길어~ 40자 이내로 써 ~ description 넘 길어~ 80자 내로 써 ~ 이런다.

처음에 욕심이 그득그득해가지고 온갖 키워드 다 때려넣었다가 네이버에서 글자수제한 알려준대로 룰을 따라봤다.

그러고 바로 순위 올라가더라..

스키마니 뭐니 그런거보다 젤 중요한게 title이랑 description 메타태그였다.

3. 스키마

스키마의 역할이 무엇이냐? 네이버나 구글에서 검색하면 다른 게시글형 애들이랑 다르게 사진이 있다던가 리뷰형태로 보인다던가 댓글이 미리 보인다던가 특수한 형태의 더 눈에 띄는 게시글들이 보일것이다. 그걸 지정해주는 데이터구조화스크립트다.

스키마는 다양한 종류가있는데 blogposting이나 localbussiness같은 type에 맞춰서 써주면 그 형태로 나오게 된다.

검색하는사람 입장에서 한눈에 더 데이터를 볼 수 있어서 눈에 더 띌테니 클릭률이 올라가지 않을까?

그런 의미에서 쓰는거지 사실상 seo자체의 순위를 올려주거나하는 역할은 크게 없는것같았다.

왜냐면 스키마 미적용 사이트가 우리 사이트보다 위인경우가 비일비재했기때문에 ^^...

 

그럼 seo가 젤 잘 뜨려면 어케해야함? 싶은데

제일 중요한건 아무래도 트래픽이다.

스키마가 휘황찬란하고 메타태그가 꽉차있고 웹마스터도구의 모든 룰을 다 적용하더라고

내 사이트보다 트래픽이 높은 메타태그고뭐고 스키마고뭐고 없는 사이트가 내 위를 차지한다.

근데 ㅅㅂ 트래픽을 결국 높이려면 seo가 잘 되서 위에 올라가야되는거아님? 싶을거다.

그래서 어둠의 경로로 백링크 작업을 하거나 하기도한다.

근데 이건 하이리스트 하이리턴.. 잘못하면 신고당해서 사이트 노출 자체를 정지먹을수있다.

아무튼 그렇기때문에 신생사이트는 순위권에 오르기가 쉽지 않다. 그래서 참 어려운것같다.

 

마지막으로 next.js에서 동적 메타태그 적용하는법에 대해서만 알아보자.

 

export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const res = await fetch(
      `/APIURL/detail`,
      { next: { revalidate: 0 } }
    );
    const jsonData = await res.json();
    const data = jsonData.result;
    let description = data.content;
    return {
      title: data.title,
      description: description,
      keywords: keyword,
      openGraph: {
        type: "website",
        title: data.title,
        description: description,
        url: `${process.env.NEXT_PUBLIC_DOMAIN}/${params.cate}/${params.id}`,
        images: {
          url: data.images
            ? data.images[0]
            : `${process.env.NEXT_PUBLIC_DOMAIN}/images/og_thumb.png`,
          width: 1200,
          height: 630,
          alt: data.title,
        },
        locale: "ko_KR",
        siteName: "사이트이름",
      },
      alternates: {
        canonical: `${process.env.NEXT_PUBLIC_DOMAIN}/${params.cate}/${params.id}`,
      },
      generator: "Next.js",
      applicationName: "Next.js",
      referrer: "origin-when-cross-origin",
      authors: [
        {
          name: data.name,
          url: `${process.env.NEXT_PUBLIC_DOMAIN}/${params.cate}/${params.id}`,
        },
      ],
      creator: "사이트명",
      publisher: "사이트명",
    };
  }
}

 

메타태그란 메타태그는 다 때려박은 모습이다.