Dynamische CRAWL-Seiten für Google- und Yandex-Suchmaschinen (Snapshots, _escaped_fragment_, Ajax, Fragment)

  • Tutorial
Bild

Frieden für alle!

Der Inhalt des Artikels:

1. Was ist CRAWL
2. Dynamisches CRAWL
3. Aufgaben, Tools, Lösung
4. Lesen
5. Schlussfolgerungen



1. Was ist CRAWL?



Dies ist ein Scan der Seiten der Website durch Suchmaschinen, um die erforderlichen Informationen zu erhalten. Das Ergebnis dieses Scans ist eine HTML-Darstellung am Endpunkt (jede Suchmaschine hat ihre eigenen Einstellungen, nämlich js zu laden oder nicht (mit oder ohne Start), css, img usw.) oder es wird auch als "Snapshot" der Site bezeichnet.

2. Dynamisches Crawlen



Hier werden wir über dynamische CRAWL-Seiten sprechen, und zwar dann, wenn Ihre Website über dynamischen Inhalt verfügt (oder so genannter Ajax-Inhalt). Ich habe ein Projekt mit Angular.js + HTML5 Router (dies ist, wenn ohne domain.ru #! Path und so domain.ru/path), ändert sich der gesamte Inhalt inund eine einzige index.php und spezielle Einstellungen .htaccess, so dass nach dem Aktualisieren der Seite alles so angezeigt wird, wie es sollte.

Dies ist in den Einstellungen des Winkelfräsers angegeben:
 $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });


Dies ist in .htaccess geschrieben:
RewriteEngine on
        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]
        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.php [L]


3. Aufgaben, Werkzeuge, Lösung



Aufgaben:

1. Geben Sie den dynamischen Inhalt der Seite so an, wie er nach dem Rendern und Initialisieren der Anwendung wird.
2. Bilden, optimieren und komprimieren Sie den HTML-Snapshot der Seite.
3. Geben Sie den HTML-Snapshot der Suchmaschine

Werkzeuge:

1. Installiertes NPM (npm ist der node.js-Paketmanager. Mit ihm können Sie Module und Abhängigkeiten verwalten.)
2. Installiertes HTML-Snapshots- Modul mit dem folgenden Befehl:
 npm install html-snapshots

3. Die richtige Konfiguration

Lösung:

Aus Gründen der Geschwindigkeit empfehle ich, das "Löschen" auf localhost (dem lokalen Webserver) durchzuführen.

Zuerst müssen Sie die main index.php im Meta-Tag in head hinzufügen:


Beispiel sitemap.xml:
http://localhost/domain.ru/www/product/302016-07-22T19:47:25+01:001.0


Server.js Konfiguration:

var fs = require("fs");
var path = require("path");
var util = require("util");
var assert = require("assert");
var htmlSnapshots = require("html-snapshots");
var minify = require('html-minifier').minify;
htmlSnapshots.run({
    //#1 С использованием SITEMAP
    //input: "sitemap",
    //source: "sitemap_localhost.xml",
    //#2 Массив ссылок на страницы сайта
    input: "array",
    source: ["http://localhost/domain.ru/www/product/30"],
    //protocol: "https",
    // setup and manage the output
    outputDir: path.join(__dirname, "./tmp"),
    //Чистит директорию перед сохранением новых копий
    outputDirClean: false,
    // Селектор любого блока, который находится внутри  и отображается после инициализации приложения
    selector: "#product",
    //Ограничить время загрузки до 12 секунд, а можно и больше
    timeout: 120000,
    //Настройки помогающие отображать контент быстрее для CRAWL
    phantomjsOptions: [
        "--ssl-protocol=any",
        "--ignore-ssl-errors=true",
        "--load-images=false"
    ]
}, function (err, snapshotsCompleted) {
    var body;
    console.log("completed snapshots:");
    assert.ifError(err);
    snapshotsCompleted.forEach(function(snapshotFile) {
        body = fs.readFileSync(snapshotFile, { encoding: "utf8"});
        //Убираем стили и их содержание
        var regExp = /]*?>.*?<\/style>/ig;
        var clearBody = body.replace(regExp, '');
        //Производим замену доменного имени
        var domain = /http:\/\/localhost\/domain.ru\/www/ig;
        clearBody = clearBody.replace(domain, '//domain.ru');
        //Производим оптимизацию html файла
        clearBody = minify(clearBody, {
            conservativeCollapse: true,
            removeComments: true,
            removeEmptyAttributes: true,
            removeEmptyElements: true,
            collapseWhitespace: true
        });
        //Записываем в файл
        fs.open(snapshotFile, 'w', function(e, fd) {
            if (e) return;
            fs.write(fd, clearBody);
        });
    });
});
console.log('FINISH');


Auf Befehl ausführen:
node server


Den Algorithmus verstehen:

1. Zuerst werden alle Seiten „eingelesen“.
2. Dateien und Namensordner werden entsprechend Ihrer URL erstellt: product / 30 / index.hmtl (index.html oder product / 30.html können verwendet werden, da dies für jeden einfacher ist.) )
3. Danach ruft es callback -> snapshotsCompleted auf, wo es jeden index.html Snapshot Ihrer Seite optimiert.

Die Snapshots Ihrer Site wurden erstellt und müssen bei der Eingabe an den Such-Bot weitergegeben werden:

index.php
if (isset($_GET['_escaped_fragment_'])) {
    if ($_GET['_escaped_fragment_'] != ''){
        $val = $_GET['_escaped_fragment_'];
        include_once "snapshots" . $val . '/index.html';
    }else{
        $url = "https://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
        $arrUrl = parse_url($url);
        $val = $arrUrl['path'];
        include_once "snapshots" . $val . '/index.html';
    }
}else {
    include_once('pages/home.php');
}


Erläuterung:

1. HTML5-Push-Status
Wenn Sie HTML5-Push-Status verwenden (empfohlen): Fügen Sie
einfach dieses Meta-Tag zum Kopf Ihrer Seiten hinzu


URLs Ihrer Look die wenn wie folgt aus :
www.example.com/user/1
Then - Anweisung Zugriff auf Ihre URLs wie folgt aus :
www.example.com/user/1?_escaped_fragment_=

2. Hash - Bang
das , wenn Sie die Hash - Bang verwenden (#!):
Die , wenn Ihr URLs sehen wie
folgt aus : www.example.com/# ! / User / 1 Greifen Sie

dann auf Ihre URLs wie
folgt zu : www.example.com/?_escaped_fragment_=/user/1

Zusätzlich für diejenigen, die Bilder haben, aber keine Optimierung:

var fs = require("fs");
var minify = require('html-minifier').minify;
var path = require("path");
var util = require("util");
var assert = require("assert");
var htmlSnapshots = require("html-snapshots");
//Получение списка папок
var myPath = path.join(__dirname, "./tmp/domain.ru/www/");
function getFiles (dir, files_){
    files_ = files_ || [];
    var files = fs.readdirSync(dir);
    for (var i in files){
        var name = dir + '/' + files[i];
        if (fs.statSync(name).isDirectory()){
            getFiles(name, files_);
        } else {
            files_.push(name);
        }
    }
    return files_;
}
var allFiles = getFiles(myPath);
//var allFiles = [ 'C:\\xampp\\htdocs\\nodejs\\crawler\\tmp\\domain.ru\\www\\/product/30/index.html' ];
var body;
allFiles.forEach(function(snapshotFile){
    body = fs.readFileSync(snapshotFile, { encoding: "utf8"});
    var regExp = /]*?>.*?<\/style>/ig;
    var clearBody = body.replace(regExp, '');
    var domain = /http:\/\/localhost\/domain.ru\/www/ig;
    clearBody = clearBody.replace(domain, '//domain.ru');
    clearBody = minify(clearBody, {
        conservativeCollapse: true,
        removeComments: true,
        removeEmptyAttributes: true,
        removeEmptyElements: true,
        collapseWhitespace: true
    });
    var social = /
    .*?<\/ul>/ig; clearBody = clearBody.replace(social, ''); fs.open(snapshotFile, 'w', function(e, fd) { if (e) return; fs.write(fd, clearBody); }); }); console.log('COMPLETE');


4. Lesen



stackoverflow.com/questions/2727167/getting-all-filenames-in-a-directory-with-node-js - Arbeiten mit Dateien in node.js
github.com/localnerve/html-snapshots - Snapshots-Modul doc
perfectionkills.com/ Experimentieren mit HTML-Minifier - Options-Snapshot-Modul doc

yandex.ru/support/webmaster/robot-workings/ajax-indexing.xml - yandex crawler info
developers.google.com/webmasters/ajax-crawling/docs/specification - google

crawler info www.ng-newsletter.com/posts/serious-angular-seo.html - article
prerender.io/js-seo/angularjs-seo-get-your-site-indexed-and-to-top-of- -die-Suchergebnisse - Artikel
prerender.io/documentation - Artikel

regexr.com- regexr
stackoverflow.com/questions/15618005/jquery-regexp-selecting-and-removeclass - regexr

5. Schlussfolgerungen



Jetzt können Sie sicher SPA-Anwendungen schreiben, ohne sich Gedanken über das "Booten" durch den Such-Bot machen zu müssen. Sie können auch die richtige Konfiguration für Ihr "Tool" sowohl für den "Server" als auch für den "Client" auswählen!

Alles berufliche Erfolg!

Nur registrierte Benutzer können an der Umfrage teilnehmen. Bitte komm rein .

Bewerten:

  • 20,5% 1 7
  • 5,8% 2 2
  • 14,7% 3 5
  • 8,8% 4 3
  • 14,7% 5 5
  • 0% 6 0
  • 2,9% 7 1
  • 2,9% 8 1
  • 0% 9 0
  • 29,4% 10 10

Jetzt auch beliebt: