In-Line SEO
This article is for users of self-hosted platforms who would like to host Yotpo's reviews (and other data) as static content within their website.
As Google now crawls JavaScript, no In-Line SEO implementation is necessary if you would like to have your reviews crawled and indexed only by Google. Please be sure to allow ample time for Google to crawl and index your site.
If you wish to have your reviews crawled by Bing and Yahoo as well, you must implement In-Line SEO by following the instructions below:
There are two steps to implementing In-Line SEO:
- Retrieving the data in HTML format via Yotpo's API.
- Embedding the pulled HTML payload directly in your pages. The purpose of this is to have the data on the server-side, thus improving search engine indexing of the content.
Prerequisites
To utilize In-Line SEO, you would need to have backend access to server-side functions (required for triggering the API call as specified below)
Support for paginated reviews
In order to support paginated reviews in your In-Line SEO implementation, you will need to support the review page parameter. When receiving the "yoReviewsPage" parameter (query string) it is necessary to indicate the page number of the reviews page in your Yotpo Batch Request:
Retrieving the data via API
To embed the static HTML retrieved from a Yotpo endpoint: Retrieve the HTML payload via API, using the following endpoint:Method: POST
URL: http://staticw2.yotpo.com/batch
Content-Type: JSON
Mandatory parameters
- app_key- The relevant Yotpo account App Key
- method - An array of widget types (methods) and the parameters for each method. The commonly used methods are:
- main_widget - retrieve the reviews widget payload
- main_widget (with "mode":"questions") - retrieve separate Q&A widget payload
- bottomline - retrieve the star rating payload
- testimonials - retrieve the dedicated testimonials widget payload
- pid - The product ID for which to bring the widget.
Optional parameters
- page - The page number of the reviews page as applied by the Reviews Widget
e.g. ?yoReviewsPage=###reviews page number###
Sample request body
{
"methods": [{
"method": "main_widget",
"params": {
"pid": "#PRODUCT_ID#",
"page": 1
}
},
{
"method": "main_widget",
"params": {
"mode": "questions",
"pid": "#PRODUCT_ID#"
}
},
{
"method": "bottomline",
"params": {
"pid": "#PRODUCT_ID#"
}
},
{
"method": "testimonials",
"params": {
"format": "html"
}
}
],
"app_key": "#####YOUR APPKEY HERE#####",
"is_mobile":"false"
}
Sample response
[
{
"method": "main_widget",
"result": "<div class=..." // HTML content
}, {
"method": "bottomline",
"result": "<span ..." // HTML content
}, {
"method": "testimonials",
"result": "<div id=..." // HTML content
}
]
Embedding the HTML payload
After retrieving the HTML payload via API, parse the response into variables based on the methods, and embed each one into a corresponding placeholder DIV (based on the widgets you're interested to display on-site).
The placeholder for the star rating is the following DIV:
<div class="yotpo bottomline"
data-product-id="[[ UNIQUE IDENTIFIER ID OF PRODUCT ]]"
[[ API RESPONSE GOES HERE ]]
</div>
The placeholder for the main widget is the following DIV:
<div class="yotpo yotpo-main-widget"
data-product-id="[[ UNIQUE IDENTIFIER ID OF PRODUCT ]]"
data-name="[[ PRODUCT NAME ]]"
data-url="[[ PRODUCT PAGE URL ]]"
data-image-url="[[ URL TO THE IMAGE OF THE PRODUCT ]]"
data-description="[[ PRODUCT DESCRIPTION ]]">
[[ API RESPONSE GOES HERE ]]
</div>
- The data-product-id value is the pid you had sent in the API call.
- The data-product-id attribute only supports alphanumeric (a...z, A...Z, 0...9), "_" and "-" characters.
Yotpo Batch Request + Parsing Example using PHP
<?php
//This is an example batch request for app_key {app_key}, please remember to switch to your own.
$url = 'http://staticw2.yotpo.com/batch';
//Building the batch data
$data = array('methods' => '
[{"method":"main_widget","params":{"pid":"295823037"}{"page":2}},
{"method":"bottomline","params":{"pid":"295823037",
"link":"",
"skip_average_score":false}}
]',
'app_key' => {app_key});
// Also remember that the request method is HTTP POST, and that the request can be done on HTTPS and on HTTP.
$options = array(
'http' => array(
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data),
),
);
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
// Parsing the response
$response = json_decode($result, true);
$main_widget = $response[0]["result"];
$bottom_line = $response[1]["result"];
// Now echo either one of $main_widget or $bottom_line variables, should yield the HTML of the relevant widget.
?>
<!-- We will now build a demo product page, with static HTML content pulled from the batch request above. -->
<html>
<head>
<script type="text/javascript">
(function e(){
var e=document.createElement("script");
e.type="text/javascript",
e.async=true,
e.src="//staticw2.yotpo.com/{app_key}/widget.js";
var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
</script>
</head>
<body>
<h1> My Product lt;/h1>
<div
class="yotpo bottomLine"
data-appkey="{app_key}"
data-product-id="295823037"
data-name="Everything But Sticks"
data-url="" data-image-url="//cdn.shopify.com/s/files/1/0040/6842/products/EverythingBut1_large.png%3Fv=1382385048"
data-description="....">
<!-- this entire inner html will be overriden by the widget.js JS lib -->
<?php echo $bottom_line ?>
</div>
<h2> Reviews: </h2>
<div
style="width:700px"
class="yotpo yotpo-main-widget"
data-appkey="{app_key}"
data-product-id="295823037"
data-name="Everything But Sticks"
data-url=""
data-image-url="//cdn.shopify.com/s/files/1/0040/6842/products/EverythingBut1_large.png%3Fv=1382385048"
data-description="....">
<!-- this entire inner html will be overriden by the widget.js JS lib -->
<?php echo $main_widget ?>
</div>
</body>
</html>