Dynamischer content - Googles neuer AJAX-Crawler

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • 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 Source Code

    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>
    5. <meta charset="utf-8">
    6. <title>Hello User!</title>
    7. <style type="text/css">
    8. body { padding:0px 15%; }
    9. .ytEntry { margin:5px; background-color:#ccc; }
    10. #mainCt { width:400px; }
    11. #navbar { position:fixed; right:50px; width:100px; }
    12. #navbar div { padding:5px; margin:5px; background-color:#ccc; cursor: pointer; }
    13. .loadMore { padding:5px; margin:5px; background-color:#aa0000; cursor: pointer; }
    14. </style>
    15. <script type="text/javascript">
    16. // pageRDY
    17. $(document).ready(function()
    18. {
    19. $('.tagSearch').click(function()
    20. {
    21. pagination = 1;
    22. sWord = this.innerHTML;
    23. $('#mainCt').html('');
    24. getVideos();
    25. });
    26. $(".loadMore").live("click", function() {
    27. pagination = pagination+50;
    28. getVideos();
    29. });
    30. pagination = 1;
    31. sWord = 'tutorials';
    32. getVideos();
    33. });
    34. // YT get videos
    35. function getVideos()
    36. {
    37. $.ajax({
    38. url: 'http://gdata.youtube.com/feeds/api/videos?start-index='+pagination+'&alt=json&max-results=50&q='+sWord+'&lr=en&orderby=published',
    39. dataType: 'json',
    40. success: function(rspData)
    41. {
    42. if(rspData.feed.entry)
    43. {
    44. var rspHtml = '';
    45. $.each(rspData.feed.entry, function(i){
    46. var vidE = rspData.feed.entry[i];
    47. rspHtml = rspHtml+'<div class="ytEntry">'+vidE['title']['$t']+'</div>';
    48. });
    49. $('.loadMore').remove();
    50. $('#mainCt').append(rspHtml+'<div class="loadMore">LOAD MORE</div>');
    51. } else { alert('error'); }
    52. },
    53. error: function(rspData){ alert('error'); }
    54. });
    55. }
    56. </script>
    57. </head>
    58. <body>
    59. <div id="header"><h1>Hello crawler</h1></div>
    60. <div id="navbar">
    61. <div class="tagSearch">Tutorials</div>
    62. <div class="tagSearch">Trailer</div>
    63. <div class="tagSearch">Music</div>
    64. </div>
    65. <div id="mainCt"></div>
    66. </body>
    67. </html>
    Display All
  • 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

    Source Code

    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

    Source Code

    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

    Source Code

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