현재 상황
배포는 했지만 SEO 관련해서 어떠한 설정은 전혀 하지 않았다.
서비스 이름을 검색했을 때 나오긴 나오는데, 서비스 설명은 되어있지 않아 사용자는 검색만으로는 어떤 서비스인지 모른다.
그리고 구글 검색 엔진에도 반영이 안되어있다.
구글 검색 엔진에 반영이 되어있는지 확인하려면 포털 사이트 검색창에 site:서비스url을 검색하면 된다. 서비스 링크가 잘 뜨면 반영이 된 것이다.
1. meta 태그 추가
검색 엔진과 SNS 공유시 서비스 설명이 보이게 하기 위해 meta 태그를 추가해봤다.
정적으로 만드는 방법과 동적으로 만드는 방법이 있는데, 나는 정적으로 컴포넌트를 만들어 재사용했다.
블로그처럼 개별 페이지 내용이 중요하거나 웹 사이트 내용이 자주 변경되는 경우엔 동적으로 만드는 게 더 좋다고 한다. 하지만 우리 서비스 같은 경우엔 페이지 개수가 많지 않고 웹 사이트 내용이 변경될 일이 없기 때문에 정적으로 만들었다.
title은 검색했을 때 보일 제목이고, description은 부가 설명이다.
:og 속성을 가진 메타태그는 SNS에 링크를 공유했을 때 보이는 정보들이다. 이를 오픈 그래프라고 한다.
가비아에서 올린 SEO 엔진 최적화 글에 따르면, 모든 페이지에 동일한 description을 쓰거나 title과 중복되는 내용을 쓰는건 좋지 않다고 한다. 또한 예전에는 메타태그가 SEO에서 가장 중요했다는데 요즘엔 메타태그만 잘 적는다고 노출이 많이 되는게 아니라고 한다.
import Head from 'next/head'
export interface MetaType {
title?: string
description?: string
image?: string
}
const MetaHead = ({
title = 'Algonote',
description = '균형잡힌 알고리즘 공부 알고노트로 시작하세요',
image = '/images/loginLogo.png',
}: MetaType) => {
return (
<Head>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="google-site-verification"
content="orGf2AsBPWGGpcuzv3_LwDYQl-GDxrDxrYWEO5KPFu4"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
)
}
export default MetaHead
og 속성을 가진 메타태그는 반영이 바로 된다. 그러나 구글 검색 엔진에 반영되게 하려면 몇가지 과정을 더 거쳐야한다.
위는 메타태그 사용 전이고 아래는 메타태그 적용 후이다. 제목, 설명, 로고가 잘 들어가있다.
개발자 도구에서도 적용된 메타태그를 확인해볼 수 있다.
2. robots.txt 파일 설정
이제 구글 검색 엔진에도 반영을 해보겠다.
우리 사이트에 robots.txt 파일이 있나 확인해보고 싶다면 url/robots.txt에 접속하면 된다.
크롤링 관련 강의를 들으며 robots.txt 규정에 대해 듣긴 했지만 내가 직접 만드는건 처음이라...네이버의 robots.txt 설정 가이드를 따랐다.
tbwa 코리아 10분 안에 끝내는 robots.txt 가이드
주니어도 할 수 있는 Next.js SEO - robots.txt와 sitemap.xml 자동 생성하기
여기서 실수한게, robots.txt를 src 디렉토리에 넣으면 안된다.
Next.js 프로젝트에서는 정적 파일(이미지, 폰트, robots.txt 등)을 제공하기 위해 public 폴더를 사용한다. 따라서, robots.txt 파일은 public 폴더 안에 위치시켜야 한다. src 폴더에 넣으면 Next.js가 이를 정적으로 제공하지 않기 때문에, robots.txt 파일이 브라우저에서 접근되지 않는다.
3. 구글 서치 콘솔 사용하기
구글 서치 콘솔에 도메인을 등록해두면 웹사이트 방문 실적을 모니터링 및 최적화할 수 있다.
그리고 무슨 문제가 발생했거나 일정 클릭수를 넘기면 이렇게 메일을 보내준다.
구글 서치 콘솔에 들어가면 다음과 같은 창이 나오는데, 도메인에 입력 하면 모든 하위 도메인 (https, http, 모바일 버전 등)을 검사할 수 있고 URL 접두어에 입력하면 해당 URL만 검사할 수 있다.
그리고 다음 단계에서 정말 내가 개발한 사이트가 맞는지 인증하는 과정을 거치는데, 도메인의 경우 도메인 이름 제공 업체에 로그인하는 인증 방식만 쓸 수 있다.
우리 서비스는 모바일 버전도 없고, https로만 운영되기 때문에 URL 접두어를 선택했다.
다음으로 이 사이트가 정말 내가 개발한게 맞는지 확인하기 위해 소유권 확인을 한다.
URL 접두어의 경우 다섯가지 인증 방법이 있는데, HTML 파일을 업로드하거나 HTML 태그를 수정하는 게 가장 간편하다고 생각되어 이 방식을 선택했다.
이 메타 태그를 헤드에 껴서 다시 빌드했다. 확인완료!
이제 여기서 URL 검사에 들어간다
상단에 URL을 입력하면 다음과 같은 결과가 뜬다.
크롤링된 페이지를 클릭하면 해당 URL을 크롤링한 결과를 볼 수 있다.
모든 페이지의 html이 여기에 뜨는건 아니고 robots.txt, meta 태그에서 등의 설정을 한 페이지들은 색인이 생성되지 않는다고 한다. 만약 robots.txt에서 특정 페이지를 크롤링하지 못하게 막았다면 색인이 생성되지 않을 것이고, meta 태그가 들어간 페이지 역시 색인이 생성되지 않을 것이다.
나의 경우 모든 페이지를 크롤링 가능하게 설정해둔 후 랜딩페이지를 제외하고 모두 메타태그를 삽입했다. 따라서 다음처럼 랜딩 페이지만 크롤링되어 표시되는 것이다.
4. sitemap.xml 만들기
사이트맵 자동 생성기로 sitemap.xml을 만든다.
사이트맵을 생성해주는 다양한 사이트가 있는데, 나는 회원가입이 귀찮아서 회원가입 없이 사용할 수 있는 xml-sitemap이라는 사이트를 이용했다.
Last Mod는 가장 최근에 수정한 날짜로, 크롤링봇이 변경되지 않은 부분을 또 크롤링하는걸 방지한다.
Priority는 메인 페이지에서 해당 페이지까지 가기 위해 필요한 클릭수로 정해진 우선순위이다.
다른 페이지는 nav바에서 클릭 한번으로 갈 수 있지만 signup 페이지의 경우 로그인 페이지를 거쳐가야하므로 priority가 0.64로 측정되었다.
만들어진 사이트맵 파일을 다운받아 정적 파일을 로드하는 폴더 내부에 넣어준다 (robots.txt와 같은 위치)
서비스URL/sitemap.xml로 이동해서 사이트맵 xml이 잘 나오는지 확인한다
그리고 구글 서치 콘솔에서 sitemaps를 눌러 사이트맵을 추가해준다.
이제 끝..! 인줄 알았으나 업로드한 xml을 인식할 수 없다고 떴다.
검색해보니 실시간으로 확인할 수 없는 부분이라 검수를 거쳐 정상등록 되는거 같았다. 이는 구글 서치 콘솔 사이드바의 색인 생성 > 페이지 메뉴에서 확신할 수 있었다.
색인 생성 > 페이지 메뉴를 누르면 이렇게 데이터를 처리하는 중이므로 며칠 후에 다시 확인해보라는 문구가 뜬다.
사이트맵을 제출하기 전에 색인 생성 요청을 했을때는 등록되지 않은 URL이라는 문구가 떴었다. 다시 눌러보겠다.
드디어 실시간 테스트에 성공했다.
페이지 공개 상태도 이전에는 아무것도 뜨지 않았었는데 이제는 뭐가 뜨긴뜬다..
여기까지 헷갈리는 부분이 있거나 모르는 부분이 있다면 서치 콘솔 공식 문서를 보면 된다. 아주 친절하게 A부터 Z까지 나와있다.
그런데 검색이 실시간 테스트에 체크인되지 않는다고 떴다.
실시간 테스트에서 스크린샷이 로드된 것도 확인했는데 왜 안되는걸까...
그리고 실시간 테스트에서 테스트된 페이지의 소스도 확인해봤는데 변경한 메타 태그가 정상적으로 들어가있는데 여전히 서비스명을 검색하면 Generated by create next app. 라고 뜬다.
구글 서치 콘솔 공식문서를 확인해보니 URL 등록과 구글 검색결과는 다를수도 있다고 한다.
게다가 나는 '등록되어 있음'도 아니고 '등록할 수 있음' 이다.
- 'URL이 Google에 등록되어 있음'이라고 표시된다고 해서 페이지가 실제로 Google 검색결과에 표시된다고 보장할 수는 없습니다. 보고서에서 Google에 표시되기 위한 모든 조건을 확인하지는 않기 때문입니다. URL의 표시 여부를 확실하게 테스트하려면 Google에서 페이지 URL을 검색하세요.
우선 색인 생성이 완료될 때까지 기다려보기로 한다.
지금은 우선 site:url을 검색했을 때 사이트맵에 작성한 url이 모두 뜨고 메타태그도 잘 적용되어있다. 하지만 서비스 이름을 검색했을 때 여전히 변경된 메타태그가 적용되지 않았다.
설정은 여기서 끝이다. 아직 반영 안된 설정이 반영될 때까지 기다리면 된다.
작업 2일차 결과물
페이지 색인은 여전히 데이터 처리중이라고 뜨지만 서비스를 검색했을 때 메타태그가 잘 뜬다.
이제 실적 탭에서 클릭수, 노출수, CTR, 평균 게재순위를 볼 수 있다. CTR은 클릭수/노출수이다.
작업 3일차 결과물
드디어 페이지 색인이 생성되었다. 이제 서비스를 검색했을 때 메인페이지가 아닌 페이지도 결과에 반영이 된다.
그런데 7개의 페이지가 색인 생성이 안되었고, 잘되던 URL 검사 실시간 테스트에서 에러가 발생했다.
우선 크롤링 실패 원인부터 분석해보자.
페이지 공개 상태 박스에 ' 실패: Robots.txt를 찾을 수 없음' 라고 써있다. 분명 정적 파일을 넣는 디렉토리에 robots.txt를 넣어줬고 빌드해서 url/robots.txt에 접근 되는걸 확인했는데 왜 없다고 하는걸까?
설정 탭에 들어가서 보고서를 확인해봤다. 어제까지 멀쩡하던 robots.txt에 심각한 오류가 있다고 한다.
확인해보니 크롤링에 실패해서 뜬 문구였다.
잘되던 크롤링이 안 될 이유가 없어 검색해보니 과부하로 인해 크롤링이 실패한 것일 수도 있다고 해서 재크롤링 시도를 했으나 실패했다.
다행히 몇분 후에 다시 요청을 했더니 됐다.
이제 색인 생성에 실패한 페이지들을 알아보자.
이상하게 7개중 5개는 유효한 경로가 아니었다. 없는 페이지인데 크롤링봇이 크롤링을 시도한 것이다. 혹시 사이트맵에 잘못 등록되어있는건지, 프로젝트를 할 때 사용하지 않는 경로를 등록해둔 것인지 확인을 했는데 문제 없었다.
유효하지만 색인이 생성되지 않은 두 페이지는 다시 유효성 검사를 신청했다.
검사 결과를 기다리는 동안 서버가 내려갔다. 하나 남은 문제를 해결하지 못해서 아쉽지만, 그래도 SEO 최적화 시도를 해봤다는 것에 만족한다.
회고
사실 우리가 만든 서비스는 랜딩 페이지를 제외하고는 로그인을 해야 볼 수 있다. 그렇기 때문에 어떻게 해야 최대한 콘텐츠를 노출 시킬 수 있을지 고민이 많았다. 대부분의 페이지에는 이렇게 서비스 이용 안내 문구가 들어가있지만, 사용자들은 '작성한 노트' '북마크'와 같은걸 검색하지는 않을 것이다. SEO 최적화를 하는 이유가 우리 서비스를 모르는 사람에게도 검색 결과를 통해 서비스를 알릴 수 있기 때문인데 노출시킬 수 있는 범위가 한정되어있다보니 어려웠다. 익스텐션으로 백준에서 내가 제출한 문제 정보와 코드를 가져오기 때문에 이 정보를 노출 시킬 수 있다면 블로그처럼 외부 사용자 유입이 있을텐데 하는 아쉬움은 있었다.
이제와서 드는 생각이지만, 검색 페이지의 경우엔 로그인 권한이 없어도 괜찮았을 것이다. 검색 전에 모든 초기데이터가 들어오는데, 검색 결과에는 알고리즘 문제 제목, 번호가 포함되어있기 때문에 SEO에 더 유리하지 않을까 생각했다. 설계할 때 SEO 최적화를 생각하지 못했다. 이제 와서 권한을 풀어달라고 하기엔 프로젝트가 완전히 끝나 팀원들 손을 떠난 상태에서 그냥 내 욕심으로 이것저것 최적화해보는거라 말을 못했다. 급하게 개발을 하느라 보이는 부분만 신경쓰고 최적화를 완전히 배제했는데 서버가 열려있는 일주일동안 최대한 해봤다. 개인적으로 프로젝트는 끝났지만 홍보를 한다면 실사용자가 꽤 될거같다고 생각한 서비스였는데, 팀 분위기도 그렇고 이것저것 일이 많아 이어가지는 못할것 같아 아쉬웠다.
참고자료
'나도 공부한다 > 프로젝트' 카테고리의 다른 글
| vscode에서 플러터 개발할 때 디버깅 눌러도 안드로이드 스튜디오 작동 안하는 문제 (1) | 2024.07.02 |
|---|---|
| S3 버킷 만들고 프론트엔드단에서 사용해보기 (Next.js) (0) | 2024.06.12 |
