Делаем SEO в Meteor приложение с помощью Prerender

Делаем SEO в Meteor приложение с помощью Prerender

Любой сайт, содержащий контент, должен индексироваться, однако если дело касается одностраничных приложений с рендерингом на стороне клиента, то, как правило, поисковые системы плохо индексируют такие сайты. Даже не смотря на то, что Google официально сообщили, что их поисковик умеет правильно отрабатывать JavaScript, по опыту могу сказать, что это далеко не так. Сегодня я покажу один из множества вариантов добавления SEO в приложения на Meteor c помощью сервиса Prerender.

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

Настраиваем Prerender для Meteor

Итак, приступим. Для начала Вам необходимо зарегистрироваться в сервисе Prerender.io и получить token.

Далее устанавливаем пакет с помощью команды:

meteor add dferber:prerender

Также вы можете использовать NPM пакет prerender-node, однако на официальном сайте Meteor рекомендуют использовать именно Atmosphere версию.

Помните я упоминал специальный тег, по которому ПС (поисковая система) определяет, что необходимо загружать html-версию страницы? Настало время добавить его в ваше приложение:

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

Принцип его работы примерно следующий: поисковый бот переходит на ваш сайт, видит данный мета тег и понимает, что это JavaScript сайт, а его html-версия доступна по адресу site.ru/?_escaped_fragment_=. Далее бот проходит по этому адресу и индексирует страницу как простую html страницу.

Остался последний шаг: добавить следующий код в settings.json

{
  "PrerenderIO": {
    "serviceUrl": "http://localhost:3033/",
    "token": "yourtoken"
  }
}

Ну вот, все готово. Теперь Ваш сайт будет отлично индексироваться всеми известными и не очень поисковыми системами. Кстати, отдельно стоит упомянуть о цене. Prerender можно использовать бесплатно сайтам до 200 страниц. Для начала, я думаю, этого хватит.

Вполне вероятно вы захотите настроить теги title, description и так далее для разных страниц сайта. С этим Вам поможет покет под названием kadira:dochead. Данный пакет можно использовать как с React JS, так и с Blaze. Имеется версия для Server Side Rendering.