• 홈페이지
  • 조항
  • 일반적인
  • 플러그인 없이 리뷰 및 평가를 위해 리치 스니펫을 추가하는 방법은 무엇입니까? Google Structured Schema.org 마이크로데이터 마크업

플러그인 없이 리뷰 및 평가를 위해 리치 스니펫을 추가하는 방법은 무엇입니까? Google Structured Schema.org 마이크로데이터 마크업

게시 됨: 2020-04-21
플러그인 없이 리뷰 및 평가를 위해 리치 스니펫을 추가하는 방법은 무엇입니까? Google 구조화된 Schema.org 마크업

Google이 Google 검색 결과 페이지(SERP)의 일부 특별 리뷰 게시물에 대해 등급을 표시 how and why 가 궁금하신가요?

이 튜토리얼에서는 Google이 귀하의 리뷰에 대한 세부 정보를 이해하고 검색 페이지에 표시할 수 있도록 schema.org 형식으로 리뷰/등급에 대한 add rich snippet 하는 방법에 대해 논의할 것입니다.

Crunchify - Genesis 테마 - Google 페이지는 리치 결과에 적합합니다.

실시간 결과 확인: https://crunchify.me/2VAUkTK. 리치 스니펫 링크.

시작하기 전에 schema.org가 무엇인지 이해합시다.

스키마는 Google 또는 Bing 검색 엔진이 블로그 페이지의 정보를 보다 effectively 구문 분석하고 해석할 수 있도록 하는 microdata 유형입니다. 아이디어는 검색 엔진이 검색 쿼리를 기반으로 최종 사용자에게 관련 결과 데이터를 다시 표시할 수 있도록 structured format 의 모든 데이터를 검색 엔진이 이해하도록 돕는 것입니다.

시작하자:

Point-1) schema.org 형식으로 블로그에 구조화된 데이터를 추가하는 방법은 무엇입니까?

Crunchify에서 우리는 Genesis Framework를 사용하고 있으며 기본적으로 모든 schema.org microdata 형식과 함께 제공됩니다. 사이트 코드의 마이크로데이터를 출력합니다. 나는 아무것도 추가할 필요가 없으며 discuss below 할 Review metadata 옵션을 제외하고 Genesis Framework의 장점입니다.

Point-2) 사이트의 구조화된 데이터를 확인하는 방법은 무엇입니까?

Google Search Console 은 기본적으로 구조화된 데이터를 볼 수 있는 옵션을 제공합니다. 아래 다이어그램을 살펴보십시오.

Google Search Console - 구조화된 데이터 보고서 - Crunchify
Google Search Console에서 모든 유형의 Schema.org 구조화된 데이터 확인

이 데이터를 보려면 사이트/블로그를 Search Console에 추가해야 합니다. 사이트의 신원을 확인하면 바로 데이터를 확인하거나 이 데이터가 automatically 생성될 때까지 일주일을 OR 수 있습니다.

Point-3 구조화된 데이터가 유효한지 또는 문제가 있는지 확인하는 방법은 무엇입니까?

  • 위의 다이어그램 Items with Errors 가 있는 추가 마지막 열에서 Google은 구조화된 데이터 테스트 도구라는 추가 도구도 제공합니다.
  • 거기로 이동하여 Fetch URL 를 클릭하십시오.
  • URL을 제공하고 FETCH & VALIDATE 를 클릭합니다.
  • 오른쪽에 schema.org 유효성 검사 결과가 표시되어야 합니다.
  • 실패 및 잘못된 schema.org 의 경우 - RED 색상 메시지가 표시되어야 합니다.
Google 구조화된 데이터 테스트 도구 도움말
Crunchify 포스트에 대한 구조화된 데이터 테스트 결과

Expand above Review section 에 대한 모든 세부 마이크로데이터를 볼 수 있습니다. 직접 확인하실 수 있습니다. Here is a URL.

이 자습서는 다음 질문 중 하나라도 있는 경우 작동합니다.

  • 리뷰 및 평가를 위한 리치 스니펫 활성화
  • 검토를 위한 구조화된 데이터
  • 평가를 위한 구조화된 데이터
  • 집계 등급 스키마 생성기
  • '검토' schema.org 마이크로데이터용 스키마 작성자
  • 리치 스니펫 리뷰 생성기
  • 검토용 Google 리치 스니펫
  • 리치 스니펫 미리보기 도구
  • WordPress 블로그 게시물용 리치 스니펫
  • 리치 스니펫 사이트 레시피
Crunchify - Genesis - 스니펫 스키마 세부정보 검토

4단계 Review Schema.org 스니펫을 추가해 보겠습니다.

다음은 TEXT section 아래에 있는 편집 패널에 넣어야 하는 HTML 코드입니다.

1
2
3
4
5
6
7
8
9
10
< div class = "crunchify-rating" itemscope itemtype = "http://schema.org/Review" >
     < span itemprop = "itemReviewed" itemscope itemtype = "http://schema.org/Thing" style = "font-size: 14px;" > < a itemprop = "url" href = "https://crunchify.me/genesis" target = "_blank" > < span itemprop = "name" > < strong > Genesis WordPress Theme Framework Review < / strong > < / span > < / a > < / span >
     < p > < / p >
     < strong > Description : < / strong > < span itemprop = "description" > One of the best WordPress Theme Framework which we use on Crunchify . com . Default comes with Google ' s rich schema . org snippet microdata . < / span >
     < span itemprop = "author" itemscope itemtype = "http://schema.org/Person" > < strong > Written by : < / strong > < span itemprop = "name" > App Shah < / span > < / span >
     < span itemprop = "reviewRating" itemscope itemtype = "http://schema.org/Rating" > < strong > Rating : < / strong > < span itemprop = "ratingValue" > 5 < / span > out of < span itemprop = "bestRating" > 5 < / span > < / span >
     < span itemprop = "publisher" itemscope itemtype = "http://schema.org/Organization" >
         < meta itemprop = "name" content = "Crunchify, LLC." / >
     < / span >
< / div >

그에 따라 값을 수정하면 위의 코드가 아래 이미지와 같이 간단한 CSS tricks 을 사용하여 멋진 위젯으로 변환됩니다.

라이브 리뷰가 있는 URL: https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/

Crunchify의 Genesis Framework Review - schema.org 마이크로데이터를 위한 최고의 테마

그리고 그게 다야. 블로그 게시물에 위의 코드를 추가한 후 Google Structured Data Validation tool 로 다시 돌아가 게시물 URL을 확인하세요. :) 크롤링 알고리즘을 기반으로 게시물을 SERP로 업데이트하는 데 최대 week 이 걸릴 수 있습니다.

Crunchify에서 어떤 CSS를 사용하고 있습니까?

Crunchify에서는 아래 CSS를 사용하고 있습니다. 테마의 style.css 파일에 아래 코드를 추가하고 필요에 따라 속성을 수정하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. crunchify - rating {
overflow : hidden ;
margin - bottom : 35px ;
border - radius : 3px ;
box - shadow : 0 0 2px 0 rgba ( 0 , 0 , 0 , . 12 ) , 0 2px 2px 0 rgba ( 0 , 0 , 0 , . 24 ) ;
font - size : 16px ;
color : #333;
padding : 30px 60px 5px ;
background : #fff;
border - left : 2px solid #157BDA;
}
. crunchify - rating : before {
content : "Rating" ! important ;
font - size : 16px ;
text - transform : uppercase ;
color : #fff;
float : left ;
margin : 2px 15px 15px 0 ;
background : #157BDA;
padding : 0px 20px ;
border - radius : 30px ;
}

위의 CSS 파일을 AMP 지원 페이지에 어떻게 추가합니까?

<style amp-custom> HTML 태그 아래에 있는 페이지의 <head> 아래에 위의 CSS 콘텐츠를 추가하기만 하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
   < head >
     . . .
     <style amp-custom>
      /* any custom styles go here. */
.crunchify-rating {
overflow : hidden ;
margin-bottom : 35px ;
border-radius : 3px ;
box-shadow : 0 0 2px 0 rgba ( 0,0,0,.12 ) , 0 2px 2px 0 rgba ( 0,0,0,.24 ) ;
font-size : 16px ;
color : #333 ;
padding : 30px 60px 5px ;
background : #fff ;
border-left : 2px solid #157BDA ;
}
.crunchify-rating:before {
content : "Rating" !important ;
font-size : 16px ;
text-transform : uppercase ;
color : #fff ;
float : left ;
margin : 2px 15px 15px 0 ;
background : #157BDA ;
padding : 0px 20px ;
border-radius : 30px ;
}
     </style>
     . . .
   < / head >

더 궁금한 점이 있으면 알려주세요.

Genesis Framework Copy를 받는 것을 잊지 마십시오.

행복한 블로깅.