구글 검색 더 눈에 띄게 꾸미기 FAQ편

카테고리 : 웹 프로그래밍/HTML

구글 검색에서 조금 더 눈에 띄게 글을 작성할 수 있습니다.

 

다만 티스토리 에디터에서 지원하지 않기 때문에 복잡합니다.

 

난이도

상 : 처음부터 끝까지 HTML로 작성 또는 전용 편집기 사용이 필요함

중 : 스키마 스크립트(application/ld+json) 작성시 가능합니다.

기능 설명

구글 검색결과내에서 상호작용이 가능한 QnA 기능을 넣을 수 있습니다.

 

웹사이트를 열지않고도 내용이 일부 표시되므로 검색하는 사람이 페이지를 열지 않고도 필요한 정보가 있는지 확인 가능하여 페이지 내용이 원하는 글이 아니라고 생각되면 안 들어갈 수 있습니다.

 

크기가 일반 검색보다 눈에 띄어 더 잘들어올수도 있습니다.

결론적으로는 좋은 컨텐츠를 작성해야만 유입에 도움이 됩니다.

(안 좋은 컨텐츠라고 구글이 판단 시 해당 기능이 뜨지 않습니다.)

 

 

소개

나중에 비슷한 형태로 작성할 일이 생길 수 있으므로 전용 편집기를 만들어 볼 생각은 있습니다.

 

해당 구글 검색결과 확인해보기

https://www.google.co.kr/search?q=site%3Ahttps%3A%2F%2Fhi098123.tistory.com%2F288&oq=site%3Ahttps%3A%2F%2Fhi098123.tistory.com%2F288

 

이러한 방식은 아직 국내 포털 검색에서는 적용이 안되나 구글 등 해외 검색에서는 지원하는 방식입니다.

 

페이지 내부의 글을 추가로 색인하게 만들어서 구글이 결과를 보여주도록 합니다.

(다만, 구글의 기준에 미달한다면 검색결과에 표시되지 않습니다.)

 

난이도 상 HTML로 작성 방법

<div itemscope="" itemtype="https://schema.org/FAQPage">

	...
    
  <div itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
      <h4 data-ke-size="size20" itemprop="name">Q1. 블로그에&nbsp;글을&nbsp;복사해서&nbsp;붙여&nbsp;넣어도&nbsp;되나요?</h4>

      <blockquote itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" style="border-left: 6px solid #2196F3;" data-ke-style="style2">
          <span itemprop="text">
            네이버 측 답변 : O<br>
            <br>
            <b>네. 상관 없습니다.</b>
            원고를 복사하여 붙여 넣는 방식은 정상적인 글쓰기 패턴입니다.
            <br>
            <span>하지만 비정상적으로 많은 글이 짧은 시간 내에 복사로 도배되는 경우 SPAM으로 </span>
            <span>분류될 수 있습니다.
          </span>
      </blockquote>
  </div>
  
	...
    
</div>

 

전체를 itemtype이 //schema.org/FAQPage 인 태그로 감쌉니다.

<div itemscope="" itemtype="https://schema.org/FAQPage">

 

그 안에는 itemprop속성이 "mainEntity" 이고 itemtype속성은 //schema.org/Question인 태그로 감쌉니다.

<div itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">

 

mainEntity 안에있는 name값은 구글 검색에서 질문이 됩니다.

보안 때문에 크롤러는 innerHTML이 아닌 innerText만 가져갑니다.

"Q1.", "Q2.", "1." , "2."등 순서를 표기하지 않는 것을 권장합니다. 크롤러는 텍스트만 가져갑니다.

HTML
<h4 data-ke-size="size20" itemprop="name">Q1. 블로그에&nbsp;글을&nbsp;복사해서&nbsp;붙여&nbsp;넣어도&nbsp;되나요?</h4>

TEXT
블로그에 글을 복사해서 붙여 넣어도 되나요?

답변은 itemprop속성값이 "acceptedAnswer"이고  itemtype 값이 https://schema.org/Answer 입니다.

<div itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">

 

내부의 itemprop값이 "text"인 부분의 내용을 가져옵니다.

<span itemprop="text">

 

여기에서는 <b> 태그, <br> 태그 등 보안상 위험이 없고 강조 용도로 사용 가능한 태그들이 유지됩니다.

<a>, <strong> 태그 등도 이용 가능

HTML
<span itemprop="text">
  네이버 측 답변 : O<br>
  <br>
  <b>네. 상관 없습니다.</b>
  원고를 복사하여 붙여 넣는 방식은 정상적인 글쓰기 패턴입니다.
  <br>
  <span>하지만 비정상적으로 많은 글이 짧은 시간 내에 복사로 도배되는 경우 SPAM으로 </span>
  <span>분류될 수 있습니다.
</span>

결과
네이버 측 답변 : <b>O</b><br>
<br>
<b>네. 상관 없습니다.</b> 원고를 복사하여 붙여 넣는 방식은 정상적인 글쓰기 패턴입니다.

 

해외 공식 문서를 읽고 처음 적용해볼 때

<div itemscope="" itemtype="https://schema.org/FAQPage">
FAQPage로 감싸야 적용된다는 점을 몰라서 한참 찾아봤습니다.
구글 공식문서에서도 이 내용이 빠져있더라고요

 

 

난이도 중 JSON-LD로 적용방법

<html>
  <head>
    <title>Example Site - Frequently Asked Questions(FAQ)</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [{
        "@type": "Question",
        "name": "블로그에 글을 복사해서 붙여 넣어도 되나요?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "네이버 측 답변 : O<br><br>네. 상관 없습니다. 원고를 복사하여 붙여 넣는 방식은 정상적인 글쓰기 패턴입니다.<br>하지만 비정상적으로 많은 글이 짧은 시간 내에 복사로 도배되는 경우 SPAM으로 분류될 수 있습니다."
        }
      }, {
        "@type": "Question",
        "name": "본문에 링크가 있으면 검색 랭킹이 떨어진다?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "네이버 측 답변 : X<br><br>전혀 문제없습니다.<br>다만, 반복 사용되는 동일한 링크나 낚시성 대량 링크들은 스팸 문서로 분류될 수 있습니다."
        }
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

 

head에 script application/ld+json로 쉽게 설정 가능합니다.

(추가 안내 : body에 해당 값이 있어도 Google크롤러가 인식하여 값을 사용합니다.)

 

"@type": "FAQPage" 임을 안내한 후(https://schema.org/여기값인 FAQPage)

 

HTML구조와 동일하게

 

mainEntity 안에 타입 Question이(https://schema.org/여기값인 Question) 들어가고

 

name값으로 질문을 만들고 그 안에 acceptedAnswer인

타입 Answer이(https://schema.org/여기값인 Answer) 들어가고

 

그 안에 text로 답변이 작성될 수 있습니다.

 

 

구글 서치콘솔에서 보이는 값

잦은 문의 사항 : 유효한 항목 ~개 감지됨

 

Type QAPage와 차이?

QAPage(왼쪽)와 FAQPage(오른쪽)의 차이

https://schema.org/QAPage는 구글 공식문서에 따르면 이렇게(사진 좌측) 질문 한개 용도로 설계되었습니다.

 

https://schema.org/FAQPage는 아래와 같이 한페이지에 여러 질문 용도로 사용할 수 있습니다.

 

 

스키마 참조 http와 https 차이?

차이 없습니다.

https로 호스팅된 페이지에서 http://schema.org/FAQPage를 참조해도 상관없습니다.

 

실제 브라우저에서 동작하지 않는 내용이기때문에 문제가 없으며, 크롤러만 인식하는 내용입니다.

따라서 안전하지 않은 콘텐츠같은 https에서 http차단을 걱정하지 않으셔도 됩니다.

 

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.

만약, 본문 공유를 원하신다면 링크 공유를 해주세요

저작권 정책 확인하기
링크 공유하기

 댓글 (7개)


  • 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 2020.07.11 09:58 신고 댓글주소수정/삭제댓글쓰기

    좋은 정보 감사합니다~

    워드프레스에서는 SEO 플러그인을 사용하면 Schema Type을 지정할 수 있어 편리한데, 티스토리에서는 이 기능을 구현하기가 조금 어렵게 느껴지네요.


    • hi098123 2020.07.11 15:19 신고 댓글주소수정/삭제

      역시 워드프레스에는 관련 플러그인이 있군요
      티스토리에서도 JSON-LD를 본문(html body)내에 넣어도 다행히 구글 크롤러가 인식하는것 같습니다.

      HTML을 건들면 구조를 새로 만들거나, 변경해야돼서 복잡해지는데
      차라리 JSON-LD를 사용하면 그나마 복잡하진 않을겁니다.

      여기 웹툴 카테고리에 JSON-LD생성용 툴도 언젠가 제작할 예정입니다.


  • 뉴스-정보 2021.04.15 18:48 신고 댓글주소수정/삭제댓글쓰기

    글 잘읽었습니다. 감사합니다. 티스토리 글쓰기 할 때 html 로 변경해서 스키마 코드를 넣으면 모두 자동으로 사라져 버리는데 어떻게 적용을 할지 고민입니다. 답변해주시면 감사드리겠씁니다!!!ㅜ


    • hi098123 2021.04.16 02:20 신고 댓글주소수정/삭제

      html 마크업이아닌 JSON+LD를 사용하시면 됩니다.

      스키마를 적용해도 구글에 판단된 평판에따라 나타나기도, 안나타나기도 합니다.


  • 뉴스-정보 2021.04.16 11:02 신고 댓글주소수정/삭제댓글쓰기

    위에서 알려주신 json+ld 코드를 티스토리 글쓰기 html 에 넣고 글을 발행하면 아무것도 출력이 되지 않습니다.

    어제 해봤던 html 로 집어 넣으면 정상적으로 출력이 되지만

    <div itemscope="" itemtype="https://schema.org/FAQPage">
    <div itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question"> 등의
    스키마 관련 태그는 모조리 사라져버립니다. 티스토리 글쓰기 에디터에서 자동으로 지우는 것이겠지만,

    블로그 운영자님은 예시페이지에 어떻게 삽입하셨는지 궁금합니다.
    블로그관리>스킨편집에서 설정을 해야하는 것인지요?

    구글에서 보여질 수도 있고 안보여질 수도 있다는 점은 이해하고 있습니다.
    답변주셔서 감사합니다.


    • hi098123 2021.04.16 11:10 신고 댓글주소수정/삭제

      시작부터 끝까지 html 에디터로 수정했습니다.
      json+ld 는 정보만 담고있으며 브라우저에 표시되지 않는 자바스크립트 영역입니다.


  • 포그비엠 2021.05.17 03:14 댓글주소수정/삭제댓글쓰기

    관리자의 승인을 기다리고 있는 댓글입니다