• ホームページ
  • 記事
  • 全般的
  • プラグインなしでレビューと評価のためのリッチスニペットを追加するにはどうすればよいですか？ Google Structured Schema.orgMicrodataマークアップ

プラグインなしでレビューと評価のためのリッチスニペットを追加するにはどうすればよいですか？ Google Structured Schema.orgMicrodataマークアップ

公開: 2020-04-21
プラグインなしでレビューと評価のためのリッチスニペットを追加するにはどうすればよいですか？ Google StructuredSchema.orgマークアップ

GoogleがGoogle検索結果ページ（SERP）の特別なレビュー投稿のいくつかにhow and why評価を表示しているのか疑問に思ったことはありますか？

このチュートリアルでは、レビュー/評価用のadd rich snippetをschema.orgの形式で追加して、Googleがレビューの詳細を理解し、検索ページに表示できるようにする方法について説明します。

Crunchify-創世記のテーマ-Googleページは豊富な結果の対象です

ライブ結果をチェックアウトします：https：//crunchify.me/2VAUkTK。 リッチスニペットリンク。

始める前に、schema.orgとは何かを理解しましょう。

スキーマは、GoogleまたはBingの検索エンジンがブログページの情報をよりeffectivelyに解析および解釈できるようにするmicrodataの一種です。 アイデアは、検索エンジンがstructured formatですべてのデータを理解できるようにすることです。これにより、検索エンジンは、検索クエリに基づいて、関連する結果データをエンドユーザーに表示することもできます。

始めましょう：

ポイント-1）構造化データをschema.orgの形式でブログに追加するにはどうすればよいですか？

CrunchifyではGenesisFrameworkを使用しており、デフォルトではすべてのschema.org microdata形式が付属しています。 それはあなたのサイトのコードでマイクロデータを出力します。 何も追加する必要はありません。これは、以下でdiscuss below Review metadataオプションを除いて、GenesisFrameworkの美しさです。

ポイント-2）サイトの構造化データを検証する方法は？

Google Search Consoleには、デフォルトで構造化データを表示するオプションがあります。 下の図を見てください。

Google検索コンソール-構造化データレポート-Crunchify
Google検索コンソールですべてのタイプのSchema.org構造化データを確認します

このデータを表示するには、サイト/ブログを検索コンソールに追加する必要があります。 サイトのIDを確認すると、すぐにデータを表示できる場合や、このデータがautomatically生成されるまで1 OR待つ場合があります。

ポイント-3構造化データが有効かどうか、または問題があるかどうかを確認するにはどうすればよいですか？

  • 上記の図のItems with Errorsの最後の列に、Googleは構造化データテストツールと呼ばれる追加のツールも提供しています。
  • そこに行き、 Fetch URLをクリックするだけです。
  • URLを入力し、[ FETCH & VALIDATE ]をクリックします。
  • 右側–schema.orgの検証結果が表示されます。
  • 失敗してschema.orgが不良の場合、赤い色のメッセージが表示されます。
Google構造化データテストツールのヒント
CrunchifyPostの構造化データテスト結果

Expand above Review sectionを展開すると、レビュー用のすべての詳細なマイクロデータを表示できるはずです。 自分でチェックできます。 Here is a URL.

このチュートリアルは、以下の質問がある場合に機能します。

  • レビューと評価のためのリッチスニペットの有効化
  • レビュー用の構造化データ
  • 評価のための構造化データ
  • 集計評価スキーマジェネレータ
  • 'Review'schema.orgmicrodataのスキーマクリエーター
  • リッチスニペットレビュージェネレータ
  • レビューのためのグーグルリッチスニペット
  • リッチスニペットプレビューツール
  • WordPressブログ投稿のリッチスニペット
  • リッチスニペットサイトのレシピ
Crunchify-ジェネシス-スニペットスキーマの詳細を確認する

ステップ-4ReviewSchema.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によるGenesisFrameworkレビュー-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対応ページに追加するにはどうすればよいですか？

ページの<head>の下の<style amp-custom> HTMLタグの下に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 >

他にご不明な点がありましたらお知らせください。

GenesisFrameworkのコピーを入手することを忘れないでください。

幸せなブログ。