01. SEO 개념
💡 SEO(Search Engine Optimization, 검색 엔진 최적화) : 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업으로, SEO를 통해 검색 엔진에서 웹페이지를 보다 상위에 노출될 수 있겠금 만들 수 있다.
🔨 1. SEO 종류
✔️ On-Page SEO :
- 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법이다.
✔️ Off-Page SEO :
- 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법이다.
- 광고비를 지불하는 SEO로 → 웹 페이지 내용이나 구조와는 관계가 없다.
02. SEO에 영향을 미치는 요소
SEO에 영향을 미치는 요소 중에서, On-Page에서 통제할 수 있는 요소들에 대해 알아보자.
🔨 1. On-Page에서 통제할 수 있는 요소
🔧 1. 요소
- <title> 요소는 검색 결과창에서 제목에 해당하는 요소로, <head> 요소의 자식 요소로 작성한다.
- <title> 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있다.
- 제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어진다.
- <title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.
- 그렇다고 같은 키워드를 반복하면 검색시 불이익을 받을 수 있으므로 -> 제목에 핵심 키워드는 한 번만 포함시키는게 좋다.🔧 2. 요소
- <meta> 요소는 메타 데이터를 담는 요소로, 메타 데이터는 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터이다.
- <meta> 요소도 <head> 요소의 자식 요소로 작성해주는 것이 일반적이다.🔧 3. 요소
- 요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 확률이 높다.
- 검색엔진도 요소의 내용을 중요하게 취급하므로 → 핵심 키워드를 요소 안에 넣어주는 것이 SEO에 좋다.
- 하지만 똑같은 키워드를 사용하는 것은 역효과를 낳을 수 있으므로 → 비슷한 키워드로 대체하는 등의 방법이 좋다.
🔧 4. 콘텐츠
1) 개성있는 브랜딩
- 아이디어나 이름이 겹치지 않는다면, 관련 키워드를 검색했을 때 해당 웹 사이트가 상위권에 뜰 가능성이 매우 높다.
2) 복사 + 붙여넣기 금지
- 타 사이트의 글을 그대로 복사해서 사용하면 검색 엔진은 중복 문서로 판정하여 아예 검색 결과에서 생략한다.
3) 간결한 제목과 설명글
4) 최대한 글자로 작성하기
- 검색엔진 SEO은 이미지를 읽을 수 없다.
- 꼭 이미지를 넣어야 한다면 alt 속성을 사용하여 해당 이미지에대한 설명을 텍스트로 작성하는 것이 좋다.
- 주의점 : 너무 길게 작성하면 스팸 요소로 인식할 수 있으니 꼭 필요한 설명만 작성한다.(O) <img src="코드스테이츠_로고.png" alt="코드스테이츠 로고" />
(X) <img src="코드스테이츠_로고.png" alt="프론트엔드 백엔드 블록체인 프로덕트매니지먼트 인공지능 데브옵스 등 다양한 커리어 전환 부트캠프를 진행하는 코드스테이츠 로고" />🔨 2. 요소 2가지 목적
🔧 1. name 속성을 사용하며, SEO를 위해 사용하는 목적
- 이처럼 검색 결과창에서 제목 아래 설명글이 요소안에 들어있는 내용이다.
- 해당 웹 페이지가 어떤 데이터를 다루는지 설명하는 메타 데이터가 들어간다.
🔧 2. property 속성을 사용하며, 다른 사람들에게 공유하기 위한 목적
- property을 사용하는 경우를 오픈 그래프(Open Graph)라고 하며, 각 속성값 앞엔 오픈 그래프를 뜻하는 'og'가 붙는다.
- 페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들어졌다.
- 오픈 그래프가 SEO와 전혀 연관이 없는 것은 아니다. → 해당 페이지에 방문자 수가 많다면 검색 시 상위에 노출될 확률이 높아지기 때문이다.
🔨 3. SEO를 위한 meta 요소
<meta name="속성값" content="내용" />- 주요 속성값
| name 속성값 | 설명 |
|---|---|
| description | 콘텐츠에 대한 간략한 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다. |
| keywords | 웹 페이지의 관련 키워드들을 나열할 때 사용합니다. |
| author | 콘텐츠의 제작자를 표시합니다. |
🔨 4. 오픈 그래프 (open graph)
- 링크를 공유했을 때 미리보기에 뜨는 내용들을 다루는 요소다.
og:title속성은<title>요소보다 우선되어 표시된다. (다른 속성도 마찬가지)og:description속성이 없으면description속성이 있더라도 미리보기 설명이 표시되지 않는다.
<meta property="속성값" content="내용" />- 주요 속성값
| property 속성값 | 설명 |
|---|---|
| og:url | 페이지의 표준 URL입니다. |
| og:site_name | 사이트의 이름입니다. |
| og:title | 콘텐츠의 제목입니다. |
| og:description | 콘텐츠에 대한 간략할 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다. |
| og:image | 미리보기로 표시될 이미지입니다. |
| og:type | 콘텐츠 미디어의 유형입니다. 기본 값은 website로, video, music 등의 유형을 표시할 수 있습니다. |
| og:locale | 리소스의 언어로, 기본값은 en_US입니다. 한국은 ko_KR입니다. |
한입 크기로 베어먹는 개발지식 🍰