LINUX.ORG.RU

SPA и индексация в поисковых системах

 , , ,


0

3

Доброй ночи, уважаемые.

Я разрабатываю сайт, на котором можно будет послушать и скачать музыку определенной направленности. И у меня концептуальный вопрос: допустим, я его сделаю в виде статичной html странички, на которой все-все-все будет выводиться с помощью JavaScript (запросы к API, все такое). Если я правильно понимаю, то такой сайт с поисковиками дружить не будут. Как выход рассматриваю вариант генерировать страницы для поисковика на сервере, но все ссылки, при нажатии их пользователями, перехватывать JavaScript-ом и обращаться к API.

Так вот. Это правильный подход или в 2017 г. что-то поменялось?

Спасибо!



Последнее исправление: ravdinve (всего исправлений: 1)

бери реакт, он может и на сервере

kiotoze ★★★★
()
Ответ на: комментарий от nikolnik

nikolnik

Гугл уже лет пять выполняет жс при индексировании. Так, что все будет работать.

Пару лет назад не мог найти этому подтверждения. Может плохо искал? Можно ссылку?

ravdinve
() автор топика
Ответ на: комментарий от Goury

Goury

А старый добрый HTML тебе что мешает генерить на сервере?

Старый добрый HTML генерировать мне кроме как для поисковика особого смысла нет. У меня плеер музыкальный на сайте планируется и чтобы воспроизведение не прерывалось при переходе по ссылкам, мне проще содержимое JavaScript-ом генерировать. Логично же?

ravdinve
() автор топика
Ответ на: комментарий от ravdinve

Старый добрый HTML генерировать мне кроме как для поисковика особого смысла нет. У меня плеер музыкальный на сайте планируется и чтобы воспроизведение не прерывалось при переходе по ссылкам, мне проще содержимое JavaScript-ом генерировать.

Хоронили bgsound, выпили все смузи.

h578b1bde ★☆
()
Ответ на: комментарий от theNamelessOne

theNamelessOne

Ты собрался SPA на jQuery делать?

Вопрос, возможно, глупый, но на чем его делать, если не на jQuery?

ravdinve
() автор топика
Ответ на: комментарий от bvn13

bvn13

а что ты собрался отдавать на индексацию поисковику?

Каталог музыки.

ravdinve
() автор топика
Ответ на: комментарий от ravdinve

А логично бросить вейпить смузи и генерить нормальный человеческий HTML на сервере.

JS логично использовать только для реализации того функционала, который невозможно реализовать без него.
И ещё логичнее реализовать fallback, на случай отсутствия JS на клиетне.

Слушать и качать музыки можно без JS в любом современном браузере.

Goury ★★★★★
()
Ответ на: комментарий от Goury

JS логично использовать только для реализации того функционала, который невозможно реализовать без него.
И ещё логичнее реализовать fallback, на случай отсутствия JS на клиетне.

Такого сейчас не делает никто кроме застрявших в нулевых бэкэндщиков.

x3al ★★★★★
()
Ответ на: комментарий от x3al

x3al

Такого сейчас не делает никто кроме застрявших в нулевых бэкэндщиков.

Видимо это про меня история, расскажите, как делают?

ravdinve
() автор топика
Ответ на: комментарий от Goury

Goury

Слушать и качать музыки можно без JS в любом современном браузере.

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

ravdinve
() автор топика
Ответ на: комментарий от ravdinve

все-все-все будет выводиться с помощью JavaScript (запросы к API, все такое).

Ну, ок.

Если очень волнуешься по поводу поисковиков и хочешь сервить не настолько пустой html — убедись, что твой стек умеет в isomorphic rendering.

Всё.

x3al ★★★★★
()
Ответ на: комментарий от x3al

x3al

https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-201... не сильно устарело.

Спасибо за ссылку, обязательно прочитаю. Если я правильно понял, вы в разработке Front End-а разбираетесь, подскажите, чем, принципиально React и jQuery отличаются? Спасибо.

ravdinve
() автор топика
Ответ на: комментарий от ravdinve

на чем его делать, если не на jQuery?

https://en.wikipedia.org/wiki/Single-page_application#JavaScript_frameworks

https://hackernoon.com/5-best-javascript-frameworks-in-2017-7a63b3870282

https://github.com/showcases/front-end-javascript-frameworks

больше ссылок богу ссылок на http://lmgtfy.com/?q=spa js framework

Ford_Focus ★★★★★
()
Последнее исправление: Ford_Focus (всего исправлений: 1)
Ответ на: комментарий от ravdinve

хотя вообще вопрос изначально был поставлен не совсем верно - использование какого-нибудь ангуляра или реакта никак не мешает использовать jQuery

Просто при типичном использовании фрэймворка jq уже не требуется, так как нет нужды работать с DOM-деревом напрямую.

А вот строить SPA в 2k17 без использования фрэймворка уже не модно.

Ford_Focus ★★★★★
()
Ответ на: комментарий от Ford_Focus

Ford_Focus

А вот строить SPA в 2k17 без использования фрэймворка уже не модно.

А чем тот же React принципиально лучше jQuery? Модно - это слабый аргумент. Спасибо.

ravdinve
() автор топика
Ответ на: комментарий от ravdinve

jquery — неплохая библиотека для сглаживания различия между браузерами (что сейчас неактуально вообще) и упрощения работы с DOM руками (сейчас не так часто нужно).

react — virtualdom-библиотека для View современных SPA, умеет в компоненты (как и все View-библиотеки и фреймворки, претендующие на актуальность). Самая мейнстримная из компонентных view-библиотек в современном понимании.

У них совсем разные области применения. Можно сравнивать react со, скажем, backbone.js (который пользует в том числе jquery, хотя может и без него).

x3al ★★★★★
()
Последнее исправление: x3al (всего исправлений: 1)

Отрендерь все страницы, перехватывай запросы ботов и отдавай им пререндер. В чем проблема-то?

anonymous
()
Ответ на: комментарий от x3al

isomorphic rendering.

Технология не взлетела и обречена на скорую смреть. В 2017 к ней уже лучше не привязываться.

anonymous
()
Ответ на: комментарий от ravdinve

А чем тот же React принципиально лучше jQuery?

Реакт - ничем. Это тот же jquery просто с рядом вшитых оптимизаций (ради которых приходится пожервовать качеством архитектуры). Бери сразу Angular.

anonymous
()

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

В каждый такой хтмл подмешай небольшой скрипт, который займется проверкой, что юзер не с лора, а на современном хроме/файрфоксе/едже - нужное подчеркни. После чего нагни браузер по полной, запустив догрузку плееров, джикверей, вемассемблей и вот этого всёго на +100500 Мб. Контент можно перегрузить или поступить умнее - проапгрейдить, взяв за основу то, что загрузил изначально для поисковых ботов.

И будет всем счастье. По крайне-мере мой фреймворк именно с такой архитектурой, но он еще не готов, так что пока не проси.

foror ★★★★★
()
Последнее исправление: foror (всего исправлений: 1)
Ответ на: комментарий от foror

В discourse такой подход используется, с двойной загрузкой. Солидно, надежно. Но выглядит отвратительно.

Vit ★★★★★
()
Ответ на: комментарий от ravdinve

jQuery прошлый век. Сейчас актуален React или Vue. На худой конец Angular.

th3m3 ★★★★★
()
Ответ на: комментарий от foror

Насколько я знаю, поисковики могут наложить санкции, если будешь отдавать им одно, а пользователям другое.

th3m3 ★★★★★
()
Ответ на: комментарий от th3m3

пользователям другое

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

foror ★★★★★
()
Ответ на: комментарий от foror

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

Это конечно не фатально, но стыдоба.

Vit ★★★★★
()
Ответ на: комментарий от Vit

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

Вообще, достаточно сохранить сессию пользователя в печеньках, после чего ему сразу отдавать +100500 Мб в новой вкладке, не выдумывая ничего. И при последующих заходах тот же алгоритм.

foror ★★★★★
()
Ответ на: комментарий от foror

https://dev.rcopen.com/ сравни

Печеньки да, помогают отчасти. Но IMHO лучше двигаться в сторону изоморфного рентеринга. Не надо потом 2 варианта темплейтов поддерживать (ущербный и полноценный).

Vit ★★★★★
()
Ответ на: комментарий от Vit

https://dev.rcopen.com/ сравни

Мигает, хотя иногда эффект пропадает или если зайти во вкладку позже. Думаю проблема в кривых руках.

изоморфного рентеринга

Это как? Даже гугл про такое не в курсе... Хотя погуглил английский, нашел, читаю.

foror ★★★★★
()
Последнее исправление: foror (всего исправлений: 1)
Ответ на: комментарий от Vit

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

Не надо потом 2 варианта темплейтов поддерживать (ущербный и полноценный)

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

foror ★★★★★
()
Последнее исправление: foror (всего исправлений: 1)
Ответ на: комментарий от foror

Покажи где ты там мигание нашел. Там reflow должен быть только для внешних картинок если у них размеры не сосканировались.

Vit ★★★★★
()
Ответ на: комментарий от foror

Ресурсы жрет не особо больше чем олдскульные сайты, которые на сервере рендерили. Дело в руках.

В любом случае на мобилку отдавать десктопную верстку, плохая идея, даже Тёма это осознал.

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

Vit ★★★★★
()
Последнее исправление: Vit (всего исправлений: 1)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.