丰富网页摘要：由 javascript 调用的评级不会出现在 Google 中

Question

我在我的单页 html 网站上实施了星级评分系统。该系统使用 jQuery、AJAX 和 PHP。我找到了代码here，它在存储评分和更新投票方面效果很好。

这是 Javascript 代码：

    // STARS
$(document).ready(function() {

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


    $('.ratings_stars').hover(
        // Handles the mouseover
        function() {
            $(this).prevAll().andSelf().addClass('ratings_over');
            $(this).nextAll().removeClass('ratings_vote'); 
        },
        // Handles the mouseout
        function() {
            $(this).prevAll().andSelf().removeClass('ratings_over');
            // can't use 'this' because it wont contain the updated data
            set_votes($(this).parent());
        }
    );


    // This actually records the vote
    $('.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(
            '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);
    $(widget).find('.avg_votes').text(exact);
}
// END STARS

有一个用于存储和更新评级的 PHP 脚本：

$rating = new ratings($_POST['widget_id']);


isset($_POST['fetch']) ? $rating->get_ratings() : $rating->vote();

class ratings {

var $data_file = './ratings.data.txt';
private $widget_id;
private $data = array();


function __construct($wid) {

$this->widget_id = $wid;

$all = file_get_contents($this->data_file);

if($all) {
    $this->data = unserialize($all);
}
}

public function get_ratings() {
if($this->data[$this->widget_id]) {
    echo json_encode($this->data[$this->widget_id]);
}
else {
    $data['widget_id'] = $this->widget_id;
    $data['number_votes'] = 0;
    $data['total_points'] = 0;
    $data['dec_avg'] = 0;
    $data['whole_avg'] = 0;
    echo json_encode($data);
}
}
public function vote() {
# Get the value of the vote
preg_match('/star_([1-5]{1})/', $_POST['clicked_on'], $match);
$vote = $match[1];

$ID = $this->widget_id;
# Update the record if it exists
if($this->data[$ID]) {
    $this->data[$ID]['number_votes'] += 1;
    $this->data[$ID]['total_points'] += $vote;
}
# Create a new one if it doesn't
else {
    $this->data[$ID]['number_votes'] = 1;
    $this->data[$ID]['total_points'] = $vote;
}

$this->data[$ID]['dec_avg'] = round( $this->data[$ID]['total_points'] / $this->data[$ID]['number_votes'], 1 );
$this->data[$ID]['whole_avg'] = round( $this->data[$ID]['dec_avg'] );


file_put_contents($this->data_file, serialize($this->data));
$this->get_ratings();
}

# ---
# end class
}

并且评分是通过我的html页面中的这段代码获得的：

      <div class='movie_choice'>
  <div id="r1" class="rate_widget">
            <div class="star_1 ratings_stars"></div>
            <div class="star_2 ratings_stars"></div>
            <div class="star_3 ratings_stars"></div>
            <div class="star_4 ratings_stars"></div>
            <div class="star_5 ratings_stars"></div>
            <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
            <div class="avg_votes" style="display: table-cell; float: left;" itemprop="ratingValue"></div><div style="float:left;">/</div><div itemprop="bestRating" style="float:left;">5</div><div style="float: left;">,&nbsp;</div><div class="total_votes" style="display: table-cell; float:left;" itemprop="ratingCount"></div><div style="width: 200px;"> &nbsp;voti</div>          
            </div>
            </div>
        </div>

该方法有效并显示正确的平均评分和总票数。问题是谷歌无法识别ratingValue。在结构化数据的测试工具中，谷歌告诉我“ratingValue 字段不能为空”。换句话说，对于 Google，代码行 <div class="avg_votes" style="display: table-cell; float: left;" itemprop="ratingValue"></div> 意味着 ratingValue 是空的，尽管评级在页面中显示正确。

我想问题是这个方法是基于jQuery的，我的页面是html的，但是我找不到这个问题的解决方案。

请问您知道问题的根源吗？

Answer 1

Google 在为您的网页编制索引时不会运行 javascript，因此它只会看到页面上的空 html 元素而不是评分（因为评分是由 javascript 生成的）。如果您希望 google 看到评级，则需要在提供页面时在服务器上生成正确的 html。这样，google 就会看到带有评分的 html。