Hyeonjeong Lee

Junior Web Developer

검색최적화-3

  • 전반적인 가이드라인은 google 검색 센터에서 인용했으며 내용의 일부분은 블로그나 기타 검색 결과를 통해서 발췌한 내용입니다.
  • 구글을 기본으로 작성된 글입니다. 네이버와 다음(카카오)은 구글의 SEO가이드라인을 따르고 있으므로 추가적인 사항이 생긴다면 추후에 따로 기재하겠습니다. (2021/02/17을 기준으로 차별된 가이드라인의 내용은 없습니다.)

모든 사이트에서 keyword 태그는 더 이상 사용하지 않습니다.

기본 태그 작성 방식

  1. Google이 찾을 수 있는 페이지 만들기
    1. 검색할 수 있는 다른 페이지의 링크에서 사이트의 모든 페이지가 연결될 수 있는지 확인
    2. 크롤링할 수 있는 링크는 href 속성이 포함된 태그입니다.
  2. 웹 개발 시작 시 검색 최적화를 위한 태그는 HTML5의 시맨틱 태그를 이용하는 것을 추천합니다.
    • 지원하지 않는 태그 : 
       <acronym>, <align>, <applet>, <basefont>, <big>, <bgcolor>, <border>, <center>, <color>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>
    • nav 태그를 사용하여 링크노출
    • header, footer에 메뉴링크를 li 태그로 사용
    • 사이트 링크의 대상이 될 링크를 font-weight, background등의 속성을 사용하여 강조

    • 페이지의 강조는 h1, h2등의 태그를 사용

      → heading(h태그)의 계층적 구조를 사용하여 중요 순서도 순으로 표현

      → h1 태그는 가능하면 필수로 지정하는 것을 추천합니다.

    • strong 또는 em을 사용(단순 스타일 부여가 아닌 시맨틱 태그의 목적을 가진 태그)
    • class name은 seo에 영향을 미치지 않습니다.
    • 인라인 스타일 태그를 사용하지 않습니다.
    • img태그를 사용하는 경우 alt를 사용하여 인덱싱 작업을 합니다.
  3. 사이트가 검색 결과에 표시되는 방식을 제어하기 위해서 구글에서 인식하는 특수 태그를 사용

  4. 구조화된 탐색 경로를 기반으로 사이트를 개발을 기획합니다.

  5. 중복된 url이 있는 경우 표준 url(대표 url)을 설정합니다. 공식 가이드

    • canonical tag 사용

        <link rel="canonical" href="https://www.naver.com/">

    • 사이트맵에 표준 페이지를 지정(cannonical 보다 덜 강력한 신호)

  6. URL에 단어를 사용합니다.

    ⛔피해야 할 사항

    1. 불필요한 매개변수 및 세션 ID가 있는 긴 URL
    2. ‘page1.html’과 같은 일반적인 페이지 이름

  7. 디렉터리 구조를 간단하게 합니다.

    ⛔피해야 할 사항

    1. ‘…/dir1/dir2/dir3/dir4/dir5/dir6/page.html’과 같이 하위 디렉터리가 깊게 중첩
    2. 내용과 관계없는 디렉터리 이름
  8. SPA 사이트를 개발하는 경우 해당 언어의 동적 메타 태그 라이브러리 사용(Vue.js 기준)
    • Vue-meta
    • history mode
    • sitemap.xml 작성을 위해 라이브러리를 이용하여 작성하거나 직접 작성해야 할 수도 있습니다. (sitemap generator가 spa 사이트는 정확하지 않게 제공됨)

기본 스니펫 작성법

1. 페이지 제목 만들기

  1. 페이지마다 고유한 title 태그를 작성합니다.
  2. 모호한 설명어는 사용하지 않습니다.(ex. “home”, “profile”)
    • 구글에서 제안하는 title의 예시
     <title>ExampleSocialSite: Sign up for a new account.</title>

  3. 작성한 title이 반영되지 않는 이유는?

    Google에서는 앵커 텍스트, 페이지 텍스트 또는 기타 소스를 바탕으로 더 나은 제목을 생성하려고 시도할 수 있습니다

2. 메타 설명 만들기

  1. 사이트의 모든 페이지에 메타 설명이 있는지 확인
  2. 페이지 별로 설명을 다르게 작성
    • 각 페이지의 요약 정보를 작성
    • 구글에서 제안하는 description의 예시
     <meta name="Description" content="Written by A.N. Author,
 Illustrated by V. Gogh, Price: $17.99,
 Length: 784 pages">
  3. 모든 페이지에 작성이 불가능 할 경우 우선순위를 두어 주요 페이지만 작성하는 것을 추천

⚠️title, description 태그가 반영되지 않는 경우

→ google search console에 마지막으로 크롤링 된 데이터를 확인하고( url 검사 ) 업데이트 되지 않았다면 색인 생성을 다시 요청하도록 합니다.

→ description이 너무 짧다면 반영되지 않는 경우도 있다고 합니다. 70자 내외로 추천합니다

리치 스니펫 작성법

: 리치 스니펫은 다양한 기사, 리뷰, 지식백과와 같은 다양한 스니펫 구조를 제공합니다. 필수적으로 등록하고 싶은 사항이 있는 경우 구글 가이드를 참조하여 작성하면 됩니다.

  • 사이트링크 검색창

      <html>
    <head>
      <title>The title of the page</title>
      <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "url": "https://www.example.com/",
        "potentialAction": {
          "@type": "SearchAction",
          "target": "https://query.example.com/search?q={search_term_string}",
          "query-input": "required name=search_term_string"
        }
      }
      </script>
    </head>
    <body>
    </body>
  </html>
  • 리치 검색결과 테스트
  • 스키마 마크업을 통해 보다 구조화된 데이터 작성가능 : Schema.org

소셜 미디어 공유 미리보기 태그 작성법

  1. meta og 태그 이용 : https://ogp.me
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
  1. 전반적인 소셜미디어의 틀은 og 태그로 동일 하여 각 사이트의 필수 요소들을 추가적으로 지정

테스트

  1. puppeteer 스크립트를 이용하여 구글 봇이 색인을 생성하길 원하는 모든 컨텐츠가 포함이 되었는지 확인하세요.

⚠️구글봇이 색인을 찾지 못하는 경우

  1. 콘텐츠가 렌더링된 HTML에 표시되지 않으면 Googlebot이 색인을 생성할 수 없습니다.

    solution [ 요소를 사용](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=ko#slots)하여 여러 DOM 트리를 함께 구성합니다.

  2. 응답시간이 길어지는 경우 구글봇이 색인을 생성 할 수 없습니다.

    solution 지연 로드 콘텐츠 문제 해결을 참조하세요

⚠️지연 로드 콘텐츠 문제 해결

  1. iframe의 네이티브 지연 로드

    solution

     <iframe loading=lazy>

기타

참고