바로 문의 : 010-2907-7622

구글 검색엔진 최적화(SEO)를 위한 코딩 방법

구글 검색엔진 최적화(SEO)를 위한 코딩 방법

웹사이트 제작 시, 구글 검색엔진 최적화를 위해 신경써야 하는 많은 부분들 중에서 웹페이지 상단에 나오는 태그(TAG)와 관련하여 정리해 보도록하겠습니다.
웹페이지 상단에 선언하는 태그들은 해당 페이지에 대한 요약 정보를 담고 있는 만큼 검색엔진의 로봇들이 가장 중요하게 생각하는 부분이니 검색엔진 최적화의 기본이라고 할 수 있겠습니다.

제목 태그(TITLE TAG)

해당 페이지를 대표하는 제목은 검색엔진 최적화에서 가장 중요합니다.
제목은 너무 짧거나 길지 않도록 길이에 신경을 써줍니다. 구글에서 검색된 결과를 확인해보면 영문기준 최대 50~55자 까지 출력되고 있는 것을 확인할 수 있습니다. 한글 제목의 경우 30~35자 정도입니다.
사이트의 첫 페이지는 "사이트명 + 핵심 키워드"의 조합으로 작성하길 권장하며, 게시판처럼 페이지 기능이 있는 경우 현재 페이지 정보를 제목에 표시하도록 합니다.
또, 모든 페이지의 제목은 중복되지 않도록 설정하는 것이 좋습니다.
구글 웹마스터 도구(https://www.google.com/webmasters)에 접속하여 [검색노출] - [HTML 개선] 페이지를 확인해 보면 다음과 같은 내용을 확인할 수 있습니다.

중복된 제목 텍스트 : 제목을 통해 사용자와 검색 엔진에 사이트에 대한 유용한 정보를 제공할 수 있습니다. 제목 태그에 포함된 텍스트는 검색 결과 페이지에 표시될 수 있으며 관련성이 높고 설명이 구체적인 텍스트의 경우 사용자가 클릭할 확률이 더 높습니다. 목록을 검토한 후 가능한 경우 제목 태그를 업데이트해 주세요.

예)
<title>구글 검색엔진 최적화(SEO)를 위한 코딩 방법 :: 반응형 홈페이지 제작</title>


메타 태그(META TAG)

메타 태그에는 해당 페이지의 문자세트, 키워드, 설명 등의 정보가 들어갑니다.
설명은 영문기준 약 100~200자, 한글은 50~80자 정도로, 역시 제목처럼 적절한 길이를 유지해주는 것이 좋습니다. 역시 모든 페이지의 설명이 중복되지 않도록 설정하는 것이 좋습니다.
SNS로 링크, 공유하는 경우가 많으므로 이와 관련된 메타 태그도 추가해 줍니다. OG(Open Graph) 태그를 이용하여 웹 페이지의 제목, 설명, 이미지 등을 설정할 수 있습니다.

예)
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<meta name="keywords" content="사이트, 검색엔진, 최적화, SEO, 컴러버" />

<meta name="description" content="구글 검색엔진 최적화(SEO)를 위한 코딩 방법. 모바일, 업체홍보, 커뮤니티, 쇼핑몰 홈페이지, 반응형 웹사이트 제작 전문업체." />

<meta name="author" content="컴러버" />

<meta property="og:type" content="website" />

<meta property="og:title" content="구글 검색엔진 최적화(SEO)를 위한 코딩 방법" />

<meta property="og:description" content="웹사이트 제작 시, 구글 검색엔진 최적화를 위해 신경써야 하는 많은 부분들 중에서 웹페이지 상단에 나오는 태그(TAG)와 관련하여 정리해 보도록하겠습니다." />

<meta property="og:image" content="http://comlover.com/images/comlover.jpg" />


링크 태그(LINK TAG)

링크 태그에는 아이콘(Icon), 선호 URL(Canonical), 발행인(Publisher), RSS 피드, CSS 등의 정보가 들어갑니다.
PNG 파일을 아이콘으로 사용할 수 있으며, 모바일 및 윈도우를 위한 아이콘 추가도 가능합니다.
고유 URL(Permanent Link)을 사용하지 않는 게시판 이용 시, 특정 게시글을 볼 수 있는 경로가 여러개 존재할 수 있는데 이 때 선호 URL을 설정함으로써, 검색엔진에게 다른 경로는 무시하고 canonical로 설정한 URL을 사용하도록 할 수 있습니다.
다국어를 지원하는 사이트의 경우, alternate을 사용하여 현재 보고 있는 웹 페이지가 다른 언어로 작성된 페이지가 있음을 알려주는 것입니다. 이를 통해, 번역된 컨텐츠를 제공하거나 특정 지역의 사용자에게 타겟팅된 컨텐츠를 제공하는 것이 가능합니다.
CSS 파일의 링크 정보는 Minify를 이용하여 파일용량 축소 및 HTTP 요청(Request)을 한번에 처리하도록 합니다.

예)
<link rel="icon" href="http://comlover.com/favicon.png" />

<link rel="apple-touch-icon" href="http://comlover.com/favicon.png" />

<link rel="canonical" href="http://comlover.com" />

<link rel="publisher" href="https://www.google.com/+comlover" />

<link rel="alternate" href="http://comlover.com/rss" type="application/rss+xml" title="컴러버" />

<link rel="alternate" hreflang="x-default" href="http://comlover.com" />

<link rel="alternate" hreflang="en" href="http://comlover.com/en-us" />

<link rel="stylesheet" href="http://comlover.com/min/?f=css/boostrap.css,css/font-awesome.css,css/styles.css" />



검색엔진 최적화를 하는 것도 물론 중요하지만, 가장 중요한 것은 좋은 컨텐츠를 꾸준히 제공하는 것임을 잊지 말아야합니다.

댓글 달기

   

컴러버 로고

 

  • 전화

    010-2907-7622

  • 카카오톡

    hshmac / webejoa

  • 주소

    서울 마포구 새창로 11, 1314호 / 더디렉터

  • 본 사이트는 웹이조아에서 정보 공유를 위해 제작 및 운영하고 있습니다