Dynamischer content - Googles neuer AJAX-Crawler

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Dynamischer content - Googles neuer AJAX-Crawler

    Hi,
    google kann ja seit kurzem auch Webseiten mit Javascript generierten Content einlesen (wenn man sich an ein paar Regeln hält).

    Dokumentation:
    developers.google.com/webmasters/ajax-crawling/

    Meine Frage, wie kann ich diese Demo-Webseite für den crawler fit machen?
    jsbin.com/ejafex/2

    So wie ich das verstehe
    1. google erkennt im html code index.html#!key=value
    2. fragt meinen Server nach ajax.html?_escaped_fragment_=key=value
    3. via $_GET das _escaped_fragment_ abfangen
    4. mit php die YT-API abfragen und content ausgeben

    und das wiederum heißt ja, dass man alles doppelt programmiert?
    Dann erstelle ich doch lieber gleich eine PHP Seite ohne javascript, der einzige Nachteil ist dann der Seitenreload (bei. zb load more).

    oder hab ich da etwas nicht ganz verstanden?

    Gruss
    Janni



    CODE

    HTML-Quellcode

    1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    6. <meta charset="utf-8">
    8. <title>Hello User!</title>
    11. <style type="text/css">
    12. body { padding:0px 15%; }
    13. .ytEntry { margin:5px; background-color:#ccc; }
    14. #mainCt { width:400px; }
    15. #navbar { position:fixed; right:50px; width:100px; }
    16. #navbar div { padding:5px; margin:5px; background-color:#ccc; cursor: pointer; }
    17. .loadMore { padding:5px; margin:5px; background-color:#aa0000; cursor: pointer; }
    18. </style>
    21. <script type="text/javascript">
    23. // pageRDY
    24. $(document).ready(function()
    25. {
    27. $('.tagSearch').click(function()
    28. {
    29. pagination = 1;
    30. sWord = this.innerHTML;
    31. $('#mainCt').html('');
    32. getVideos();
    33. });
    35. $(".loadMore").live("click", function() {
    36. pagination = pagination+50;
    37. getVideos();
    38. });
    40. pagination = 1;
    41. sWord = 'tutorials';
    42. getVideos();
    43. });
    46. // YT get videos
    47. function getVideos()
    48. {
    49. $.ajax({
    50. url: 'http://gdata.youtube.com/feeds/api/videos?start-index='+pagination+'&alt=json&max-results=50&q='+sWord+'&lr=en&orderby=published',
    51. dataType: 'json',
    52. success: function(rspData)
    53. {
    54. if(rspData.feed.entry)
    55. {
    56. var rspHtml = '';
    57. $.each(rspData.feed.entry, function(i){
    58. var vidE = rspData.feed.entry[i];
    59. rspHtml = rspHtml+'<div class="ytEntry">'+vidE['title']['$t']+'</div>';
    60. });
    61. $('.loadMore').remove();
    62. $('#mainCt').append(rspHtml+'<div class="loadMore">LOAD MORE</div>');
    64. } else { alert('error'); }
    65. },
    66. error: function(rspData){ alert('error'); }
    67. });
    68. }
    69. </script>
    72. </head>
    74. <body>
    76. <div id="header"><h1>Hello crawler</h1></div>
    78. <div id="navbar">
    79. <div class="tagSearch">Tutorials</div>
    80. <div class="tagSearch">Trailer</div>
    81. <div class="tagSearch">Music</div>
    82. </div>
    84. <div id="mainCt"></div>
    87. </body>
    89. </html>
    Alles anzeigen

  • Jein, theoretisch musst du es doppelt programmieren.
    In einer idealen Welt, nimmt dir dein Framework/CMS die Arbeit ab und macht es automatisch.

    Lies dir die komplette AJAX Crawling Doku mal durch
    developers.google.com/webmaste…ling/docs/getting-started

    Fangen wir erstmal mit der Startseite an.
    Platziere das hier im Code

    Quellcode

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


    Der Google Crawler wird diese URL in den Index aufnehmen
    jsbin.com/ejafex/2?_escaped_fragment_

    Im PHP Code musst du also auf den Parameter escaped fragment prüfen und die Inhalte sofot laden

    Quellcode

    1. if(isset($_GET['_escaped_fragment_'])) {
    2. load contents
    3. }


    Deine Links auf der Rechten musst du erstmal mit Hashtags ausstatten.
    Mach also echte Links mit a href darauf und gib ihnen ein Hashtag (deutlich besser als den innerhTML zu verwenden, denke mal an Übersetzungen)

    Wenn du folgende URL irgendwo verlinkst, wo Google darauf zugreifen kann
    jsbin.com/ejafex/2#!video=Tutorials

    Dann wird der Google Crawler das hier aufrufen und den Text crawlen
    jsbin.com/ejafex/2?_escaped_fragment_=video=Tutorials

    Und das musst du in deinem Controller auch verwenden

    Quellcode

    1. $str = $_GET['_escaped_fragment_'];
    2. parse_str($str, $res);
    3. print_r($res);