PushState и SEO
Многие говорили, используйте pushState, а не hashbang.
Что я не понимаю, как бы вы были дружественными поисковыми машинами без использования hashbang?
Предположительно, ваш контент pushState генерируется клиентским кодом JavaScript.
Таким образом, сценарий выглядит следующим образом:
Я нахожусь на example.com
. Мой пользователь нажимает ссылку: href="example.com/blog"
pushState захватывает клик, обновляет URL-адрес, захватывает JSON файл откуда-то и создает список сообщений в блоге в области содержимого.
С помощью hashbangs google знает, как перейти на URL-адрес escaped_fragment, чтобы получить статический контент.
С помощью pushState Google просто ничего не видит, поскольку он не может использовать код JavaScript для загрузки JSON и последующего создания шаблона.
Единственный способ сделать это я вижу - это визуализировать шаблон на стороне сервера, но это полностью отрицает преимущества нажатия на уровень приложения для клиента.
Как я правильно понимаю, pushState не является дружественным к SEO для клиентских приложений вообще?
Ответы
Ответ 1
Как насчет использования мета-тега, который Google предлагает тем, кто не хочет использовать хэш-банг в своих URL-адресах: <meta name="fragment" content="!">
Смотрите здесь для получения дополнительной информации: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
К сожалению, я не думаю, что Николь прояснила проблему, которая, по моему мнению, была у ОП. Проблема в том, что мы просто не знаем, кому мы предоставляем контент, если не используем хэш-бэнг. Pushstate не решает это для нас. Мы не хотим, чтобы поисковые системы указывали конечным пользователям переходить по какому-то URL, который выделяет неформатированный JSON. Вместо этого мы создаем URL-адреса (которые инициируют другие вызовы для большего количества URL-адресов), которые извлекают данные через AJAX и представляют их пользователю удобным для нас способом. Если пользователь не человек, в качестве альтернативы мы можем предоставить html-снимок, чтобы поисковые системы могли правильно направлять пользователей-людей по URL-адресу, по которому они ожидали бы найти запрошенные данные (и презентабельно). Но главная проблема заключается в том, как определить тип пользователя? Да, мы можем использовать .htaccess или что-то еще, чтобы переписать URL для поисковых роботов, которые мы обнаруживаем, но я не уверен, насколько это безопасно и надежно для будущего. Также возможно, что Google может наказать людей за такие действия, но я не исследовал их полностью. Таким образом, комбинация (pushstate + google meta tag) кажется вероятным решением.
Ответ 2
Является ли pushState
плохим, если вам нужны поисковые системы для чтения вашего контента?
Нет, разговор о pushState
ориентирован на выполнение одного и того же общего процесса с hashbangs, но с более привлекательными URL-адресами. Подумайте о том, что на самом деле происходит, когда вы используете hashbangs...
Вы говорите:
С помощью hashbangs Google знает, чтобы перейти к экрану escaped_fragment, чтобы получить статический контент.
Итак, другими словами,
Как вы можете видеть, он уже полагается на сервер. Если вы не используете моментальный снимок содержимого с сервера, то ваш сайт не будет индексироваться должным образом.
Итак, как Google увидит что-нибудь с pushState?
С помощью pushState Google просто ничего не видит, поскольку он не может использовать javascript для загрузки json и последующего создания шаблона.
Фактически, Google увидит, что он может запросить в site.com/blog
. URL-адрес по-прежнему указывает на ресурс на сервере, и клиенты по-прежнему подчиняются этому контракту. Конечно, для современных клиентов Javascript открыл новые возможности для поиска и взаимодействия с контентом без обновления страницы, но контракты одинаковы.
Таким образом, предполагаемая элегантность pushState
заключается в том, что он служит одному и тому же контенту для всех пользователей, старых и новых, JS-совместимых и нет, но для новых пользователей получить расширенный опыт.
Как вы получаете Google для просмотра своего контента?
-
Подход Facebook — обслуживать один и тот же контент по URL site.com/blog
, который преобразуется в ваше клиентское приложение, когда вы нажимаете /blog
на состояние. (Facebook не использует pushState
, но я знаю, но они делают это с помощью hashbangs)
-
Подход Twitter — перенаправить все входящие URL-адреса на эквивалент hashbang. Другими словами, ссылка на "/blog" подталкивает /blog
к состоянию. Но если он запрашивается напрямую, браузер заканчивается на #!/blog
. (Для Googlebot это затем переместится в _escaped_fragment_
, как вы хотите. Для других клиентов вы можете pushState
вернуться к симпатичному URL-адресу).
Итак, вы теряете возможность _escaped_fragment_
с помощью pushState
?
В нескольких разных комментариях вы сказали
экранированный фрагмент совершенно другой. Вы можете обслуживать чистый unthemed контент, кешированный контент и не подставляться под нагрузкой, что обычные страницы.
Идеальное решение для Google, чтобы либо делать сайты JavaScript, либо реализовать какой-то способ узнать, что существует URL экранированного фрагмента даже для сайтов pushstate (robots.txt?).
Выгоды, о которых вы упомянули, не изолированы от _escaped_fragment_
. То, что он выполняет переписывание для вас и использует специально названный параметр GET
, действительно представляет собой деталь реализации. В этом нет ничего особенного, что вы не могли бы сделать со стандартными URL-адресами — другими словами, перепишите /blog
в /?content=/blog
самостоятельно, используя mod_rewrite или ваш эквивалент сервера.
Что делать, если вы вообще не используете серверный контент?
Если вы не можете переписывать URL-адреса и обслуживать какой-то контент в /blog
(или в каком-либо состоянии, которое вы вставляете в браузер), то ваш сервер больше не будет соблюдать HTTP-контракт.
Это важно, потому что перезагрузка страницы (по какой-либо причине) приведет к загрузке контента по этому URL-адресу. (см. https://wiki.mozilla.org/Firefox_3.6/PushState_Security_Review — "view-source и reload будут извлекать контент в новом URI, если он был нажат." )
Не то, чтобы рисовать пользовательские интерфейсы один раз на стороне клиента и загружать контент через JS API - плохая цель, просто потому, что на самом деле он не учитывается с HTTP и URL-адресами и в основном не поддерживает обратную совместимость.
На данный момент это то, что хэш-банды предназначены для — для представления отдельных состояний страниц, которые перемещаются на клиенте, а не на сервере. Например, перезагрузка загружает тот же ресурс, который затем может читать, анализировать и обрабатывать хешированное значение.
Просто случается так, что они также использовались (в частности, Facebook и Twitter), чтобы изменить историю на серверную сторону без обновления страницы. Именно в тех случаях, когда люди рекомендуют отказаться от hashbangs для pushState.
Если вы рекламируете все содержимое на стороне клиента, вы должны думать о pushState
как о более удобном API истории, а не о том, как использовать хеш-бэнг.
Ответ 3
Все интересные разговоры о pushState и #!
, и я до сих пор не вижу, как pushState заменяет #!, как спрашивает оригинальный плакат.
Наше решение сделать наш сайт/приложение Ajax на базе JavaScript на основе 99% основано на #!
, конечно. Поскольку рендеринг клиента выполняется через HTML, JavaScript и PHP, мы используем следующую логику в загрузчике, контролируемом приложением нашей страницы. HTML файлы полностью отделены от JavaScript и PHP, потому что мы хотим, чтобы один и тот же HTML в обоих (для большей части). JavaScript и PHP делают в основном одно и то же, но PHP-код менее сложный, так как JavaScript гораздо более насыщенный пользовательский интерфейс.
JavaScript использует jQuery для встраивания в HTML контента, который он хочет. PHP использует PHPQuery для ввода в HTML содержимого, которое он хочет, используя "почти" одну и ту же логику, но гораздо проще, поскольку версия PHP будет использоваться только для отображения версии с поддержкой SEOable и не должна взаимодействовать с ней как с версией JavaScript.
Все три компонента, составляющие страницу, page.htm, page.js и page.php существуют для всего, что использует экранированный фрагмент, чтобы узнать, следует ли загружать версию PHP вместо версии JavaScript. Версия PHP не обязательно должна существовать для не-SEO-контента (например, страниц, которые можно увидеть только после входа в систему). Все просто.
Я все еще озадачен тем, как некоторые разработчики интерфейсов уходят от разработки отличных сайтов (с богатством Документов Google) без использования серверных технологий в сочетании с браузерами... Если JavaScript даже не включен, то наш 99 % JavaScript-решение, конечно же, ничего не сделает без PHP.
Возможно, у вас есть хороший URL-адрес, чтобы приземлиться на странице, обслуживаемой PHP, и перенаправить на версию JavaScript, если JavaScript включен, но это не очень приятно с точки зрения пользователя, поскольку пользователи являются более важной аудиторией.
На боковой ноте. Если вы создаете простой веб-сайт, который может функционировать без какого-либо JavaScript, то я могу видеть, что pushState полезен, если вы хотите постепенно улучшать пользовательский интерфейс от простого статически отображаемого контента во что-то лучше, но если вы хотите дать своему пользователю лучший опыт работы... давайте скажем, что ваша последняя игра, написанная на JavaScript или что-то вроде Google Docs, затем она используется для этого решения, является несколько ограничивающей, поскольку изящное откат может зайти так далеко, пока пользовательский опыт не будет болезненным по сравнению с видением сайта.