AJAX 支持搜索引擎问题分析

AJAX 支持搜索引擎问题分析

搜索引擎可以的爬行器（spider）抓取网站的数据，并将其存储在搜索引擎的数据库中。搜索引擎将这些数据从数据库中检索出来以满足用户的查询需求。然而，一些网站是使用了 AJAX 技术来实现异步请求的，这可能会导致搜索引擎无法获取到这些网站的数据，而无法对其进行索引。

要解决这个问题，我们需要做一些改变，以便搜索引擎可以正确地获得网站的数据。

1.使用 Escape Fragment（转义片段）来处理 URL

搜索引擎可以检索 URL 中的数据，并将其转换为搜索结果。然而，如果我们的网站使用了 AJAX 技术，那么这些 URL 将不再包含必要的信息，导致搜索引擎无法正确地检索这些数据。要解决这个问题，我们可以通过使用 Escape Fragment 来处理 URL。

例如，在普通的 URL 中，数据被传递到服务器的方式可能是这样的：https://www.example.com/search?query=keyword。 在使用 AJAX 技术的网站上，JavaScript 代码可能会向服务器发出异步请求，例如： https://www.example.com/search#!query=keyword。 在这里，我们使用了问号（?）来分隔关键词和值，但是使用 AJAX 技术时，我们必须使用井号（#）。

要使这些 URL 对搜索引擎可用，我们可以使用 Escape Fragment。这项技术利用了搜索引擎在 URL 中发现井号（#）时处理 URL 的方法，以便读取基于 AJAX 的内容。

例如，我们可以在网站的头部加入以下代码：

<meta name="fragment" content="!">

这将告诉搜索引擎，当发现 URL 中出现井号（#）时，请将其转换为 Escape Fragment，然后检索该页面的内容。

2.提供 AJAX 钩子

搜索引擎无法识别 AJAX 动态更新的网页。 要使搜索引擎知道网站是否使用 AJAX 技术动态更新数据，请为每个页面提供 AJAX 钩子。 钩子是一种向搜索引擎发送 crawled 和 indexed 信号的技术。

例如，可以在 WordPress 网站上使用以下代码来提供 AJAX 钩子：

function my_asynchronous_content() {
  if ( ! is_singular() ) {
    return false;
  }
  if ( false == strpos( get_template(), 'single' ) ) {
    return false;
  }
  return true;
}
function my_fragment() {
  global $post;
  if ( ! my_asynchronous_content() ) {
    return '';
  }
  $html = '<div class="my-asynchronous-content">';
  ob_start();
  get_template_part( 'content', 'single' ); // the loop
  $loop_contents = ob_get_clean();
  $html .= $loop_contents;
  $html .= '</div>';
  return $html;
}
function my_status_header( $status_header, $header, $text, $protocol ) {
  if ( ! $protocol || 'HTTP/1.1' != $protocol ) {
    return $status_header;
  }
  if ( preg_match( '/^\d+/', $status_header, $matches ) ) {
    $status_code = intval( $matches[0] );
  } else {
    $status_code = 200;
  }
  if ( $status_code >= 200 && $status_code < 300 ) {
    header( 'X-WP-Nocache: ' . $_SERVER['REQUEST_URI'] );
  }
  return $status_header;
}
function my_setup_head() {
  if ( my_asynchronous_content() ) {
      add_action( 'wp_head', 'my_asynchronous_script', 50 );
  }
}
function my_asynchronous_script() {
?>
  <script type="text/javascript">
    jQuery(document).ready(function($) {
      if (typeof history.pushState !== "undefined") {
        var url = window.location.href;
        $('.my-asynchronous-content').each(function() {
          $(this).attr('id', 'tmp-' + Math.floor(Math.random() * 99999).toString(16));
          var tmp_container = $('#' + $(this).attr('id')).get(0);
          var my_fragment = $(this).parent().next('.my-asynchronous-content-data').html();
          history.replaceState({
            'ajax_content': true,
            'my_fragment': my_fragment
          }, '', url);
          $(this).html('');
          $.ajax({
            url: url,
            type: 'GET',
            success: function(response) {
              var el = $('.my-asynchronous-content', response).filter(function() {
                return $(this).attr('id') === tmp_container.id;
              });
              el.html($(el).parent().next('.my-asynchronous-content-data').html()).css('display', $(tmp_container).css('display')).css('visibility', 'visible');
              var new_title = $('title', response).text();
              $('title').text(new_title);
              history.replaceState({
                'ajax_content': true,
                'my_fragment': el.parent().next('.my-asynchronous-content-data').html()
              }, '', url);
            }
          });
        });
        $(window).on('popstate', function(event) {
          if ( event.originalEvent.state && event.originalEvent.state.ajax_content && event.originalEvent.state.my_fragment ) {
            $('.my-asynchronous-content').html(event.originalEvent.state.my_fragment);
            var new_title = $('title', response).text();
            $('title').text(new_title);
          }
        });
      } else {
        console.log('History API is not supported');
      }
    });
  </script>
<?php
}
add_filter( 'status_header', 'my_status_header', 10, 4 );
add_action( 'wp_enqueue_scripts', 'my_setup_head' );
add_action( 'wp_footer', 'my_fragment' );

通过提供 AJAX 钩子，我们可以让搜索引擎知道网站中有一些 AJAX 动态数据，并为其提供索引。