SEO для Meteor приложения

В этой статье я хотел бы рассмотреть вопрос SEO в Meteor приложениях. Как в Meteor реализовать sitemap.xml, robots.txt и прописать мета теги на каждой нужной странице. Статья не претендует на 100% правильный или лучший способ, просто хочу рассказать как это сделал я. Поэтому принимаются любые замечания.

Начать думаю с небольшого предисловия о индексации динамических(AJAX) сайтов Google ботом. Итак, как же google индексирует ajax сайты?

4cHYcVvd23

 

Смотрим на картинку выше. Сначала поисковики переходят по адресу сайта, в ответ получают небольшой кусок html кода. Если в этом кусочке HTML присутствует тег <meta name=»fragment» content=»!»>, то боты понимают что контент сайта генерируется динамически. После этого поисковые роботы запрашивают статическую html версию страницы, добавляя к url специальный флаг «?_escaped_fragment_=«. По этому адресу нужно подсунуть ботам сгенерированную на сервере html страничку.

Многое в этом посте позаимствовано из статьи Meteor Server-Side Rendering for SEO Purposes. Там же есть пример приложения, которое хостится по адресу http://seo-without-spiderable.meteor.com/ , и с ним можно поиграться. Оно наглядно демонстрирует описанное выше. Просто перейдите по ссылке и посмотрите на код страницы, там практически ничего нет. А потом добавьте к адресу «?_escaped_fragment_=»,  то есть ссылка должна выглядеть следующим образом http://seo-without-spiderable.meteor.com/?_escaped_fragment_=, и опять посмотрите на код страницы. Видно что первая и вторая версии отличаются. И главное отличие в том что google и остальные поисковые системы смогут проиндексировать только вторую, так как она содержит статический html.

Итак, для организации рендеринга страниц на сервере я используем следующие пакеты:

  • meteorhacks:ssr – компиляция и рендеринг страниц на сервере
  • meteorhacks:picker – роутинг на серверной стороне

Ставим их оба. Дальше будет код. Чтобы понять организацию файлов можно посмотреть тестовое приложение (не моё) тут — https://github.com/arunoda/meteor-seo-without-spiderable .

Создаём в корне проекта папки private и ssr. В первой будут серверные шаблоны, а во второй сосредоточена работа с этими шаблонами и серверный роутинг. Итак, создаём шаблоны в папке private:

Тут думаю всё просто и каждый разберется. Есть основной шаблон layout.html , в него динамически будут подставляться main и post. Каждый со своими тегами title и description.

Далее в папку ssr создаём еще одну папку client и кладём в неё fragment.html следующего содержания:

Этот файл содержит мета тег, благодаря которому google и остальные поисковики будут понимать что перед ними сайт с динамически генерируемым контентом.

В папке ssr создаём ещё одну папку с названием server. В неё кладём:

В коде есть коменты, и всё должно быть понятно.

Как сделать карту сайта(sitemap.xml)

С файлами sitemap.xml и robots.txt в метеоре оказалось всё очень просто.Нужно всего лишь поставить пакет и написать несколько строчек кода. Я использовал модуль gadicohen:sitemaps. Итак, ставим пакет и создаём в папке server(которая в корне приложения) новый файл со следующим содержанием:

После этого в приложении по адресу /sitemap.xml и /robots.txt будут открываться соответствующие страницы. Как вывести дополнительную информацию написано в описании к пакету.

Вот так получилось сделать моё meteor приложение индексируемым. Статья не претендует на супер правильный способ, просто делюсь наработанным опытом.

UPDATE: Данный способ является хорошим решением не во всех случаях, в посте Лучший способ сделать SEO в Meteor приложении я описал наиболее релевантный способ.

Также можно почитать: