Add microdata using javascript

Question

I have a rating system based on Javascript and php. On each page is displays the result "X votes (moyenne X)". X are numbers and "moyenne" means "average notation".

I want the javascript to add microdata info. Source code should show somemething like: <span itemprop="reviewCount">X</span> (Moyenne <span itemprop="ratingValue">X</span>)

Is it possible ? And could you help me ?

I think the line I have to change is this one: $(widget).find('.total_votes').text( votes + ' votes (Moyenne ' + exact + ')' );

Here is my JS:

<script>
$(document).ready(function() {
    $('.rate_widget').each(function(i) {
        var widget = this;
        var out_data = {
            widget_id : $(widget).attr('id'),
            fetch: 1
        };
        $.post(
            '../php/ratings.php',
            out_data,
            function(INFO) {
            $(widget).data( 'fsr', INFO );
                set_votes(widget);
            },
            'json'
        );
    });

    $('.ratings_stars').hover(
        function() {
            $(this).prevAll().andSelf().addClass('ratings_over');
            $(this).nextAll().removeClass('ratings_vote'); 
        },
        function() {
            $(this).prevAll().andSelf().removeClass('ratings_over');
            set_votes($(this).parent());
        }
    );

    $('.ratings_stars').bind('click', function() {
        var star = this;
        var widget = $(this).parent();
        var clicked_data = {
            clicked_on : $(star).attr('class'),
            widget_id : $(star).parent().attr('id')
        };
        $.post(
            '../php/ratings.php',
            clicked_data,
            function(INFO) {
                widget.data( 'fsr', INFO );
                set_votes(widget);
        },
            'json'
        ); 
    });
});

function set_votes(widget) {
    var avg = $(widget).data('fsr').whole_avg;
    var votes = $(widget).data('fsr').number_votes;
    var exact = $(widget).data('fsr').dec_avg;
    window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);
    $(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
    $(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote'); 
    $(widget).find('.total_votes').text( votes + ' votes (Moyenne ' + exact + ')' );
}
</script>

cygri · Answer 1 · 2012-08-19T11:53:26.747

4

My understanding is that Google and other microdata consumers will not pick up the information if it is added by Javascript. I think it needs to be present in the actual HTML markup.

Google states on various support pages that crawlers see only the content that is visible to a text browser, or a browser with Javascript turned off; I'm assuming that it's no different when Microdata is involved. See here and here for example.

edited Aug 19 '12 at 11:53

answered Aug 12 '12 at 16:41

cygri

9,412
1
25
47

@cygri, do you have any evidence/links to support this? – Ralph Lavelle Aug 19 '12 at 07:16
@cygri, from what I can find on the web, the answer is more nuanced. The wikipedia GoogleBot page - http://en.wikipedia.org/wiki/Googlebot - states: "There is increasing evidence Googlebot can execute javascript and parse content generated by Ajax calls as well", and there are articles in SearchEngineLand and SearchEngineWatch to that effect too. It would be very hard to test for its reading of microdata or not, because apparently Google is not obliged to read it however it got there. – Ralph Lavelle Aug 20 '12 at 01:45
Googlebot [actually does parse microdata added from JS](http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157). Other user agents will probably have a much harder time though. – Stijn de Witt May 08 '17 at 11:36

Fatima Zohra · Answer 2 · 2012-08-17T07:26:08.823

only Opera n FF supports the MicroData JS.

<span itemprop="reviewCount">X</span> (Moyenne <span itemprop="ratingValue">X</span>)

Here is ur JS Code

var span = document.createElement("span");
span.itemProp = "reviewCount";
span.src = "http://example.org/example.jpg";
span.itemValue = X;

var span1 = document.createElement("span");
span1.itemProp = "ratingValue";
span1.src = "http://example.org/example.jpg";
span1.itemValue = X;

Add microdata using javascript

2 Answers2

Linked