💡 SEO 적용 계기
회사에서 이번에 업무로 주어진 회사 소개 사이트 작업을 거의 다 마무리 할 때쯤, 그래도 실제 서비스 사이트가 아니라 단순한 회사 소개 사이트 일지라도 검색 엔진 최적화 작업을 해보면 좋지 않을까,, 싶어서 진행하게 되었다. (아무도 시킨 사람은 없지만,,) 내 나름대로 태그들을 적용하는 과정에서 공부도 되고 회사 사이트가 노출되는데 더 기여할 수 있겠다는 생각에 진행하였다!
개발 환경
Next.js + TypeScript
검색 엔진 최적화 (SEO)
검색 엔진 최적화가 무엇인지 검색해보면 정말 다양하게 정의내리는 것을 볼 수 있는데, 내가 정리 했을 때는 다음과 같이 정의 내릴 수 있을 것 같다.
- 검색 엔진 결과 웹 페이지의 상위 노출도를 높이는 작업
- 사용자의 검색 의도를 이해하고 이에 맞춰 웹 페이지 컨텐츠를 제작하는 작업
- 페이지가 검색 결과 페이지에서 잘 노출 되도록 웹페이지의 태그와 링크 구조를 개선하는 작업
SEO를 위한 작업 - 1. 알맞은 html 태그
-
위에서 적어놓았듯이 검색 엔진 최적화를 위해서는 우선 아주 기본적으로 태그를 잘 활용할 줄 알아야한다.
-
간단한 구조를 짜더라도 해당 컨텐츠가 어떤 컨텐츠 인지, 잘 나타낼 수 있도록 의미있는 태그를 사용해서 구조를 작성해 나가야 한다.
-
헤더에는
<header>, 푸터에는<footer>, 페이지 내부에 제일 크게 감싸는 태그로<main>을 사용했고, 그 속에 영역들은<section>태그를 사용하고 페이지 대표 타이틀과 각 섹션 별 타이틀은<h1>~<h6>, 긴 설명 글은<p>, 리스트로 볼 수 있는 것들은 전부<ul>,<li>태그를 사용하는 것을 규칙으로 삼고 페이지들을 그려나갔다. -
이렇게 시멘틱 태그를 이용해 구조를 작성해주면, 그냥
<div>태그만 남발해서 구조를 작성할 때 보다 훨씬 SEO에 도움이 된다고 할 수 있다. -
사실 이거는 많이 알고 있는 내용이고, 알고 있다면 어렵지 않게 적용할 수 있는 내용이다. 다만 작성할 때 조금은 신경을 써서 작업을 해야될 것이다.
SEO를 위한 작업 - 2. head meta 태그 적용
-
html에 head 태그 내에 meta 태그를 적용하면 SEO에 도움이 많이 된다는 정보를 많이 알고 있을 것이다.
-
그래서 나도 찾아봤는데, 생각보다 종류가 되게 다양하고 각 페이지 별로 다르게 meta 태그를 적용할 수 있도록 컴포넌트화 하는 작업도 가능해서 나 역시 컴포넌트화 하는 방법으로 진행했다.
메타 태그 종류 살피기
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="keywords" content="사이트 내 키워드 적기" />
<meta name="og:site_name" content="사이트 이름 적기" />
<meta property="og:type" content="사이트 타입 적기" />
<meta property="og:article:author" content="사이트를 작성한 사람 적기" />
<meta property="og:image" content={"웹 사이트를 나타내는 이미지 경로 적기"}/>
<meta property="og:url" content={"웹 사이트 url 적기"} />
<meta name="description" content={"웹 사이트 설명 적기"}/>
<meta name="og:title" content={"웹 사이트 제목 적기"}/>
<meta name="og:description" content={"웹 사이트 설명 적기"}/>- 가장 많이 쓰이는 메타 태그들만 적어놓은 것으로, 이 중에서 나는 페이지에 공통으로 적용될 수 있는 태그들은
_document.tsx파일에 작성했고, 각 페이지 별로 다르게 적용되었으면 하는 태그들은 따로 모아서 컴포넌트화 하였다.
공통 메타 태그 적용
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="keywords" content="비브릭, 블록체인, 금융" />
<meta name="og:site_name" content="BBrick | 블록체인 금융 혁신 기업" />
<meta property="og:type" content="website" />
<meta property="og:article:author" content="BBrick" />
<meta property="og:image" content={"이미지 주소"}/>
<meta property="og:url" content={"url 주소"} />og:image과og:url태그 같은 경우는 다른 적용 사례들을 보니까 커스텀화 해서 적용하는 경우들이 많았는데, 나 같은 경우에는 공통적으로 적용하였다.
페이지 별 다른 내용의 메타태그 적용을 위한 컴포넌트 작성
interface HeadMeta {
title?: string;
description?: string;
}
const HeadMeta = (props: HeadMeta) => {
const { title, description } = props;
return (
<Head>
<title>{`BBrick | ${title || "블록체인 금융 혁신 기업"}`}</title>
<meta
name="description"
content={
description ||
"블록체인이 활용된 새로운 금융 생태계 조성에 앞장서는 비브릭입니다."
}
/>
<meta
name="og:title"
content={`BBrick | ${title || "블록체인 금융 혁신 기업"}`}
/>
<meta
name="og:description"
content={
description ||
"블록체인이 활용된 새로운 금융 생태계 조성에 앞장서는 비브릭입니다."
}
/>
</Head>
);
};
export default HeadMeta;-
각 페이지 별 제목 (title) 내용과 페이지에 대한 설명 (description)을 prop 으로 받아서 적용할 수 있도록 커스텀 메타태그 컴포넌트를 작성하여 적용하였다.
-
만약 prop으로 전달받은 내용이 없다고해도, 기본 값이 적용되도록 작성해주었다.
이렇게 해서 회사 사이트 SEO 작업을 진행해보았는데, 원래 일정 사항에는 없었던 내용이지만 스스로 회사에 도움도 되고, 이런 작업을 경험해보고 적용해보고자 진행했는데 실제로 결과물을 보니 뿌듯했다.
회사 사이트 바로가기
