---

우리 회사 사이트는 flynt다.

신생사이트는 일단 대중에게 노출되는 것이 무엇보다 중요하다. 이는 마케팅의 영역일 것이다.

이 점에 대해 프론트엔드 개발자로 기여 할 수 있는 부분은 SEO 관련 부분일 것이다.

검색엔진은 SEO가 잘 된 사이트에 더 높은 점수를 부여하고 사용자에게 더 잘 노출될 수 있게 한다.

SEO는 사실 복잡한 개념은 아니라고 생각한다.

1. 사이트가 HTML 문서라는 점을 이해
2. 메타태그로 사이트에 대한 설명
3. Semantic한 태그를 사용
4. 반응형 페이지 제공(다양한 기기에 대응)
5. 콘텐츠가 사용자에게 빠르게 도달하게 노력

이정도면 충분하다고 생각한다. 과거에는 백링크의 수가 검색 결과 순위를 결정하는 주요 요인이었지만, 최근에는 실제 트래픽이 더욱 중요해졌다.

프론트에서 할 수 있는 부분을 놓치지 말고 진행하자.

SEO란?

SEO는 Search Engine Optimization 검색엔진 최적화이다.

검색엔진 크롤러들이 이 사이트의 목적과 컨텐츠를 잘 이해하게 만들어서 색인을 만들고, 검색결과에 노출 되게 하는 것이다.

SEO 관련 고민을 해본 사람이라면, 사이트에 구글 애널리틱스, 구글 서치 콘솔은 붙였을 것이다.

• Google Analytics: 사용자 데이터 분석
• Search Console: Google 검색 실적을 모니터링하고 최적화할 수 있음

안 붙여 봤으면 해보자. 둘다 붙이면 search console insights라는 화면을 제공해준다.

이번 포스팅에서는 Search Console이 더 중요하다.

Search Console

Search Console에서 제공하는 기능은 주요하게 아래와 같다.

• 어떤 검색어에서 사이트가 노출이 몇번 됐는지, 평균 노출 순위, 클릭 수 등을 알 수 있다.
• 색인 등록 요청을 할 수 있다.

Google 검색의 작동 방식에 대한 상세 가이드를 참조하자.

해당 url에 색인이 생성되지 않으면 검색결과에 노출 되지 않는다. 해당 url에 색인이 생성되지 않으면 검색결과에 노출 되지 않는다.

다 사이트가 검색 결과에 노출되게 하려고 하는 것인데, 노출이 안되는 것 만큼 슬픈 일은 없을 것이다.

새로운 페이지를 만들어 배포할 때, 해당 페이지가 색인에 등록되려면 트래픽에 따라 다르겠지만 생각보다 시간이 소요 될 수 있다.

하지만 서치 콘솔에서는 특정 url에 대해 색인 생성 요청을 할 수 있으니, 페이지 배포 시 바로 바로 요청을 하는 것이 초기 웹사이트에 좋을 것 이다.

Meta tag

일반적으로 SEO 작업을 한다고 하면 메타 태그부터 설정 할 것이다.

• description:설명
• keywords:키워드

요즘은 노출을 위해서 너무 많은 값을 집어 넣으면 오히려 감점을 먹는다고 하니 콘텐츠와 연관된 값들만 잘 넣으면 된다.

OG tag

Facebook이 만든 Open Graph protocol은 SNS에서 미리보기 기능에 사용되는 프로토콜이다.

hreflang tag

• 다국어 관련 태그로 해당 페이지의 다국어 버전이 있다면 등록하자.
• 쌍방향적으로 등록 되어야한다 (en -> ko, ko -> en)
• 동일한 언어를 사용하지만 지역이 다른 사용자를 타겟팅하는 여러 개의 대체 URL이 있는 경우, 지정되지 않은 지역에 있는 해당 언어 사용자를 위한 포괄 URL도 함께 제공하는 것이 좋다.

참조 링크

Canonical tag

캐노니컬 태그란 사이트 내 URL 주소는 다르지만 동일한 내용의 중복된 페이지가 있을 때 페이지에 코드를 삽입하여 검색엔진에 대표가 되는 URL 주소를 알려주는 역할을 하는 태그이다.

• 중복 된 컨텐츠를 가진, 여러 url이 있으면 검색엔진에 페널티를 먹을 수 있다
  • ex)_ 동일한 컨텐츠의 분리 된 피씨, 모바일 url
• 다국어 페이지는 상관 없음(중복 된 컨텐츠가 아님)

페이지 컨텐츠

크롤러가 잘 읽을 수 있게 제공 해야 한다.

위의 Google 검색의 작동 방식에 대한 상세 가이드로 다시 돌아가보자.

1. Google은 크롤러라는 자동화된 프로그램을 사용하여 인터넷에서 찾은 페이지로부터 텍스트, 이미지, 동영상을 다운로드합니다.
2. Google은 페이지의 텍스트, 이미지, 동영상 파일을 분석하고 대규모 데이터베이스인 Google 색인에 이 정보를 저장합니다.

크롤러라는 프로그램이 사이트에서 제공하는 html 문서를 읽고, 분석한다.

구글 크롤러는 CSR된 페이지의 컨텐츠도 잘 읽는다고 하지만, 다른 검색엔진 크롤러들은 컨텐츠를 못 읽는 것으로 알고 있다.

거기에 레이지 로딩을 적용시켰다면, 해당 부분은 크롤러가 못 읽는 것으로 알고 있다.

위의 이유로 SSR 방식이 CSR보다 검색엔진 크롤러가 크롤링에 유리하고, SSR이 SEO에 유리한 이유이다.

그래서 NextJS를 사용해서 프로젝트를 구축했다.

• SSG 방식으로 페이지 작동에 꼭 필요한 서버 값들은 빌드 시점에 요청해서 staticProps 에서 저장 후 다음 사용

사이트 성능

사이트 성능 역시 페이지 노출에 가산점, 페널티를 주는 부분이다. 그러면 사이트의 성능이란 뭘까?

이건 약간 택배와 비슷하다. 아무도 느린 택배를 좋아하지 않는다.

여기서 구글이 제시한 성능의 기준이 Core Web Vitals이다.

최대 콘텐츠 렌더링 시간(LCP): 로드 성능을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지가 로드되기 시작한 지 첫 2.5초 이내에 LCP가 발생하도록 해야 합니다.

첫 입력 지연(FID): 상호작용을 측정합니다. 우수한 사용자 환경을 제공하려면 FID가 100밀리초 미만이 되도록 해야 합니다. 2024년 3월부터 다음 페인트에 대한 상호작용(INP)을 통해 FID를 Core Web Vitals로 대체합니다.

레이아웃 변경 횟수(CLS): 시각적 안정성을 측정합니다. 우수한 사용자 환경을 제공하려면 CLS 점수가 0.1 미만이 되도록 해야 합니다.

다음 페인트와의 상호작용(INP): INP는 페이지 수명 동안 페이지와의 모든 클릭, 탭, 키보드 상호작용의 지연 시간을 관찰하고 이상점을 무시하고 가장 긴 기간을 보고합니다. INP가 낮으면 페이지가 대다수의 사용자 상호작용에 일관되게 빠르게 반응할 수 있다는 의미입니다.

core-web-vitals > INP

본인은 기본적으로 아래 3개를 사용한다.

• PageSpeed Insights
• Search Console
• light-house(개발자 도구)

좀 더 자세히 알고 싶다면 vitals-tools를 읽어보자.

Semantic tag

결국 document라는게 가장 중요한 점이다. 웹페이지 태그를 문서처럼 구분되게 작성 해야 한다.

예를 들어 h1 태그는 페이지 별로 하나만 들어가는 것이 권장 사항인데, 이는 한 문서의 가장 큰 제목이 여러개면 이상한 것과 같다.

검색 엔진은 시맨틱 태그를 통해 페이지의 주요 내용, 제목, 섹션 등을 파악하고 관련성을 판단한다. 따라서 태그를 잘 작성하는 것이 해당 페이지의 노출도를 높이는 데 도움이 될 것이다.

결론

프로젝트에 SEO에 관련 된 작업을 진행하며 정리 해봤다.

마케팅 화이팅이다.