네이버나 구글같은 검색 엔진을 이용해 보신 경험이 있다.
그리고 검색했을 때 원하는 결과를 바로 찾기 어려웠던 경험 역시 한 번 정도는 있을 거다.
반대로 검색하여 원하는 결과를 찾았는데 굳이 마지막 페이지까지 매번 보는 사람은 잘 없다.
심지어 원하는 결과가 상위에 있다면 1페이지조차 전부 확인 안하고 넘어가는 경우가 대부분일 것이다.
즉, 우리가 이렇게 열심히 공부해서 웹 페이지를 만들어도, 검색했을 때 검색 결과 상위에 없거나 뒤 페이지로 밀려난다면 아무도 찾지 않는 웹 페이지가 되어버린다.
이런 상태를 방지하기 위해 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업, SEO(Search Engine Oprimization, 검색 엔진 최적화)가 필요하다.
SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 있다.
SEO는 크게 ON-Page SEO와 OFF-Page SEO 두 가지로 나뉘어진다.
On-Page SEO: 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTM요소 사용법 등을 이용하는 방법이다.
Off-Page SEO: 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크)등을 이용하는 방법으로, 웹페이지 내용이나 구조와는 관계가 없다.
SEO에 영향을 미치는 요소 중에서, On-Page에서 통제할 수 있는 요소들에 대해 알아보자
<title> 요소<title> 요소는 검색 결과창에서 제목에 해당하는 요소로, <head> 요소의 자식 요소로 작성한다.
아마 검색엔진에서 검색 후 제목만 살펴보면서 어떤 페이지에 들어가볼지 고민 할때가 있다. 이처럼 제목은 검색 결과에서 상당히 중요한 역할을 한다.
<title> 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있다.<title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.<meta> 요소<meta>요소는 메타 데이터를 담는 요소이다.
메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터이다.
<meta> 요소도 <head>요소의 자식 요소로 작성해주는 것이 일반적이다.
검색 결과창에서 제목 밑에 따라오는 설명글이 <meta>요소안에 들어있는 내용이다.
해당 웹 페이지가 어떤 데이터를 다루고 있는지를 설명하는 메타 데이터가 들어있음을 알 수 있다.
<meta>요소에 들어가는 내용은 검색 결과창에서만 확인할 수 있는 것이 아니다.
소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 이 <meta>요소에 들어가 있는 내용이다.
이 두 가지의 경우 모두 <meta>요소를 사용하지만, 각각의 목적은 엄연히 다르다.
첫 번째 경우는 name 속성을 사용하며, SEO를 위해서 사용하는 것이 목적이다.
두 번째 경우는 property 속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적이다.
특히 property 속성을 사용하는 경우는 오픈 그래프(Open Graph)라고 하며, 페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들었으며, 각 속성값 앞에는 오픈 그래프를 뜻하는 "og"가 붙는다.
정리하면 아래와 같다.
SEO를 위한 meta 요소
<meta name="속성값" content="내용" />
주요 속성은 아래와 같다.

오픈 그래프(open graph)
<meta property="속성값" content="내용" />
주요 속성은 아래와 같다.

<hgroup> 요소<hgroup> 요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높다.
검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급한다.
콘텐츠를 작성할 때 핵심 키워드를 의식해서 <hgroup>요소에 넣어주는 것도 SEO에 도움이 된다.
하지만 같은 키워드만 반복해서 넣는 것은 역효과를 불러올 수도 있으니 이미 사용한 핵심 키워드를 그대로 사용하지 않고 비슷한 키워드로 대체해서 사용하거나, 핵심 키워드의 관련 키워드들을 쭉 포함시키는 것이 좋다.
<title> 요소를 다룰 때 이미 설명햇지만, 페이지 제족과 설명글에 이것 저것 많이 적어 넣는다고 해서 검색이 잘 되는 것은 아니다.alt속성을 사용하여 해당 이미지에대한 설명을 텍스트로 작성하는 것이 좋다.(O) <img src="개발자_로고.png" alt="개발자 로고" />
(X) <img src="개발자_로고.png" alt="프론트엔드 백엔드 블록체인 프로덕트매니지먼트 인공지능 데브옵스 등 다양한 커리어 전환 부트캠프를 진행하는 개발자 로고" />