Система для обработки хеш-тегов для содержимого вкладок?(#!) - PullRequest
Новая
       4

Система для обработки хеш-тегов для содержимого вкладок?(#!)

5 голосов
/ 19 октября 2010

У меня есть четыре страницы в основной части веб-сайта, над которым я работаю, с вкладками для переключения между ними.Я хочу, чтобы переключение между 4 вкладками было постепенным переходом (используя jQuery).Это все прекрасно, но я также хочу, чтобы SEO воспринимал каждую страницу как отдельную.Я также хочу иметь возможность ссылаться на URL-адрес и получать для него нужный контент, хотя технически это та же страница.

Facebook делает это (facebook.com/#!/another-string- здесь), и вы можете переключаться между изображениями и т. д., таким образом, он действует как строка запроса javascript.

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

Есть ли рекомендуемый метод, как это сделать?

ОБНОВЛЕНИЕ Лучшее, что я нашел, - это SammyJS - не реализовано, но, похоже, это лучший ответ: http://sammyjs.org/

Ответы [ 2 ]

1 голос
/ 19 октября 2010

Допустим, у вас есть базовая страница с именем services, и на этой странице есть две вкладки: design и development (просто для упрощения). Поэтому, если ваш домен был example.com, ваш хэш-URL при нажатии на вкладку «Дизайн» выглядел бы примерно как http://example.com/services#!/design и похож на разработку. Я полагаю, вы знаете, как это сделать.

Чтобы поисковые системы распознавали вкладки, делает статическую версию каждой страницы . Так что у вас будет один на http://example.com/services/design и один на http://example.com/services/development. Атрибут href каждой вкладки фактически указывает на эти статические страницы, но вы должны прикрепить обработчик onclick к каждой вкладке, чтобы он перешел на хеш-версию.

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

Кстати, это похоже на то, что делает Facebook. Они идут на шаг дальше и используют новую функцию HTML5 history.pushState() в браузерах, которые ее поддерживают, чтобы полностью убрать необходимость в хэш-теге. (См. этот вопрос для получения дополнительной информации.)

0 голосов
/ 19 октября 2010

Что ж, сделать это обоими способами невозможно (метод facebook и SEO), потому что сервер не получает хеш-тег, а большинство поисковых систем (google и т. Д.) Не запускают javascript.

Теперь, если вам просто нужен эффект затухания, вы можете настроить его так, чтобы, если в URL был хеш-тег, например #fade, jquery установил непрозрачность на 0, дождитесь загрузки и исчезновения. Чтобы получитьпри постепенном исчезновении вы устанавливаете прослушиватели событий на ссылки, e.preventDefault() или return false в этой функции и затемняете прозрачность.После того, как это сделано, исчезновение, у вас было бы изменение javascript на новую страницу location.href="site" с хешем #fade

Редактировать: пример: http://fiddle.jshell.net/msm595/u5Eg2/3/show/light/

...