In-Line SEO

      In-Line SEO


        Article summary

        Products


        Reviews
        Supported plans

        Free, Starter, Pro, Premium, Enterprise

        eCommerce Platform

        Custom

        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.

        Important:

        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:

        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###
        Tip:
        For the full specification, visit our API Documentation.

        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
            }
        ]
        Please note:
        The number of reviews pulled in the In-Line SEO HTML is the same as the "reviews per page" in the Reviews Widget. You can change this value in your Yotpo Admin.
        Tip:
        It is highly recommended to develop a cache mechanism to store the payload locally and to refresh it periodically. The purpose of this caching is to avoid long loading times every time the widget loads.

        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).

        Important:
        For best SEO results - deploy the product's Star Rating and Reviews Widget within the product template page on the server side of your website.

        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>
        Please note:
        • 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>

        Was this article helpful?