Дайте мне знать, если я на правильном пути, так как я не до конца понимаю ваш вопрос, но вот как я смогу выполнить то, что вы пытаетесь сделать:
Есть два способа сделать это, если вы ищете преимущества SEO.
Либо загрузите все с сервера на одной странице, а затем используйте CSS и Javascript для управления содержимым после его загрузки ...
OR
Настройте свою страницу традиционным способом (каждая вкладка навигации ссылается на новую, полную страницу), а затем используйте Javascript для загрузки своего контента через AJAX, как вам нравится.
В обоих этих сценариях Google может сканировать вашу страницу / структуру сайта и получать все, что ему нужно, и вы все равно можете использовать JS для отслеживания взаимодействия с вашими пользователями. Что бы вы в итоге ни делали, правило SEO, как правило, «относитесь к нему так, как будто мне не нужен JS для загрузки всего вашего контента».
Звучит так, как будто вы рассмотрели первый сценарий, хотя вместо использования JS в ссылках я бы сделал их стандартными ссылками HTML-привязки, используя id
s.
Если вас интересует второй сценарий, я бы порекомендовал вам следующее:
Во-первых, подойдите к вашей навигации, как будто она не требует JavaScript для правильной работы. Это означает, что каждый элемент навигации ссылается на отдельную страницу (каждая из которых требует отдельного маршрута в экспрессе).
Если вы используете Jade для рендеринга ваших шаблонов, я бы использовал его функции наследования для управления вашей разметкой. По сути, вы бы поместили весь свой html в layout.jade
, а в большом элементе div, который вы используете для содержимого страницы, вы бы создали block
с содержимым по умолчанию внутри. Маршруты, которые вы устанавливаете для каждого элемента nav, будут вызывать различные шаблоны, расширяющие index.jade
, и записывать контент, специфичный для страницы, в созданный вами block
.
Вот пример:
app.get('/', function(req, res){
res.render('index.jade');
});
app.get('/section1', function(req, res){
res.render('section1.jade');
});
app.get('/section2', function(req, res){
res.render('section2.jade');
});
Это гарантирует, что при каждом посещении http://yoursite.com/section1
отображается вся страница (верхний и нижний колонтитулы и все), но вам не нужно дублировать код верхнего и нижнего колонтитула в каждом шаблоне. Он просто живет в index.jade
, который расширяется другими шаблонами, специфичными для разделов.
При настройке вашего новостного канала, если он не передает клиенту обновления новостей в режиме реального времени, я отказываюсь от настройки socket.io и вместо этого загружаю его из вашей базы данных при загрузке страницы. Возьмите все, что возвращается из БД при загрузке страницы, и передайте его в свой шаблон Jade через локальные переменные. Например:
app.get('/news', function(req, res){
res.render('news', {
newsArticles: newsArticles
});
});
Наконец, когда у вас это работает, как на обычном веб-сайте (традиционная загрузка http-страницы по сравнению с загрузкой javascript), добавьте слой в свой javascript, чтобы преобразовать страницу в такую, которая загружает контент через AJAX. Я использую jQuery для этого, и он прекрасно работает. Напишите некоторый код jQuery, который прикрепляет событие click к каждому из ваших элементов навигации. Это событие щелчка будет захватывать URL из href
в вашей ссылке, а затем передавать его методу load в jQuery, который затем заменит то, что находится в основной области содержимого, на разметку со страницы, которую он только что загрузил через ajax.