Какой наименее избыточный способ сделать сайт с помощью JavaScript-сгенерированного JavaScript?

После прочтения политики Google для создания сканируемого содержимого Ajax, а также множество сообщений блога разработчиков и Stackoverflow Q &, Я остаюсь с заключением, что нет возможности создать сайт только с использованием JavaScript/Ajax-сгенерированного HTML-кода. Сайт, на котором я сейчас работаю, не получает значительную часть своего контента, проиндексированного. Весь слой презентации для нашего неиндексированного контента построен в JavaScript, генерируя HTML из JSON, возвращенный из вызовов веб-службы на основе Ajax, и мы полагаем, что Google не индексирует контент из-за этого. Это правильно?

Единственным решением, похоже, является также "отпавшая" версия сайта для поисковых систем (в частности, Google), где все HTML и контент будут генерироваться, как это традиционно было, на стороне сервера. Для клиентов с включенным JavaScript кажется, что мы можем использовать по существу тот же подход, что и сейчас: с помощью JavaScript для генерации HTML из асинхронно загруженного JSON.

Считая, что моя лучшая практика применения принципа mustache.js, преобразует данные JSON, отправленные с сервера в HTML, как определено по его копии файла шаблона. А для искателей поиска и клиентов с отключенным JavaScript реализация на стороне сервера одного и того же механизма шаблонов, например mustache.java, будет аналогичным образом работать на его копию того же точного файла шаблона для вывода HTML.

Если это решение является правильным, то как это отличается от подходов, используемых 4 или 5 года назад на тяжелых тяжелых сайтах, где сайты по существу должны были поддерживать две копии кода шаблонов, одну копию для пользователей с включенным JavaScript ( почти все) и другую копию (например, в FreeMarker или Velocity) для поисковых систем и браузеров без включенного JavaScript (почти нет)? Похоже, что должен быть лучший способ.

Означает ли это, что необходимо поддерживать два шаблонных слоя модели: один на стороне клиента и один на стороне сервера? Насколько целесообразно объединить эти клиентские шаблоны с интерфейсом MVC (MV/MVVC), например Backbone.js, Ember.js или Библиотека приложений YUI? Как эти решения влияют на затраты на обслуживание? Было бы лучше попытаться сделать это, не введя больше фреймворков - новый механизм шаблонов и интерфейсный интерфейс MVC - в стек технологии разработчиков? Есть ли способ сделать это менее избыточно?

Если это решение неверно, то есть что-то, чего нам не хватает, и с нашим JavaScript может быть лучше, чтобы сохранить существующую асинхронную структуру HTML-from-JSON и проиндексировать ее, поэтому нам не нужно вводить что-то новый для стека архитектуры? Нам действительно не нужно было бы обновлять две версии уровня презентации, когда бизнес нуждается в изменении.

Ответ 1

Почему я не подумал об этом раньше! Просто используйте http://phantomjs.org. Это безгласный веб-браузер. Вы просто создали набор действий для обхода пользовательского интерфейса и захвата html в каждом состоянии, которое вам нужно. Phantom может превратить захваченный html в .html файлы для вас и сохранить их на вашем веб-сервере.

Все будет автоматизировано каждый сборщик/фиксация (PhantomJS управляется командной строкой). Код JS, который вы пишете для обхода пользовательского интерфейса, сломается при изменении пользовательского интерфейса, но это не должно быть хуже, чем автоматическое тестирование пользовательского интерфейса, и это просто Javascript, чтобы вы могли использовать селектора jQuery, чтобы захватить кнопки и щелкнуть их.

Если бы мне пришлось решить проблему SEO, это, безусловно, первый подход, который я бы прототип. Сканируй и спаси, детка. Yessir.

Ответ 2

Я думаю, что комбинация нескольких технологий и одного ручного кодированного взлома, который вы могли бы повторно использовать, исправит вас правильно. Вот моя сумасшедшая, наполовину испеченная идея. Это теоретический и, вероятно, не полный. Шаг 1:

Используйте шаблоны на стороне клиента, как вы предлагаете. Поместите каждый шаблон в отдельный файл (чтобы вы могли легко использовать его между клиентом и сервером).
Используйте шаблоны underscore.js или перенастройте Усы. Таким образом, вы получите разделители стиля ERB в своем шаблоне, идентичные Java <% =% > stuff.
Поскольку они представляют собой отдельные файлы, вы захотите начать разработку в модулях CommonJS с помощью модуля loader, такого как curl.js или require.js, для загрузки шаблонов в код вашей клиентской части. Если вы не занимаетесь модульной разработкой, это довольно потрясающе. Я начал ~ месяц назад. Кажется, сначала, но это совсем другой способ обернуть ваш код: http://addyosmani.com/writing-modular-js/

Итак, теперь у вас есть изолированные шаблоны. Теперь нам просто нужно выяснить, как построить плоскую страницу из них на сервере. Я вижу только два подхода. Шаг 2:

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

Надеюсь, это поможет. Любопытно услышать лучший ответ на этот вопрос. Интересная проблема.

Ответ 3

Используйте Distal шаблоны. Ваш веб-сайт является статическим HTML, который сканируется и Distal обрабатывает статический HTML как шаблон.

Ответ 4

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

Если это не вариант или вы просто не хотите иметь с этим дело. У нас есть бесплатный сервис, который делает это. См. Это сообщение для получения дополнительной информации: http://rogeralsing.com/2013/08/06/seo-indexing-angularjs-sites-or-other-ajax-sites-with-wombit-crawlr/

Ответ 5

Я нашел решение, которое не требует Java, Node.js или любого другого способа сделать избыточную копию веб-сайта генерации кода JS. Также он поддерживает все браузеры.

Итак, вам нужно сделать снимок для Google. Это лучшее решение, потому что вам не нужно возиться с другими URL-адресами и так далее. Также: вы не добавляете noscript на свой основной сайт, чтобы он был легче.

Как сделать снимок? Phantomjs, HTMLUnit и т.д. Требуют сервер, на котором вы можете его поместить и позвонить. Вам нужно настроить его и объединить с u-сайтом. И это беспорядок. К сожалению, нет браузера без браузера PHP. Это очевидно из-за особенностей PHP.

Итак, каков другой способ получения моментального снимка? Ну... если пользователь открывает сайт, вы можете получить снимок того, что он видит с помощью JS (innerHTML).

Итак, что вам нужно сделать:

проверьте, нужен ли вам снимок для вашего сайта (если он у вас есть, вам не нужно брать другое)
вы отправляете этот снимок на сервер для сохранения в файл (PHP обрабатывает запрос POST с моментальным снимком и сохраняет файл)

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

Что нужно решить:

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

Также есть одно: не все страницы будут посещаться пользователями, но вам нужны снимки для Google, прежде чем они посещают.

Так что делать? Для этого есть решение:

создать карту сайта, на которой есть все страницы, которые у вас есть на веб-сайте (она должна быть обновлена на лету, чтобы быть актуальной, а soft-сканер не помогает, поскольку он не выполняет JS)
посещать любые страницы из карты сайта, которая не имеет моментального снимка. Это вызовет код моментального снимка и сгенерирует его правильно.
регулярно посещать (ежедневно?)

Но эй, как посетить все эти страницы? Что ж. Для этого есть несколько решений:

напишите приложение на Java, С# или на другом языке, чтобы получать страницы с сервера и посещать его со встроенным в браузере. Добавьте это в свое расписание на сервере.
напишите JS script, который открывает требуемые страницы в iFRAME один за другим. Добавьте это в свое расписание на компьютере.
просто откройте script, упомянутый выше, если ваш сайт в основном статичен.

Также не забудьте обновить старые снимки, чтобы обновить их.

Я надеюсь услышать от вас, что вы думаете об этом решении.