개발일지

HTML + SEO

• html

검색엔진에 최적화된 HTML마크업을 구성하자

요즘 수강하고 있는 수업에서 SEO에 대한 언급이 등장했네요. 기록 차원에서 포스팅합니다.
요점은 메타태그를 잘 지정하자는 것이네요.
생각해보니 이 블로그에 독자 수가 늘어나지 않는것이 검색엔진에 최적화되지 않았기 때문일지도 모르겠습니다.
수업 내용과 하이브 아레나 를 벤치마킹하니 몇몇 공통점이 보입니다.
다음 코드를 사용해서 meta태그를 벤치마킹 해 봅니다

var iterObj = document.createNodeIterator(
    document.querySelector('head'),
    NodeFilter.SHOW_ELEMENT,
    function(node){
        if (node.nodeName === 'META') {
            return NodeFilter.FILTER_ACCEPT;
        }else{
            return NodeFilter.FILTER_REJECT;
        }
    },
    false
);

var node = iterObj.nextNode();
while(node){
    console.log(node.outerHTML);
    node = iterObj.nextNode();
}

HTML마크업을 검색엔진에 최적화시키려면 최소한 다음과 같은 메타태그는 적어야 하나 봅니다.
저도 블로그에 적용해 봐야겠네요

<!DOCTYPE html>
<!-- ↑ DTD: 문서 유형 정의 -->
<!-- ↓ 주 언어를 명시하자: 한국(KR)에서 서비스되는 영어(en) 페이지 -->
  <html lang="en-KR">
  <head>
    <!-- 언어 인코딩 -->
    <meta charset="utf-8">
    <!-- 가장 중요한 제목 -->
    <title>현재 페이지를 대변하는 가장 영향력있는 키워드로 구성된 페이지 별 제목 (간략)</title>
    <!-- SEO: 검색엔진 최적화[s] -->
    <meta name="description" content="상세.... 200 ~ 300자 내외">
    <meta name="keywords" content="의류,패션,여성,청춘,...">
    <meta name="author" content="페이지 제작자 정보">
    <!-- 검색엔진이 페이지를 인덱싱하고 추적하게 함 -->
    <meta name="robots" content="index, follow">
    <!--  Open Graph Protocol 용 메타태그[s] -->
    <meta property="og:title" content="타이틀">
    <meta property="og:type" content="website">
    <meta property="og:url" content="블로그 주소">
    <meta property="og:image" content="시그니쳐 이미지 주소">
    <meta property="og:site_name" content="사이트명">
    <meta property="og:description" content="상세.... 200 ~ 300자 내외">
    <!--  Open Graph Protocol 메타태그[e] -->
    <!--  Twitter Protocol 메타태그[s] -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="계정명">
    <meta name="twitter:domain" content="도메인">
    <meta name="twitter:title" content="타이틀">
    <meta name="twitter:description" content="상세.... 200 ~ 300자 내외">
    <meta name="twitter:image" content="시그니쳐 이미지 주소">
    <!--  Twitter Protocol 메타태그[e] -->
    <meta name="generator" content="사이트 제네레이터 이름">
    <!-- SEO: 검색엔진 최적화[e] -->
    <!-- 외부의 스타일시트 파일 연결(Link Stylesheet) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  </head>
  ..하략..

2016.1.23 : SEO에 대한 자세한 지침을 구글에서 배포하고 있군요.

comments powered by Disqus