Используя node.js для обслуживания контента из приложения Backbone.js для поиска поисковых роботов для SEO

Либо мой google-fu подвел меня, либо действительно не так много людей делают это. Как вы знаете, Backbone.js имеет ахиллесную пяту - он не может обслуживать html, который он отображает для сканеров страниц, таких как googlebot, потому что они не запускают JavaScript (хотя, учитывая, что его Google с их ресурсами, движком V8 и отрезвляющим фактом, который Приложения JavaScript растут, я ожидаю, что это когда-нибудь произойдет). Я знаю, что у Google есть политика обхода hashbang, но это просто плохая идея. Кроме того, я использую PushState. Это очень важный вопрос для меня, и я ожидаю, что это будет и для других. SEO - это то, что нельзя игнорировать и, следовательно, нельзя рассматривать для многих приложений, которые требуют от него .

Введите node.js. Я только начинаю входить в это увлечение, но похоже, что у того же самого приложения Backbone.js, которое существует на клиенте, есть на сервере, держащем руки за node.js. node.js затем сможет обслуживать html, отображаемый из приложения Backbone.js, для сканеров страниц. Это кажется выполнимым, но я ищу кого-то, кто более опытен с node.js или даже лучше, кто-то, кто действительно это сделал, чтобы посоветовать мне на этом.

Какие шаги я должен предпринять, чтобы позволить мне использовать node.js для обслуживания моего приложения Backbone.js для веб-сканеров? Кроме того, мое приложение Backbone использует API, написанный в Rails, который, как я думаю, сделает это меньше головной боли.

EDIT: я не упомянул, что у меня уже есть производственное приложение, написанное в Backbone.js. Я хочу применить эту технику к этому приложению.

Ответ 1

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

Спустив это, отпустите. Если вы намереваетесь запустить клиентское приложение на сервере, вам нужно будет заново создать среду браузера на вашем сервере:

Скорее всего, вам не хватает DOM (Document Object Model) - в основном AST поверх вашего проанализированного HTML-документа. Решение node.js для этого jsdom.
Этого не будет достаточно. Ваш браузер также предоставляет спецификацию (модель объекта браузера) - доступ к функциям браузера, например, history.pushState. Вот где это становится сложно. Есть два варианта: вы можете попытаться сгибать phantomjs или casperjs, чтобы запустить приложение, а затем очистить HTML от него. Он хрупкий, так как вы используете огромный браузер WebKit с отключенными частями пользовательского интерфейса.
Другой вариант Zombie - это легкая повторная реализация функций браузера в Javascript. Согласно странице он поддерживает pushState, но мой опыт в том, что эмуляция браузера далека от завершения, но попробуйте и посмотрите, как далеко вы получите.

Ответ 2

Я собираюсь оставить его вам, чтобы решить, является ли толкание вашего механизма рендеринга на стороне сервера правильным решением.

Поскольку Nodejs построен на V8 (движок Chrome), он будет запускать javascript, например Backbone.js. Создание ваших моделей и т.д. Было бы сделано точно так же.

В среде Nodejs, конечно, отсутствует DOM. Итак, это та часть, которую вам нужно воссоздать. Я считаю, что самый популярный модуль:

https://github.com/tmpvar/jsdom

Как только у вас есть доступный DOM api в Nodejs, вы просто создаете его узлы, как и для обычного клиента браузера (возможно, используя jQuery) и отвечаете на запросы сервера с визуализированным HTML (через $( "myDOM" ). html ( ) или аналогичные).

Ответ 3

Я считаю, что вы можете использовать подход типа резервной стратегии. Подумайте, что произойдет с выключением javascript и ссылкой, нажатой vs js on. Все, что вы делаете на своей странице, которая может быть сканирована, должна иметь некоторую разумную процедуру резервного копирования при отключении JavaScript. Ваши ссылки должны всегда иметь ссылку на сервер как href, а действие по умолчанию должно быть предотвращено с помощью javascript.

Я бы не сказал, что это обязательная ответственность. Я имею в виду, что единственное, что может вам помочь, это изменение URL-адреса при изменении страницы и для ваших моделей/коллекций как на стороне клиента, так и на стороне сервера. Представления и маршрутизаторы, которые, как я полагаю, будут строго на стороне клиента.

Что вы можете сделать, это сделать ваши нефритовые страницы и частичные рендеринги со стороны клиента или сервера с или без содержимого. Таким образом, одна и та же страница может отображаться в любом случае. То есть, если вы замените большой кусок вашей страницы и измените URL-адрес, то html, который вы захватываете, может быть из того же шаблона, как если бы кто-то прямо перешел на эту страницу.

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

Я думаю, вы сможете добиться этого, просто переставив вещи в свое приложение. Никакой реальной переписывания просто хорошее движение вещей вокруг. Возможно, вам понадобится написать контроллер, который будет обслуживать ваши html файлы с содержимым, инъецированным или не введенным. Это будет служить для вашего базового приложения html, которое необходимо для соединения с данными из моделей. Как я уже сказал, те же шаблоны могут использоваться, когда вы напрямую нажимаете эти ссылки через маршрутизаторы, определенные в выражении/ node.js

Ответ 4

Это список моих дел, связанных с нашим приложением: Node.js анализировать маршруты магистрали (хранящиеся в памяти при запуске приложения) и, по крайней мере, служить шаблону основных страниц на прямой HTML- что-то большее, вероятно, будет слишком большим накладным/обработкой для BE, если вы считаете, что тысячи пользователей поражают ваш сайт.

Я считаю, что серверные приложения, такие как AirBnB, делают это так же, но только для роботов, таких как Google Crawler. Вам также нужна эта ситуация для таких вещей, как Facebook, так как Facebook отправляет искателя, чтобы читать ваши og: теги.

Ответ 5

Рабочее решение - использовать Магистраль везде https://github.com/Morriz/backbone-everywhere, но это заставляет вас использовать Node в качестве вашего бэкэнд.

Другой вариант - использовать те же шаблоны на сервере и в интерфейсе. Front-end загружает шаблоны Mustache с использованием текстового плагина require.js, а сервер также отображает страницу с использованием тех же шаблонов Mustache.

Другим дополнением является также предоставление загруженных данных модуля в тег javascript как данные JSON, которые будут немедленно использоваться Backbone для заполнения моделей и коллекций.

Ответ 6

В основном вам нужно решить, что именно вы обслуживаете: действительно ли это приложение (то есть то, что может стоять в качестве замены для выделенного приложения для настольных систем) или представляет собой презентацию контента (например, веб-страница ")? Если вы обеспокоены SEO, вероятно, что это фактически последний (" контент-сайт "), и в этом случае модель" одностраничное приложение "не подходит; вы действительно хотите, чтобы вместо этого использовалась модель с прогрессивным улучшением сайта (посмотрите на такие фразы, как" ненавязчивый JavaScript "," прогрессивное улучшение "и" адаптивный веб-дизайн").

Чтобы немного усилить, "сервер отправляет только сериализованные данные, а клиент делает весь рендеринг" подходит только в сценарии "истинного приложения". Для сценария "контент-сайт" подходящей моделью является "сервер делает основной рендеринг, клиент делает его лучше, и делает небольшую рендеринг, чтобы избежать перебоев переходов страницы, когда это возможно".

И, кстати, возражение, что прогрессивное улучшение означает "убедиться, что пользователь может видеть, не получает ничего лучшего, чем слепой пользователь, который использует текст в речь", является выражением политического возмущения, а не реальности, Постепенно улучшенные сайты могут быть столь же фантастическими, как вы хотите, чтобы они были с точки зрения пользователя с высококачественной системой рендеринга.