SEO(검색 엔진 최적화)란?

2020. 4. 21. 22:21

SEO란 Search Engine Optimization 의 약자이며

검색 엔진 최적화를 뜻한다.

웹페이지(특히 구글)의 검색엔진이 페이지의 자료를 수집하고

해당 검색 엔진이 좋아하는 조건을 맞춰

다른 사용자들이 키워드를 검색을 했을 때 내가 작업한 페이지를 상위 배치하는 작업을 말한다.

최근에 기업에서는 마케팅과 연관지어 검색 유입을 늘리고

광고 효과를 늘리기 위해 더욱 더 많은 관심을 갖고있는 분야이다.

1. SEO(검색 엔진 최적화)의 필요성

SEO를 적용하면 뭐가 좋길래,

검색 엔진에 상위에 배치가 되면 어떤 점이 좋길래

SEO의 중요성이 점점 증가하게 되는걸까를 생각해보았다.

우선 전 세계적으로 가장 많은 사용자들이 사용하는 웹사이트인 '구글'의 예를 들면

위의 이미지와 같이 거의 모든 사용자들이

구글 검색을 해서 검색결과를 얻을 때,

1페이지에서만 머무르며 원하는 정보를 얻어가는 것을 알 수 있다.

즉, 2페이지 이후의 내용들은

사용자들의 관심을 받지 못한다.

쉽게 말하자면 '나이키 신발' 이라는 키워드를 검색했을 때,

내가 판매하는 페이지가 1페이지 이후에 있다면

많은 사용자들이 내가 판매하는 페이지를 클릭조차 안한다는 얘기가 된다.

2. SEO(검색 엔진 최적화) 적용 방법

SEO를 적용하기 위해서는 크게 6가지의 방법을 적용할 수 있다.

2-1. 보안 프로토콜 (HTTPS)

2014년 구글에선 HTTP 일반 프로토콜을 사용하는 웹 사이트보다

HTTP 일반 프로토콜에 SSL이라는 보안 프로토콜을 더한 HTTPS 보안 프로토콜을

사용하는 웹 사이트가 더 높은 점수를 받을 것이라 발표 하였다.

그리고 2017년부터는 HTTPS 보안 프로토콜로 접속하는 사이트가 아닌 경우 크롬에서

경고 문구가 노출된다.

2-2. robots.txt (로봇 배제 표준 파일), Sitemap.xml (사이트맵)

- robots.txt

robots.txt는 검색엔진 로봇들의 접근을 제어한다.

웹사이트의 사이트맵이 어디있는지 알려주고 특정 페이지를 검색엔진에 비노출 시킬때도 사용한다.

* 파일명은 robots.txt로 지정해야하고 utf-8로 인코딩 되어 있어야한다.

* 웹사이트에는 robots.txt 파일은 하나만 있어야한다.

* robots.txt 파일은 웹사이트의 루트에 있어야 한다.

예를 들어

abcdqbbq.tistory.com 아래의 모든 페이지를 제어하려면

abcdqbbq.tistory.com/robots.txt에 파일이 위치해야한다.

- Sitemap.xml 사이트맵

사이트맵은 웹사이트 내에 모든 페이지들의 목록을 나열한 파일로 책의 목차와 같은 역할을 한다.

사이트맵은 웹사이트 내의 모든 페이지들이 원활하게 크롤링되고 색인될 수 있도록 도와준다.

* 사이트맵은 어디에서나 게시할 수 있지만 게시된 위치의 하위 항목에만 영향을 주기 때문에

사이트의 루트에 게시하는 것이 좋다.

* utf-8로 인코딩 되어있어야 한다.

* 페이지가 모바일, pc 두 버전의 URL이 다르다면 사이트맵에서 한 버전에만 연결하는 것이 좋다.

하지만 두 버전 모두 연결이 필요한 경우 URL에 주석을 추가하여 모바일, pc버전을 표시해준다.

2-3. <title>, description 태그의 사용

<title> 태그는 페이지의 제목을

<head>
   <title>SEO란 무엇인가?</title>
   <meta name="description" content="SEO는 S">
</head>

두 태그 모드 <head></head>영역 안에 작성하는 태그이며

title과 meta태그의 description을 작성시엔

모든 페이지들을 똑같이 작성하는 것이 아니라

각 페이지별로 그 페이지의 특성에 맞게 작성하는 것이 중요하다.

SEO와 관련된 내용을 찾다보면

title태그와 description이 SEO와 관계없다는 내용들도 보이는데

사용자들이 검색했을 때 보여지는 제목(A영역)과 설명(B영역) 영역이기 때문에

설령 SEO와 연관이 없다고 하더라도

사용자들의 유입을 위해 효율적인 <title>, description 작성이 필요하다.

2-4. 소셜 검색엔진 최적화 메타태그 & OpenGraph

구글은 소셜 미디어를 통해 유입되는 경로나 활동 등을 분석하고 평가한다.

소셜 미디어에 얼마나 공유가 되었고 페이스북, 인스타그램과 같은 SNS를 통해

얼마나 많은 유입이 있는지를 분석한다.

그러한 분석을 통해 페이지에 점수를 준다.

그렇기 때문에 소셜 미디어 또한 SEO 적용을 하기 위해선

중요하게 고려해야할 사항이다.

소셜 미디어를 고려하기 위해선 OpenGraph 라는 정보에 대해 알아야한다.

OpenGraph 즉, 오픈그래프란 웹페이지가 소셜 미디어 혹은 오픈 그래프를 활용한

사이트로 공유될 때 사용되는 정보이다.

즉, 카톡이나 페이스북에 공유될 때 보여지는

페이지의 제목, 설명, 이미지 등을 meta태그에 담을 수 있다.

<head>
   <meta property="og:type" content="website">
   <meta property="og:title" content="페이지 제목">
   <meta property="og:description" content="페이지 설명">
   <meta property="og:image" content="./src/Main_img.png">
   <meta property="og:url" content="http://abcdqbbq.tistory.com">
</head>

2-5. 이미지 태그의 올바른 사용(alt 속성)

구글에서 이미지 검색의 비중은 해마다 높아지고 있다.

실제로 미국에서는 구글에서 이뤄지는 검색의 1/3 이상이 구글 이미지 검색으로 이루어지고 있다고 한다.

그렇기 때문에 이미지 태그의 중요성이 더욱 높아지고 있다.

특히나 예전엔 이미지 태그의 alt 속성의 경우 스크린 리더를 사용하는 사람들만을 위한,

웹 접근성만을 위한 도구로 생각했다면

요즘은 SEO를 위한 도구로도 사용이 된다.

가능하면 img태그를 사용하는 모든 영역에 alt 속성을 추가해주는 것이 좋다.

<img src="coconut.jpg" alt="코코넛 열매" />

2-6. 모바일 최적화

스마트폰이 보급되면서 모바일의 사용 비중은 나날이 증가하고 있다.

실제로 가정에 컴퓨터 없는 가정은 있어도 스마트폰이 없는 가정은 찾아보기 힘들 정도이다.

그렇기 때문에 모바일 최적화 또한 중요한 SEO 적용 요소로 부각되고있다.

모바일 최적화를 하기 위해서는

반응형 웹사이트를 만들어서 하나의 페이지에서 하나의 소스로

검색 엔진을 최적화 해주는 것이 좋다. (하나의 사이트맵 사용 등...)

부득이하게 PC와 모바일 버전을 분리해서 페이지를 만들어야 할 경우

Canonical 및 Alternate 태그를 사용하여

PC와 모바일 버전의 관계를 확실하게 표시해주는 것이 필요하다.

/* PC 페이지 */
<head>
  <link rel="alternate" media="only screen and (max-width:640px)" href="https://m.abcdqbbq.com">
</head>


/* Mobile 페이지 */
<head>
  <link rel="canonical" href="https://www.abcdqbbq.com">
</head>

* 구글 모바일 친화성 테스트

https://search.google.com/test/mobile-friendly

참고

https://www.twinword.co.kr/blog/search-engine-optimization-guide/

https://junhobaik.github.io/meta-tag/

저작자표시 비영리

'Frontend > Web' 카테고리의 다른 글

WAI-ARIA 접근성1. 소개 및 주의사항, 태그별 role의 사용 (0)	2021.03.20
크로스 브라우징이란? (0)	2020.09.12
웹해상도 (물리픽셀, 논리픽셀, 고밀도 해상도, PPI) (0)	2020.04.21
브라우저 렌더링 성능 최적화 (2)	2020.04.16
XML과 HTML (0)	2020.04.14

About Web