pushState и SEO - PullRequest
       59

pushState и SEO

77 голосов
/ 01 июня 2011

Многие говорили, что нужно использовать 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 для клиентских приложений?

Ответы [ 3 ]

97 голосов
/ 01 июня 2011

Плохо ли pushState, если вам нужны поисковые системы для чтения вашего контента?

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

Вы говорите:

С помощью hashbangs Google знает, что нужно перейти по URL-адресу escaped_fragment, чтобы получить их статическое содержимое.

То есть, другими словами,

  1. Google видит ссылку на example.com/#!/blog
  2. Google-запросы example.com/?_escaped_fragment_=/blog
  3. Вы возвращаете снимок содержимого, которое должен видеть пользователь

Как видите, он уже зависит от сервера. Если вы не передаете моментальный снимок контента с сервера, значит, ваш сайт не индексируется должным образом.

Так как же Google увидит что-то с pushState?

С помощью pushState Google просто ничего не видит, поскольку не может использовать javascript для загрузки json и последующего создания шаблона.

На самом деле, Google увидит все, что может запросить, на site.com/blog. URL-адрес по-прежнему указывает на ресурс на сервере, и клиенты по-прежнему подчиняются этому контракту. Конечно, для современных клиентов Javascript открыл новые возможности для поиска и взаимодействия с контентом без обновления page , но контракты те же.

Таким образом, предполагаемая элегантность pushState заключается в том, что он предоставляет одинаковый контент всем пользователям, старым и новым, с поддержкой JS и нет, но новые пользователи получают расширенные возможности .

Как вы можете заставить Google видеть ваш контент?

  1. Подход Facebook & mdash; показывать тот же контент по URL site.com/blog, в который ваше клиентское приложение преобразуется, когда вы нажимаете /blog в состояние (Facebook пока не использует pushState, о котором я знаю, но они делают это с помощью hashbangs)

  2. подход Твиттера & mdash; перенаправить все входящие URL-адреса в эквивалент hashbang. Другими словами, ссылка на "/ blog" помещает /blog в состояние. Но если он запрашивается напрямую, браузер заканчивается на #!/blog. (Для робота Googlebot это затем приведет к _escaped_fragment_, как вы хотите. Для других клиентов вы можете pushState вернуться к красивому URL).

Так вы теряете способность _escaped_fragment_ с pushState?

В нескольких разных комментариях вы сказали

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

Идеальным решением для Google является либо создание сайтов JavaScript, либо реализация какого-либо способа узнать, что существует URL-адрес фрагмента с отступом даже для сайтов pushstate (robots.txt?).

Упомянутые вами преимущества не относятся к _escaped_fragment_. То, что он выполняет переписывание для вас и использует специально названный параметр GET, действительно является деталью реализации. В этом нет ничего особенного, чего нельзя было бы сделать со стандартными URL-адресами & mdash; другими словами, переписать /blog в /?content=/blog самостоятельно, используя mod_rewrite или эквивалент вашего сервера.

Что если вы вообще не обслуживаете серверный контент?

Если вы не можете переписать URL-адреса и обслуживать какой-либо контент в /blog (или в любом другом состоянии, которое вы вставили в браузер), то ваш сервер больше не соблюдает HTTP-контракт.

Это важно, потому что при перезагрузке страницы (по любой причине) содержимое будет извлечено по этому URL. (См. https://wiki.mozilla.org/Firefox_3.6/PushState_Security_Review & mdash; "view-source и reload будут извлекать содержимое по новому URI, если он был выдвинут.")

Дело не в том, что рисование пользовательских интерфейсов один раз на стороне клиента и загрузка контента через API-интерфейсы JS - плохая цель, просто в том, что на самом деле это не учитывается с помощью HTTP и URL-адресов, и, по сути, оно обратно несовместимо.

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

Просто так получилось, что они также использовали (особенно через Facebook и Twitter), чтобы изменить историю на местоположение на стороне сервера без обновления страницы. Именно в этих случаях пользователи рекомендуют отказаться от хеш-бангов для pushState.

Если вы визуализируете весь контент на стороне клиента, вы должны думать о pushState как о более удобной историиAPI, а не выход из использования hashbangs.

16 голосов
/ 06 сентября 2012

Как насчет использования метатега, который 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) кажется вероятным решением.

0 голосов
/ 31 мая 2016

Все интересные разговоры о pushState и #!, и я до сих пор не вижу, как pushState заменяет цель #!, Как просит оригинальный автор.

Наше решение сделать SEO-сайт / приложение Ajax на 99% основанным на JavaScript, конечно, использует #!. Так как рендеринг клиента осуществляется через HTML, JavaScript и PHP, мы используем следующую логику в загрузчике, управляемом нашей посадкой страницы. HTML-файлы полностью отделены от JavaScript и PHP, потому что нам нужен один и тот же HTML-код (по большей части). JavaScript и PHP делают в основном одно и то же, но код PHP менее сложен, так как JavaScript намного удобнее для пользователя.

JavaScript использует jQuery для внедрения в HTML нужного контента. PHP использует PHPQuery для внедрения в HTML нужного контента - используя «почти» ту же логику, но гораздо проще, поскольку версия PHP будет использоваться только для отображения версии SEOable с ссылками SEOable и не будет взаимодействовать с ней, как версия JavaScript.

Все три компонента, которые составляют страницу, page.htm, page.js и page.php, существуют для всего, что использует экранированный фрагмент, чтобы знать, загружать ли версию PHP вместо версии JavaScript. Версия PHP не должна существовать для не-SEOable контента (например, страниц, которые можно увидеть только после входа пользователя). Все просто.

Я все еще озадачен тем, как некоторые разработчики внешних интерфейсов разрабатывают великолепные сайты (благодаря богатству Документов Google), не используя серверные технологии в сочетании с браузерными ... Если JavaScript даже не включен, то наши 99 Решение% JavaScript, конечно, ничего не сделает без установленного PHP.

Можно иметь хороший URL для размещения на странице, обслуживаемой PHP, и перенаправлять на версию JavaScript, если JavaScript включен, но это нежелательно с точки зрения пользователя, поскольку пользователи являются более важной аудиторией.

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

...