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.

There are two steps to implementing In-Line SEO:

1. Retrieving the data in HTML format via Yotpo's API.
2. 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>

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>