참고글
SEO 시멘틱 태그 우선순위
Next.js meta
https://velog.io/@pbs1014/Next.js-App-Router%EC%9D%98-Meta-tag-%EC%84%A4%EC%A0%95
검색엔진 연동 (보안이슈로 이미지 공개가 불가능하니 참고만)
https://velog.io/@pbs1014/%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84-%EC%97%B0%EB%8F%99
서론
next.js하면 가장 많이 나오는 이야기는 SSR에 의한 SEO의 최적화이다.
이 글은 SEO최적화의 방법이 어떤식으로 이루어지는지에 대하여 말해보겠습니다.
본론으로 들어가기전에 댓글에 링크된 SEO관련 3개의 글을 읽으면 도움이 됩니다.
SEO의 개념과 목적
- *SEO(Search Engine Optimization)는 검색 엔진 최적화**를 뜻하며,
웹사이트나 콘텐츠가 검색 엔진 결과 페이지(SERP)에서 상위에 노출되도록 최적화하는 과정을 말합니다.
SEO는 검색 엔진 알고리즘에 맞추어 웹사이트를 개선하고
사용자 경험을 강화하는 다양한 전략과 기술을 포함합니다.
- 검색 엔진 최적화의 목표
- 검색 결과의 상위 노출을 통해 더 많은 트래픽 유입.
- 타겟 사용자가 쉽게 콘텐츠를 찾을 수 있도록 돕기.
- 브랜드 가시성과 신뢰도 강화.
- SEO의 주요 영역
- 온페이지 SEO (On-page SEO):
웹사이트 내부 요소 최적화.
- 키워드 사용
- 메타 태그 (Title, Description)
- 내부 링크
- 이미지 Alt 태그
- 콘텐츠 품질 및 가독성 - 오프페이지 SEO (Off-page SEO):
외부에서 이루어지는 최적화.
- 백링크 (Backlinks): 권위 있는 사이트에서 링크 받기
- 소셜 미디어 신호 - 기술 SEO (Technical SEO):
웹사이트 구조와 기술적 측면 개선.
- 사이트 속도
- 모바일 최적화
- XML 사이트맵
- 구조화 데이터 (Schema Markup)
- 온페이지 SEO (On-page SEO):
- SEO의 핵심 요소
- 키워드 연구: 사용자가 검색할 때 사용하는 주요 키워드를 파악하고 콘텐츠에 반영.
- 품질 콘텐츠: 검색 의도에 부합하고 유익하며 독창적인 콘텐츠 제공.
- 사용자 경험(UX): 빠른 로딩 속도, 반응형 디자인, 직관적인 내비게이션.
- 모바일 최적화: 모바일 기기에서 적절히 표시되도록 설계.
- 검색 엔진 크롤링/인덱싱: 검색 엔진이 웹사이트를 효율적으로 탐색하고 색인할 수 있도록 설계.
- SEO와 SEM의 차이
- SEO: 검색 엔진 결과에서 유기적인(무료) 트래픽을 증가 시키는 전략.
- SEM(Search Engine Marketing): 유료 광고를 포함하여 검색 엔진에서 가시성을 높이는 전략.
SEO의 중요성
- 비용 효율적 마케팅: 유기적 트래픽은 광고비를 절감할 수 있음.
- 지속 가능성: SEO는 장기적으로 트래픽 증가에 기여.
- 브랜드 신뢰도 강화: 상위에 노출되는 사이트는 사용자에게 신뢰를 제공.
더 높은 성능의 SEO구현을 위한 구체적 방안
-
노출할 검색엔진의 특성을 파악
우선 네이버, 구글 등 제작한 웹 사이트가 어떤 검색엔진에서 검색되고 싶은지 정하고 그 특성을 파악해야 합니다.
meta의 description을 예로 들어보면 네이버는 meta태그로 작성한 description을 그대로 검색 목록에 반영을 해주는 반면
google에서는 보다 상세한 SEO노출을 위하여 description이 아닌 태그의 우선순위에 따른 문구를 조합하여 노출 시킵니다.
이처럼 SEO 최적화를 위해선 1차 적으로 검색엔진 노출을 원하는 브라우저의 특성을 파악 하는게 1순위라고 생각합니다.
-
파악한 검색엔진의 따른 HTML Tag의 체계화
노출을 원하는 검색엔진을 선택 하였다면 프로젝트 내부에서 어떠한 구조로 TAG를 사용할지 컨벤션을 정해 체계화 해놓는 것이 좋습니다.
대부분의 개발은 협업으로 이루어 지며 페이지 단위의 작업이 이루어지기에 모든 사람이 공통적으로 쓸 수 있도록 Tag 컨벤션을 정해
일관된 구조를 가지게 코드를 짜는 것이 좋습니다예를 들면 아래와 같은 느낌이며 tag의 우선순위는 댓글의 링크를 참고해주세요
태그는 제목 <h1>태그는 페이지명 <h2>태그는 페이지내부의 대(소)메뉴 <h3~h6>태그는 depth별 단계식 작성
- 적절한 SSR사용
SSR은 서버에서 미리 meta가 반영된 html을 생성하여 검색엔진에 이점을 주게됩니다.
이 부분을 생각하면 우리는 서버 통신을 하며 모든 데이터를 노출 시키기 위해 가져올 필요 없습니다.
meta부분과 css트리가 SSR 랜더링시 반영될 수 있도록 주의를 가지며 API호출을 통한 데이터는
UX를 고려해 로딩 속도와 노출 정보에 대한 고민 후 적절하게 사용 하는 것이 좋습니다.
app router라면 page.tsx를 server component로 사용하면 되며
page router는 getServerSideProps 함수를 사용하여 작성하면 됩니다.
- Robots, Keyword, openGraph, sitemap 등 meta요소와 설정요소 사용
검색이 노출 되었더라도 사용자의 호기심을 자극할 수 있는, 관심을 끌 수 있는
UX를 고려한 좀 더 높은 수준의 결과가 필요합니다.
위의 3개 외에도 다양한 것들이 있으니 찾아서 사용해보면 좋을 것 같습니다.
