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

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

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

난이도

상 : 처음부터 끝까지 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와 차이?

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

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

스키마 참조 http와 https 차이?

차이 없습니다.

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

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

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

저작자표시

'웹 프로그래밍 > HTML' 카테고리의 다른 글

2021년에도 IE를 지원해야될 끔찍한 이유 (0)	2020.12.17
여러 웹툴을 만들어보며 느낀점, 프론트엔드 (0)	2020.11.23
CSS) nth-child, nth-of-type 다양한 활용방법 (2)	2020.08.04
웹브라우저에서 와이파이 감지하기 (1)	2020.08.04
JS) AudioContext 음소거(mute) (0)	2020.07.05
JS) getComputedStyle로 스타일 가져오기 (0)	2020.07.04
CSS 선택자로 유튜브 링크에 아이콘 넣기 (0)	2020.06.25
CSS) list-style 다양한 종류 (list-style-type) (3)	2020.06.25

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

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

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

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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

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

난이도

기능 설명

소개

난이도 상 HTML로 작성 방법

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

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

Type QAPage와 차이?

스키마 참조 http와 https 차이?

'웹 프로그래밍 > HTML' 카테고리의 다른 글

저작권 보호안내

링크 공유하기

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역