사용자 친화 웹 2. SEO
현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
학습목표
- SEO의 개념과 필요성을 기억한다.
- SEO의 종류를 기억하고 구분할 수 있다.
- SEO에 영향을 주는 요소의 종류와 작성 방법을 기억한다.
- SEO에 영향을 주는 요소를 직접 작성할 수 있다.
1. SEO 개념
검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업, SEO(Search Engine Optimization, 검색 엔진 최적화)가 필요합니다.
SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 있습니다.
SEO는 크게 On-Page SEO와 Off-Page SEO 두 가지로 나뉘어집니다.
-
On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 사용법 등을 이용하는 방법입니다.
-
Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크)등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없습니다.
2. SEO에 영향을 미치는 요소
1. <title> 요소
<title> 요소는 검색 결과창에서 제목에 해당하는 요소로 <head>요소의 자식 요소로 작성합니다.
<title>요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아집니다. 하지만 같은 키워드를 반복하면 검색시 불이익을 받을 수 있습니다. 제목에 핵심 키워드는 한 번만 포함시키는 게 좋습니다.
2. <meta> 요소
<meta> 요소는 메타 데이터를 담는 요소입니다. 메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터입니다.
<meta>요소도 <head>요소의 자식 요소로 작성해주는 것이 일반적입니다.
위 아래 두 이미지 모두 <meta> 요소를 사용하지만, 각각의 목적은 엄연히 다릅니다. 위 이미지 경우는 name 속성을 사용하여, SEO를 위해서 사용하는 것이 목적입니다.
아래 이미지의 경우 property 속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적입니다. 특히 property속성을 사용하는 경우는 오픈 그래프(Open Graph)라고 합니다.
2.1 SEO를 위한 meta 요소
<meta name="속성값" content="내용" />주요 속성값은 다음과 같습니다.
description : 콘텐츠에 대한 간략한 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다.
keywords : 웹 페이지의 관련 키워드들을 나열할 때 사용합니다.
author : 콘텐츠의 제작자를 표시합니다.
오픈 그래프(open graph)
<meta property="속성값" Content="내용" />주요 속성값은 다음과 같습니다.
og:url : 페이지 표준 URL입니다.
og:site_name: 사이트의 이름입니다.
og:title: 콘텐츠의 제목입니다.
og:description: 콘텐츠에 대한 간략한 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하면 됩니다.
og:image: 미리보기로 표시될 이미지입니다.
og:type: 콘텐츠 미디어의 유형입니다. 기본 값은 website로, video, music 등의 유형을 표시할 수 있습니다.
og:locale: 리소스의 언어로, 기본값은 en_US입니다. 한국은 ko_KR입니다.
3. <hgroup>요소
<hgroup>요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높습니다. 따라서 검색 엔진도 <hgroup>요소의 내용을 중요하게 취급합니다.
4. 콘텐츠
- 개성있는 브랜딩
- 복사 + 붙여넣기 금지
타 사이트의 글을 그대로 복사해서 사용하면 검색 엔진은 중복 문서로 판정하여 아예 검색 결과에서 생략해버리기도 합니다. - 간결한 제목과 설명글
- 최대한 글자로 작성하기
