내가 쓴 글을 구글에 검색했을 때 작성한 문서들이 구글 검색에 나오게 하고 싶다는 생각이 들었다.
그리서 SEO에 대해서 구글 공식문서를 찾아보고, 프론트엔드 개발에서 적용할 수 있는 내용들을 블로그에 적용해 보았다.
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko
구글 검색엔진 기본 가이드
SEO, 검색 엔진 최적화란 무엇인가?
SEO(Search Engine Optimization)는 생성된 페이지가 구글에서 잘 검색되도록 만드는 것이다. 구글에서는 페이지를 탐색할 때 크롤러 로봇을 사용하는데 이 로봇이 잘 읽을 수 있도록 몇 가지 작업을 할 수 있다. SEO가이드 문서에서 간단하게 적용할 수 있는 내용은 바로 적용해 보고 차차 추가해 나갈 예정이다.
고유하고 정확한 페이지 제목 만들기
“홈페이지의 title요소는 웹사이트 또는 비즈니스의 이름을 명시할 수 있으며 비즈니스가 실제로 위치한 장소나 주로 다루는 항목, 주요 품목 등 중요한 정보를 포함할 수도 있습니다.”
지금 있는 title은 index든 포스팅 페이지든 제목이 personal blog로 변하지 않기 때문에 블로그 프로젝트의 포스팅 된 글들의 제목을 페이지의 타이틀로 적용하면 좋을 것 같다.
지금있는 title과 description은 layout파일의 metadata에 기록되어 있다. next.js에서는 페이지 마다 다른 타이틀을 지정할 수 있도록 Head를 사용할 수 있는데 이를 적용하기 위해서는 layout파일의 metadata를 지워야 한다.
인덱스 페이지에서는 title을 익현blog로 변경하고, 메타데이터로 '성익현의 블로그입니다.'를 입력했다.
export default async function Home() {
const postList = await getDocumentData();
const guestBookList = await getGuestBookData();
return (
<>
<title>익현 blog</title>
<meta name="description" content={'성익현의 블로그 입니다.'} />
<Normal>
<Index postList={postList} guestbookList={guestBookList} />
</Normal>
</>
);
}카카오톡에서 페이지를 보냈을 때 타이틀이 잘 날라오는 것을 확인할 수 있었다.
SEO 가이드 문서에서는 홈페이지의 title 요소를 만들 때 몇가지 주의사항이 기재되어 있다.
요약하자면,
- 자연스럽게 읽히며 내용의 주제를 효과적으로 전달하는 제목을 선택
- 페이지 내용과 관계없거나 제목없음과 같은 의미없는 형식은 피해야 함.
- 각 페이지마다 고유한 title 텍스트가 있어야 함(해당 페이지가 같은 사이트의 다른 페이지와 구분되기 위해)
표제 태그를 사용하여 중요한 텍스트를 강조
“의미 있는 표제를 사용하여 중요한 주제를 표시하고 콘텐츠의 계층 구조를 만들어 사용자가 쉽게 문서를 탐색할 수 있도록 하세요.”
페이지의 중요한 부분과 덜 중요한 부분이 무엇인지 생각해 보고 표제 태그를 어디에 사용하는 것이 적절할지 결정해야 한다. 블로그에서 DB에 저장된 글을 불러와서 페이지에 렌더링 할 때 제목 부분은 h1태그를 사용하고 있고, 텍스트 에디터에서 중요한 부분은 표제 태그(h2, h3...)을 이용하여 표시할 것이다.
이 내용은 시멘틱 태그와 교집합이 있는 부분이며, 프로젝트를 만들 때 이미 적용된 내용이기 때문에 넘어간다.
SEO 가이드 문서에 몇가지 주의사항이 개재되어 있다.
- em, string과 같은 태그를 사용하는 것이 더 적절할 수 있는데 표제 태그를 남용하지 않을 것.
- 표제 태그 크기를 무질서하게 섞어 쓰지 않을 것.
- 표제가 너무 길거나 한 페이지에서 표제 태그를 과도하게 사용하지 않을 것
- 표제 태그를 스타일을 위해 사용하고 구조를 위해 활용하지 않을 경우는 피해야 할 것.
이미지 최적화 하기
“HTML 이미지 요소를 사용하여 콘텐츠에 이미지를 삽입해야 합니다.”
alt 속성을 사용하여 검색 엔진이 이미지에 대한 정보를 얻을 수 있어야 한다.
alt 속성 또한 프로젝트에 이미 적용된 내용이기 때문에 넘어간다.
SEO 가이드 문서에 기재된 주의사항은 아래와 같다.
- 스팸으로 간주될 수 있을 정도록 테스트를 길게 작성하지 않을 것.
- 매우 긴 파일 이름을 사용하지 않을 것.
- css를 사용하여 색인을 생성할 이미지를 표시하는 것.
사이트를 모바일 친화적으로 만들기
“오늘날의 세상은 모바일 중심으로 돌아갑니다. 대다수 사람들이 휴대기기를 사용하여 Google에서 검색합니다. 사이트의 데스크톱 버전은 휴대기기에서 보고 사용하기 불편할 수 있기 때문에 모바일 기능을 지원하는 사이트가 있어야 온라인 인지도를 유지할 수 있습니다.”
SEO 가이드 문서에서는 3가지 모바일 전략을 지원한다.
- 반응형 웹 디자인(권장)
- 동적 게재
- 별도 URL
프로젝트에 반응형 웹 디자인을 적용하여 만들었기 때문에 나름 모바일 친화적으로 동작하고 있다.
google에서는 모바일 친화성 테스트를 제공하며, 아래 주소에서 모바일 친화적 라벨이 표시되는 기준을 충족하는 지 확인할 수 있다.
https://search.google.com/test/mobile-friendly?hl=ko
색인이 정확하게 생성될 수 있도록 모바일 사이트를 구성하려면 아래 사항을 유의해야 한다.
- 동적 게재를 사용하거나 별도의 모바일 사이트가 있다면 이를 구글에 알림
- 반응형 웹 디자인을 사용할 경우 meta name = ‘viewport’ 태그를 사용하여 브라우저에 조정 방법을 알림.
- 리소스를 크롤링할 수 있는 상태로 유지할 것.
- 모든 기기에서 모든 기능을 제공할 것(모바일 사용자도 웹 사용자와 같은 모든 기능을 이용할 수 있게)
위 내용중 이미 구현된 내용도 있고, 새롭게 추가한 내용도 있는데, 몇 가지 간단하게 적용할 수 있는 내용이 있어 바로 적용하였다. 메타데이터 description에 들어갈 내용은 어떻게 생성할지 생각해 봐야 할 것 같다.
ref