Ваше благополучие зависит от ваших собственных решений.

Джон Дэвисон Рокфеллер

Меню сайта
  • Компьютеры
  • Телефоны
  • Бизнес
  • Свое дело
  • Решение проблем
  • Интернет
  • Новости
  • Новости
    Реклама
    Реклама

    SEO для одностраничных приложений

    1. Как работает перенаправление ботов?
    2. Реализация с использованием Phantom.js
    3. Перенаправление ботов

    Из этого туториала вы узнаете, как проиндексировать ваше приложение в поисковых системах. Как автор, я считаю, что серверы должны быть полностью независимыми от клиента в эпоху API. Что ускоряет разработку для постоянно растущего числа клиентов. Это зависит от поисковых систем, и они не должны диктовать, как хранить и получать доступ к сети.

    В 2009 году Google выпустил идею сбежавшие фрагменты ,

    Идея состоит в том, чтобы просто заявить, что если поисковая система сталкивается с вашим приложением JavaScript, то у вас есть разрешение перенаправить поисковую систему на другой URL-адрес, который обслуживает полностью визуализированную версию страницы (современные поисковые системы не могут выполнять много JavaScript (некоторые люди предполагают, что что Google Chrome был рожден из Поиска Google, желающего успешно отображать каждую веб-страницу для получения контента с задержкой)).

    Как работает перенаправление ботов?

    Используя современные безголовые браузеры, мы можем легко возвращать полностью визуализированный контент по запросу, перенаправляя ботов с помощью конфигурации наших веб-серверов. Вот изображение, сделанное Google, изображающее установку.

    Реализация с использованием Phantom.js

    Phantom.js безголовый браузер Мы собираемся настроить сервер node.js с указанным URL, он будет полностью отображать содержимое страницы. Затем мы перенаправим ботов на этот сервер, чтобы получить правильный контент.

    Вам нужно будет установить node.js и phantom.js на коробку. Затем запустите этот сервер ниже. Есть два файла, один из которых является веб-сервером, а другой - сценарием phantomjs, который отображает страницу.

    // web.js // Express - это наш веб-сервер, который может обрабатывать запрос var express = require ('express'); var app = express (); var getContent = function (url, callback) {var content = ''; // Здесь мы порождаем процесс phantom.js, первый элемент массива // - это наш скрипт phantomjs, а второй - наш url var phantom = require ('child_process'). Spawn ('phantomjs', ['phantom- server.js ', url]); phantom.stdout.setEncoding ( 'utf8'); // Наш скрипт phantom.js просто регистрирует вывод, и // мы получаем к нему доступ через stdout phantom.stdout.on ('data', function (data) {content + = data.toString ();}); phantom.on ('exit', function (code) {if (code! == 0) {console.log ('У нас есть ошибка');} else {// как только выйдет наш скрипт phantom.js, давайте вызовем call back // который выводит содержимое на страницу обратного вызова (content);}}); }; var response = function (req, res) {// Поскольку мы используем [P] в htaccess, у нас есть доступ к этому заголовку url = 'http: //' + req.headers ['x-forwarded-host'] + req. PARAMS [0]; getContent (url, function (content) {res.send (content);}); } app.get (/(.*)/, ответить); app.listen (3000);

    Ниже приведен скрипт phantom-server.js, который будет отвечать за полную визуализацию контента. Мы не возвращаем содержимое до тех пор, пока страница не будет полностью отображена. Мы подключаемся к слушателю ресурсов, чтобы сделать это.

    var page = require ('webpage'). create (); var system = require ('system'); var lastReceived = new Date (). getTime (); var requestCount = 0; var responseCount = 0; var requestIds = []; var startTime = new Date (). getTime (); page.onResourceReceived = function (response) {if (requestIds.indexOf (response.id)! == -1) {lastReceived = new Date (). getTime (); responseCount ++; requestIds [requestIds.indexOf (response.id)] = null; }}; page.onResourceRequested = function (request) {if (requestIds.indexOf (request.id) === -1) {requestIds.push (request.id); requestCount ++; }}; // Открываем страницу page.open (system.args [1], function () {}); var checkComplete = function () {// Мы не разрешаем, чтобы это занимало более 5 секунд, но // не возвращаем, пока все запросы не будут завершены, если ((new Date (). getTime () - lastReceived> 300 && requestCount === responseCount) || new Date (). getTime () - startTime> 5000) {clearInterval (checkCompleteInterval); console.log (page.content); phantom.exit (); }} // Давайте проверим, завершена ли рендеринг страницы var checkCompleteInterval = setInterval (checkComplete, 1);

    Как только мы запустим этот сервер, мы просто перенаправим ботов на сервер в конфигурации веб-сервера нашего клиента.

    Перенаправление ботов

    Если вы используете apache, мы можем отредактировать .htaccess так, чтобы запросы Google передавались на наш сервер промежуточного уровня phantom.js.

    RewriteEngine в RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = (. *) $ RewriteRule (. *) Http: // webserver: 3000 /% 1? [П]

    Мы могли бы также включить другой RewriteCond, например, пользовательский агент для перенаправления других поисковых систем, на которые мы хотим быть проиндексированы.

    Хотя Google не будет использовать _escaped_fragment_, пока мы не сообщим об этом, либо добавив метатег; <meta name = "фрагмент" content = "!"> или используя #! URL в наших ссылках.

    Скорее всего, вам придется использовать оба.

    Томас Дэвис

    Я работаю с несколькими проектами с открытым исходным кодом, а также работаю в индустрии дронов

    https://ajaxdavis.com/

    Как работает перенаправление ботов?
    Как работает перенаправление ботов?
    RewriteEngine в RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = (. *) $ RewriteRule (. *) Http: // webserver: 3000 /% 1?
    Профиль
    Реклама
    Деловой календарь
    Пн Вт Ср Чт Пт Сб Вс
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    Реклама
       
    Sti.lg.ua © 2016