why not

[사용자 친화 웹] 웹 표준2 (SEO) 본문

CodeStates/블로깅 챌린지

[사용자 친화 웹] 웹 표준2 (SEO)

novem 2023. 3. 2. 13:51

1. SEO란?

  • 만든 웹 페이지가 검색 결과 상위에 없거나 뒤 페이지로 밀려나지 않게 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업인 SEO(Search Engine Optimization, 검색 엔진 최적화)가 필요
  • SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출할 수 있다.

1-1. SEO 분류

1-1.1) On-Page SEO -> 집중!

  • 페이지 내부에서 진행할 수 있는 SEO
  • 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법

1-1.2) Off-Page SEO

  • 웹 사이트 외부에서 이루어지는 SEO
  • 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법
  • 웹 페이지 내용이나 구조와는 관계가 없다.

2. SEO에 영향을 미치는 요소

2-1. On-Page에서 통제할 수 있는 요소

2-1.1) <title> 요소

  • 검색 결과에서 상당히 중요한 역할
  • <title> 요소는 검색 결과창에서 제목에 해당하는 요소
  • <head> 요소의 자식 요소로 작성
  • <title> 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있다.
  • 제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어진다.
  • <title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.
  • 그렇다고 같은 키워드를 반복하면 검색시 불이익을 받을 수 있기 때문에, 제목에 핵심 키워드는 한 번만 포함하기

2-1.2) <meta> 요소

  • 메타 데이터를 담는 요소
  • 메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터
  • <meta> 요소도 <head> 요소의 자식 요소로 작성해주는 것이 일반적이다.
  • 해당 웹 페이지가 어떤 데이터를 다루고 있는지를 설명하는 메타 데이터가 들어있음을 알 수 있다.
  • <meta> 요소에 들어가는 내용은 검색 결과창에서만 확인할 수 있는 것이 아니고, 소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 포함된다.

 SEO를 위한 meta 요소

<meta name="속성값" content="내용" />

 

 

 

주요 속성값

name 속성값 설명
description 콘텐츠에 대한 간략한 설명, 검색 결과에서 제목 밑에 뜨는 내용웨
keywords 웹 페이지의 관련 키워드들을 나열할 때 사용
author 콘텐츠의 제작자를 표시

오픈 그래프(open graph)

<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

-> SEO가 목적이라면 name 속성을 사용하는 <meta> 요소에 더 중점을 두되, 오픈 그래프도 잘 작성해주시는 것이 좋다.

2-1.3) <hgroup> 요소

  • <hgroup> 요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높아서 검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급한다.
  • 콘텐츠를 작성할 때 핵심 키워드를 의식해서 <hgroup> 요소에 넣어주는 것도 SEO에 도움이 된다.
  • 똑같은 키워드만 반복해서 넣는 것은 역효과이므로 이미 사용한 핵심 키워드를 그대로 사용하지 않고, 비슷한 키워드로 대체해서 사용하거나, 핵심 키워드의 관련 키워드들을 쭉 포함시키는 것이 좋다.

2-1.4) 콘텐츠

- 개성있는 브랜딩

  • 아이디어나 이름이 겹치지 않는다면, 관련 키워드를 검색했을 때 해당 웹 사이트가 상위권에 뜰 가능성이 매우 높다.
  • 애초에 해당 웹 사이트만 검색될 수 밖에 없는 아이디어를 내는 것도 좋은 SEO 전략이다.
  • 꼭 이름이나 서비스의 종류가 아니더라도, 웹 사이트만의 독특한 이벤트나 콘텐츠를 만들어내는 것도 훌륭한 방법

- 복사 + 붙여넣기 금지

  • 타 사이트의 글을 그대로 복사해서 사용하면 검색 엔진은 중복 문서로 판정하여 아예 검색 결과에서 생략해릴 수 있다.
  • 애초에 먼저 작성되었던 글이 먼저 뜰 확률이 높기 때문에, 검색 결과 상위권이 뜰 가능성도 그렇게 높지 않아서 글을 그대로 복사 붙여넣기 하는 방식으로 콘텐츠를 작성하는 것은 지양해야한다.
  • 타 사이트의 글을 인용하고 싶다면, 일부만 가져오면서 링크를 첨부하여 출처를 표기하는 것이 바람직하다.

- 간결한 제목과 설명글

  • 단순 검색 엔진 노출 횟수를 늘리기 위해서 전혀 관련 없는, 실시간으로 많이 검색되는 키워드 사용은 지양해야 한다.
  • 웹 사이트와 관련이 있는 키워드라고 해도, 같은 키워드를 너무 많이 반복해서 사용하면 바람직하지 않다.

- 최대한 글자로 작성

  • 적절한 이미지의 사용은 콘텐츠의 품질을 높여주지만 글자로 적어도 될 내용을 굳이 이미지로 만들어서 작성하는 것은 SEO에는 도움이 되지 않는다.
  • 꼭 이미지를 넣어야 한다면 alt 속성을 사용하여 해당 이미지에 대한 설명을 텍스트로 작성하는 것이 좋다.
  • 단, 이 역시 너무 길게 작성하면 스팸 요소로 인식할 수 있으니 꼭 필요한 설명만 작성하는 것이 좋다.
(O) <img src="코드스테이츠_로고.png" alt="코드스테이츠 로고" />
(X) <img src="코드스테이츠_로고.png" alt="프론트엔드 백엔드 블록체인 프로덕트매니지먼트 인공지능 데브옵스 등 다양한 커리어 전환 부트캠프를 진행하는 코드스테이츠 로고" />

 

이 외의 SEO에 영향을 주는 요소 레퍼런스

'CodeStates > 블로깅 챌린지' 카테고리의 다른 글

[네트워크] 심화 - TCP/IP  (0) 2023.03.06
[사용자 친화 웹] 웹 접근성  (0) 2023.03.03
[사용자 친화 웹] 웹 표준1  (0) 2023.02.28
자바스크립트 엔진  (0) 2023.02.27
Redux  (0) 2023.02.24
'CodeStates/블로깅 챌린지' Related Articles more