HTML/CSS 에센셜 | 위니북스

검색엔진 최적화(SEO)

1. 검색 엔진이란?

검색엔진이란 웹이나 컴퓨터 시스템에 저장된 정보를 찾아주는 프로그램을 의미합니다. 구글 검색, 네이버 검색, 다음 검색 등이 우리가 흔히 사용하는 검색 엔진들이라 볼 수 있습니다.

2. 검색 엔진 최적화란?

인터넷과 웹기술이 발전하면서 수 많은 정보가 웹서버에 저장되고 있습니다. 때문에 이제 정보의 양 보다는 좋은 정보를 얼마나 빨리 찾을 수 있는가가 중요한 시대가 되었습니다. 광고와 연계되어 금전적인 보상으로 이어질 수 있는 기회가 열렸기 때문입니다.

구글에 강아지 사료를 검색했을때 나오는 화면. 노출되는 순서에 따라 SEO가 얼마나 잘되어 있는지 파악할 수 있습니다.

2005년 아이트레킹 기술을 이용한 google heat map. 사용자가 먼저 보는곳일 수록 색이 붉습니다. 참고 :https://www.forbes.com/sites/roberthof/2015/03/03/how-do-you-google-new-eye-tracking-study-reveals-huge-changes/?sh=59c8b0373828

2015년의 아이트레킹. 사용자의 디바이스 환경 변화로 황금삼각형이 사라진 모습을 확인할 수 있습니다. 참고 :https://www.forbes.com/sites/roberthof/2015/03/03/how-do-you-google-new-eye-tracking-study-reveals-huge-changes/?sh=59c8b0373828

이러한 이유로 다양한 검색엔진에 우리가 제작한 사이트가 얼마나 빠르게 얼마나 상위에 노출되는가가 중요한 화두로 떠올랐고 이러한 방법을 모아 웹사이트에 적용하는것을 검색엔진 최적화라고 합니다.

2.1 SEO의 중요성

트래픽 증가: SEO를 통해 웹사이트의 가시성이 높아지면 더 많은 사용자가 웹사이트를 방문하게 됩니다.
신뢰성 구축: 검색 결과 상위에 노출됨으로써 사용자들에게 신뢰를 줄 수 있습니다.
비용 효율성: 유료 광고에 비해 장기적으로 더 비용 효율적인 마케팅 전략이 될 수 있습니다.

<meta name="description" content="제주 ICT 코딩 컴퓨터학원, 연구원, 출판사">

<meta name="description" content="제주 ICT 코딩 컴퓨터학원, 연구원, 출판사">

검색 엔진 최적화를 위해 위와 같은 값들을 지정할 수 있습니다. 이제 검색 엔진 최적화(SEO)에 대해 좀 더 구체적으로 알아보겠습니다.

우선, SEO는 검색 엔진 결과 페이지에서 웹사이트의 가시성을 높이는 일련의 기술과 전략을 말합니다. 이를 위해 다양한 기법을 사용할 수 있습니다. 예를 들어, 구글, 네이버, 다음과 같은 다양한 검색 엔진은 각각의 SEO 적용 기법을 개발자 지원 사이트에서 상세하게 설명하고 있습니다.

이러한 검색 엔진들은 각기 다른 정책을 가지고 있습니다. 예를 들어, 구글은 홈페이지 내에 유튜브 영상을 포함하면 검색 순위가 좀 더 상위로 올라갈 가능성이 높습니다. 그러나 이와 같은 정책은 자주 변경되며, 복잡한 경우도 많습니다. 그래서 SEO 최적화를 전문적으로 대행해주는 업체들이 존재하기도 합니다.

검색 엔진 최적화를 위해 각 검색 엔진의 가이드라인을 주기적으로 확인하고, 변화하는 정책에 맞춰 웹사이트를 업데이트하는 것이 중요합니다. 이는 웹사이트의 트래픽을 증가시키고, 더 많은 사용자가 웹사이트를 방문하게 만드는 중요한 방법입니다.

3. 가이드

3.1 URL

언더바(_) 사용 금지. 단어구분은 대쉬(-)사용.
- 하이픈(-): 구글 검색 엔진은 하이픈를 단어 구분자로 취급
  - ex) lion_resting_on_the_road.png vs lion-resting-on-the-road.png
최대한 짧지만 해당 페이지를 유추할 수 있는 단어로 구성하기
- url 주소 자체에 키워드를 포함하면 좋습니다.

depth는 2-4 정도, 6이하

https://example.com/depth1/depth2/depth3/depth4/

https://example.com/depth1/depth2/depth3/depth4/

대표 url설정하기(canonical 캐노니컬 태그)

http://example.com http://example.com/ http://www.example.com/ https://example.com https://example.com/ https://www.example.com/
```
<link rel="canonical" href="https://example.com/" />
```
```
<link rel="canonical" href="https://example.com/" />
```

3.2 정확한 페이지 제목 정하기

<title> 태그는 검색 엔진에 페이지의 주제가 무엇인지 알려줍니다.
HTML 문서의 <head> 요소 내에 만들어서 페이지의 고유한 제목을 달아줍니다.
텍스트만 포함합니다.(특수 문자X)

각 페이지에 사용할 고유한 제목

한 가지 사이트에 소속되어 있다고 해서 단일한 내용으로 페이지 제목을 통일하는 것은 좋지 못합니다. 각 페이지에 고유한 제목을 사용하여, 검색 엔진이 페이지 간의 차이를 명확하게 파악할 수 있도록 합니다.
사용자의 피로도를 낮추기위해 페이지 제목을 먼저, 그리고 사이트의 제목을 적어주는 것이 좋습니다.

짧고 간결한 제목

짧고 적절한 제목을 사용하는 것이 중요합니다. 제목이 너무 길거나 관련성이 낮으면, 검색 엔진은 검색 결과에 제목의 일부만 표시하거나 자동으로 생성된 다른 제목을 표시할 수 있습니다. 또한, 사용자가 입력한 검색어나 사용 기기에 따라 서로 다른 제목이 표시될 수도 있습니다. 따라서 제목이 너무 길거나 불필요한 내용을 포함하지 않도록 주의해야 합니다. 제목은 약 60자를 넘지 않아야 하며, 그보다 길면 브라우저에서 노출되는 제목이 축소되어 보일 수 있습니다.

메타 태그

description

description: 페이지가 담고 있는 내용을 요약하여 서술.
약 250자 이하로 작성하기
이 태그는 검색 엔진 결과 페이지에서 웹페이지의 미리보기 텍스트로 사용됩니다
웹페이지를 클릭하도록 유도하는 광고문구입니다. 중요한 타겟키워드를 문구에 포함하여 작성하는 것이 좋다고 합니다. 클릭률을 높이고 돋보이게 할 수 있는 방법을 고민해봐야겠죠.
너무 많은 키워드를 반복 사용할 경우 스팸 의심을 받을 수 있습니다.

<meta
  name="description"
  content="Google 지도에서 지역정보를 검색하고 지도를 살펴보거나 운전경로 정보를 검색합니다."
/>

<meta
  name="description"
  content="Google 지도에서 지역정보를 검색하고 지도를 살펴보거나 운전경로 정보를 검색합니다."
/>

3.3 오픈 그래프 프로토콜

오픈 그래프 프로토콜(Open Graph Protocol)은 인터넷 웹사이트의 HTML 문서에서 head -> meta 태그 중 “og”가 있는 태그들을 찾아내어 보여주는 프로토콜입니다. Open Graph Protocol은 표준은 아니지만, 매우 중요하기 때문에 사용법을 알아야 합니다. SNS는 간접적인 트래픽을 유발하고 방문자를 일으키는 좋은 수단입니다. 따라서 좀 더 보기 좋은 링크를 만들어 방문을 유도하는 것은 SEO에 매우 중요합니다.

Facebook이나 트위터, Discord와 같은 SNS에서 주로 사용합니다.
일반적인 공유 프로토콜입니다. 표준은 아니지만 워낙 광범위하게 사용되기 때문에 거의 표준처럼 작동합니다.

구글은 A라는 페이지에서 B라는 페이지로 연결하는 링크가 있으면 그 링크를 일종의 투표로 생각합니다.많이 투표된 페이지 즉, 많은 링크들이 가르키는 페이지는 중요한 페이지로 판단되며, 중요한 페이지로 판단되면 페이지 순위가 높아집니다.

<meta property="og:title" content="페이지 제목" />
<meta property="og:type" content="컨텐츠 타입" />
<meta property="og:url" content="페이지 주소" />
<meta property="og:image" content="페이지 썸네일 이미지 주소" />
<meta property="og:description" content="페이지 설명" />

<meta property="og:title" content="페이지 제목" />
<meta property="og:type" content="컨텐츠 타입" />
<meta property="og:url" content="페이지 주소" />
<meta property="og:image" content="페이지 썸네일 이미지 주소" />
<meta property="og:description" content="페이지 설명" />

Open Graph protocol

Twitter

트위터를 위한 카드 형태의 공유 프로토콜

<meta name="twitter:card" content="카드의 타입" />
<meta name="twitter:title" content="카드의 제목" />
<meta name="twitter:description" content="카드 설명" />
<meta name="twitter:image" content="카드 썸네일 이미지 주소" />

<meta name="twitter:card" content="카드의 타입" />
<meta name="twitter:title" content="카드의 제목" />
<meta name="twitter:description" content="카드 설명" />
<meta name="twitter:image" content="카드 썸네일 이미지 주소" />

About Twitter Cards 구글의 공유 화면

구글

없습니다

없습니다

구글 지도

<meta
  name="Description"
  content="Google 지도에서 지역정보를 검색하고 지도를 살펴보거나 운전경로 정보를 검색합니다."
/>
<meta property="og:title" content="Google 지도" />
<meta
  property="og:image"
  content="https://maps.google.com/maps/api/staticmap?center=33.4960906%2C126.53091425&amp;zoom=15&amp;size=256x256&amp;language=ko&amp;sensor=false&amp;client=google-maps-frontend&amp;signature=kvV2olW5g69E72bhvyp9-kUJju4"
/>
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<meta
  property="og:description"
  content="Google 지도에서 지역정보를 검색하고 지도를 살펴보거나 운전경로 정보를 검색합니다."
/>
<meta property="og:site_name" content="Google 지도" />
 
<meta content="summary" name="twitter:card" />

<meta
  name="Description"
  content="Google 지도에서 지역정보를 검색하고 지도를 살펴보거나 운전경로 정보를 검색합니다."
/>
<meta property="og:title" content="Google 지도" />
<meta
  property="og:image"
  content="https://maps.google.com/maps/api/staticmap?center=33.4960906%2C126.53091425&amp;zoom=15&amp;size=256x256&amp;language=ko&amp;sensor=false&amp;client=google-maps-frontend&amp;signature=kvV2olW5g69E72bhvyp9-kUJju4"
/>
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<meta
  property="og:description"
  content="Google 지도에서 지역정보를 검색하고 지도를 살펴보거나 운전경로 정보를 검색합니다."
/>
<meta property="og:site_name" content="Google 지도" />
 
<meta content="summary" name="twitter:card" />

네이버

<meta
  name="description"
  content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"
/>
<meta property="og:title" content="네이버" />
<meta property="og:url" content="https://www.naver.com/" />
<meta
  property="og:image"
  content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png"
/>
<meta
  property="og:description"
  content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"
/>
 
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:url" content="https://www.naver.com/" />
<meta
  name="twitter:image"
  content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png"
/>
<meta
  name="twitter:description"
  content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"
/>

<meta
  name="description"
  content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"
/>
<meta property="og:title" content="네이버" />
<meta property="og:url" content="https://www.naver.com/" />
<meta
  property="og:image"
  content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png"
/>
<meta
  property="og:description"
  content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"
/>
 
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:url" content="https://www.naver.com/" />
<meta
  name="twitter:image"
  content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png"
/>
<meta
  name="twitter:description"
  content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"
/>

<meta
  name="description"
  content="이용자 선택권을 강화한 뉴스, 세상의 모든 정보를 연결하는 검색. Daum에서 나의 관심 콘텐츠를 즐겨보세요."
/>
<meta property="og:url" content="https://www.daum.net/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Daum" />
<meta
  property="og:image"
  content="https://i1.daumcdn.net/svc/image/U03/common_icon/5587C4E4012FCD0001"
/>
<meta
  property="og:description"
  content="이용자 선택권을 강화한 뉴스, 세상의 모든 정보를 연결하는 검색. Daum에서 나의 관심 콘텐츠를 즐겨보세요."
/>

<meta
  name="description"
  content="이용자 선택권을 강화한 뉴스, 세상의 모든 정보를 연결하는 검색. Daum에서 나의 관심 콘텐츠를 즐겨보세요."
/>
<meta property="og:url" content="https://www.daum.net/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Daum" />
<meta
  property="og:image"
  content="https://i1.daumcdn.net/svc/image/U03/common_icon/5587C4E4012FCD0001"
/>
<meta
  property="og:description"
  content="이용자 선택권을 강화한 뉴스, 세상의 모든 정보를 연결하는 검색. Daum에서 나의 관심 콘텐츠를 즐겨보세요."
/>

3.4 마크업

웹표준 규약 준수

The W3C Markup Validation Service

제목 태그(h1 ~ h6)를 사용하여 중요한 텍스트 강조하기
<img> 태그에 대체 텍스트 넣기. 이미지 검색도 이미지의 파일명과 대체 텍스트가 영향을 미칩니다.
strong, em등을 사용하여 키워드 강조
의미있는 링크 텍스트 작성하기
"여기를 클릭하십시오" 및 "자세히 알아보기”가 아닌 구체적인 텍스트로 작성하기

3.5 robot.txt

robots.txt 파일을 사용하여 사이트에서 크롤러가 액세스할 수 있는 파일을 제어할 수 있습니다.
robots.txt 파일은 사이트의 루트에 위치합니다.
도메인 또는 하위 도메인에서 지정된 파일 경로에 액세스하는 것을 차단하거나 허용합니다.
파일에서 다르게 지정하지 않는 한 모든 파일은 암시적으로 크롤링에 허용합니다

User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /

Sitemap: https://www.example.com/sitemap.xml

User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /

Sitemap: https://www.example.com/sitemap.xml

<!-- 검색로봇의 색인 생성 작업을 막는 메타태그 -->
<meta name="robots" content="noindex,nofollow" />

<!-- 검색로봇의 색인 생성 작업을 막는 메타태그 -->
<meta name="robots" content="noindex,nofollow" />

noindex: 검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않습니다. 이 지시어를 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있습니다.
nofollow: 이 페이지의 링크를 따라가지 않습니다. 이 지시어를 지정하지 않으면 Google에서는 페이지의 링크를 사용하여 링크된 페이지를 검색할 수 있습니다.

네이버 robots.txt 설정

3.6 sitemap.xml

웹사이트 내 모든 페이지의 목록을 나열한 파일입니다. 검색엔진에게 사이트 내 모든 페이지 목록을 제공하여 크롤링되고 색인 될수 있게 도와줍니다.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://www.example.com/</loc>
    <lastmod>2018-06-04</lastmod>
		<priority>1.00</priority>
  </url>
  <url>
    <loc>http://www.example.com/about.html</loc>
    <lastmod>2018-06-04</lastmod>
		<priority>1.00</priority>
  </url>
</urlset>

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://www.example.com/</loc>
    <lastmod>2018-06-04</lastmod>
		<priority>1.00</priority>
  </url>
  <url>
    <loc>http://www.example.com/about.html</loc>
    <lastmod>2018-06-04</lastmod>
		<priority>1.00</priority>
  </url>
</urlset>

사이트맵 제작 및 제출하기
사이트맵 제작 및 제출하기 | Google 검색 센터 | 문서 | Google Developers
sitemap 파일 만들기
Create your Google Sitemap Online - XML Sitemaps Generator

4. 기타 참고

모바일 최적화

링크구조
- 사이트 내에 깨진 링크가 없는지 체크하기! Free Broken Link Checker - Online Tool
도메인 권위도 체크
- 권위도가 높은 사이트에 링크가 많이 연결될수록 좋습니다. Domain Authority Checker - Moz DA PA Checker of multiple urls
사이트 속도측정
PageSpeed Insights
키워드 밀도 높이기
Keyword Density Analysis Tool

Lighthouse

웹페이지 품질 개선을 위해 제공되는 자동 검사 도구

개발자가 성능, 접근성, 프로그레시브 웹 앱 호환성 등에 대한 검사를 실행하여 사이트 품질을 개선할 수 있는 길을 밝혀줍니다. 기본적으로 '바위에 부딪히지 않게 해 주므로' 이름이 Lighthouse(등대)입니다.

해당 검사가 완벽한 것이 아닙니다. 기본사항만을 검증하는 도구입니다.
기본적인 가이드만 제공한다고 생각하시고 참고용으로 활용하시기 바랍니다.

파비콘 만들기 사이트 ConvertICO.com - Convert PNG to ICO and ICO to PNG files