О нас
FAQ
Связь
Peклaмa
Логин:
Пароль:

Как сделать ваши JavaScript-приложения оптимизированными для SEO

  1. Когда ты боишься, клоакинг - твой единственный путь
  2. BromBone
  3. Предварительно обрабатывать
  4. Что я буду использовать?

Одна из проблем при переносе логики вашего приложения из серверной части (Rails, Django или чего-либо еще) на новую границу веб-фреймворков JS, таких как AngularJS и EmberJS, заключается в том, как вы можете сделать их оптимизированными для SEO, так как эти приложения JavaScript отправляются в браузер. для вашего веб-сервера как 200 OK, независимо от того, если после загрузки приложения страница, которую он представляет, не найдена или имеет определенные метатеги, такие как заголовок и описание.

Вот, например, как выглядит раздел HEAD типичного углового приложения в HTML:

1 2 3 4 5 6 7 8 9 10 <head> <meta charset = "utf-8"> <title> {{pageTitle}} </ title> <meta name = "Keywords" content = "{{metaKeywords}} "> <meta name =" description "content =" {{metaDescription}} ">> link type =" image / x-icon "data-ng-href =" https://example.org/favicon.ico "rel = "ярлык"> <link rel = "stylesheet" href = "https://example.org/screen.css"> </ head>

Как видите, заголовок страницы, который SE использует как Google в качестве основного текста на ваших проиндексированных страницах, является просто заполнителем для переменной, которая появляется после того, как среда JS загрузилась и выполнила свою собственную логику, что в итоге привело к результатам SERP, таким как этот:

Итак, как вы убедитесь, что поисковые системы действительно увидят постобработанный HTML, а не самый первый, отправляемый с вашего сервера?

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

Когда ты боишься, клоакинг - твой единственный путь

Практика маскировка был наказан поисковыми системами в течение многих лет, но оказался одобрен Google когда у вас есть приложения на основе JS.

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

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

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

BromBone

BromBone это сервис, который сканирует вашу карту сайта, генерирует снимок отрендеренного HTML, сохраняет его на Amazon (предположительно S3 ) и избавляет вас от необходимости самостоятельно настраивать промежуточное SEO-приложение.

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

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

После столкновения с этим требованием мы в Намши решили сделать что-то еще.

Предварительно обрабатывать

Предварительно обрабатывать это и SaaS и библиотека с открытым исходным кодом что prerendrs страницы на лету, используя PhantomJS и некоторые другие хорошие приемы обслуживать правильные коды состояния и заголовки HTTP ,

Единственным недостатком рендеринга на лету является то, что бот должен будет ждать немного дольше, чтобы получить ответ, и это может привести к штрафу со стороны поисковых систем: решение очень простое, так как вы можете просто разогреть пререндер. кэшировать самостоятельно, нажимая URL-адреса, которые вы хотите кэшировать. Чтобы обновить кэш, Prerender позволяет вам выполнять POST-запросы, чтобы:

  • GET-запрос к http://prerender.example.org/http://example.org/foo.html преобразует страницу на лету, так что вы можете кэшировать будущие запросы настоящими ботами.
  • запрос POST к http://prerender.example.org/http://example.org/foo.html обновит предварительно представленный контент

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

Что я буду использовать?

В общем, хорошо, что в 2014 году мы наконец можем сказать, что создание SEO-дружественных приложений JavaScript больше не доставляет хлопот!

О произойдет, если у вас есть новые страницы, которые не включены в карту сайта?
Что я буду использовать?
Рекомендуем
ochistka_vody_v_domashnih_usloviyah

Очистка воды в домашних условиях
uluchshaem_rabotosposobnost_mozga

Улучшаем работоспособность мозга
puteshestviya_po_francii

Путешествия по Франции
elka_iz_salfetok_svoimi_rukami

Елка из салфеток своими руками!
Cdelay_pervye_dvizheniya_na_konkah

Cделай первые движения на коньках
izdeliya_iz_listvennicy_ekstra-klassa

Изделия из лиственницы экстра-класса
franciya__idealnaya_strana_dlya_romanticheskih_puteshestviy

Франция – идеальная страна для романтических путешествий
zhiloy_kompleks_Grona_Lund

Жилой комплекс «Grona Lund»
s_chego_nachinat_stroitelstvo_doma

С чего начинать строительство дома
kak_nauchit_sobaku_komande_lezhat

Как научить собаку команде лежать

© yaznayu.net, 2017