Как объединить JavaScript и SEO с изоморфным JS

  1. Google против JavaScript
  2. Как это работает?
  3. Преимущества изоморфных приложений
  4. Предполагаемое время загрузки быстрее
  5. Там нет такого понятия, как бесплатный обед
  6. Вы вынуждены использовать определенные технологии
  7. Вам нужна экспертиза
  8. Начало работы с изоморфным JavaScript
  9. SEOs и разработчики

SEO для сайтов на основе JavaScript (построено с AngularJS , JQuery , ReactJS и т. д.) требует много знаний, разработки, тестирования и общеизвестно, что получить правильные права. Но давайте посмотрим правде в глаза, даже со всеми этими проблемами, JavaScript здесь, чтобы остаться. Это позволяет вам создавать быстрые, динамичные и красивые веб-сайты, ориентированные на предоставление отличного пользовательского опыта.

Google против JavaScript

Мы ясно видим, что в прошлом году Google сосредоточился в основном на поддержке взаимодействия с пользователем и производительности. Мы можем видеть это в Google AMP веб-сайты, ориентированные на быстрое освещение, Одностраничные приложения (SPA) или Прогрессивные веб-приложения.

Google утверждает что теперь они гораздо лучше сканируют и индексируют JavaScript , К сожалению, текущие результаты все еще далеки от хороших. Есть множество примеров, подтверждающих это, один из которых Hulu.com JavaScript SEO не работает ,

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

К сожалению, это не идеально, так как часто сложно поддерживать, и не все приложения могут быть реализованы таким образом (сложные). Пользовательский опыт также не так уж велик, потому что требуется некоторое время, чтобы загрузить все библиотеки JavaScript и загрузить приложение.

SEO для сайтов на основе JavaScript (построено с   AngularJS   ,   JQuery   ,   ReactJS   и т

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

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

Как видите, все может быть довольно сложно.

Что если бы существовал гибрид, который мог бы соединить все преимущества быстрого и динамического JavaScript с простым в сканировании HTML / CSS? К счастью, в блоке появился новый ребенок, и он называется «Изоморфные приложения».

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

Как это работает?

Этот изоморфизм означает, что один и тот же код JavaScript, используемый вашим приложением, может быть запущен как на сервере, так и на клиенте (в браузере).

Благодаря этой функции вы можете загружать в приложение некоторые данные, поступающие из базы данных на сервере, запускать их и записывать итоговый HTML-вывод, который обычно требуется для сборки браузера. Этот вывод затем может быть использован в качестве исходного HTML для всех, кто его запрашивает (включая сканеры, такие как Google Bot).

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

Преимущества изоморфных приложений

Индексируемость поисковой системы

У веб-сканеров много трудностей при поиске и индексации контента JavaScript (а некоторые из них до сих пор даже не пытаются). Сканеры анализируют необработанный код без его обработки или рендеринга. То, что вы видите в своем браузере, обрабатывается, отображается контент. Рендеринг, обработка DOM и т. Д. Требуют гораздо больше вычислительных мощностей и намного сложнее, чем просто анализ простого текста, поэтому для поисковых систем это обходится дороже.

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

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

Предполагаемое время загрузки быстрее

Загрузка тяжелого кода JS может занять некоторое время, особенно в областях с более медленным интернет-соединением. Рендеринг всего загруженного кода в DOM, затем ожидание загрузки приложения / веб-сайта и выполнения начальных AJAX-запросов также занимает некоторое время. Это часто приводит к медленной начальной загрузке веб-сайта или приложения, недовольным пользователям и снижению дохода веб-сайта. К счастью, изоморфный подход решает часть этой проблемы.

При рендеринге разметки приложения на стороне сервера нет необходимости в большинстве вызовов AJAX, и на стороне клиента происходит меньше рендеринга (из-за первоначального рендеринга на сервере). это уменьшает воспринимаемое время загрузки примерно на 40% ,

Там нет такого понятия, как бесплатный обед

Как следует из этой известной пословицы, ничего не бывает бесплатно. Изоморфный подход великолепен, поскольку он решает проблемы индексации SEO, приводит к более быстрому времени загрузки и упрощает стек приложений (по сравнению с использованием сервисов предварительного рендеринга). Кроме того, это может принести пользу для больших баз кода (проще в обслуживании, клиентский и серверный код разделены и т. Д.). Тем не менее, это идет по цене.

Вы вынуждены использовать определенные технологии

Прежде всего, ваш сервер должен поддерживать запущенные приложения NodeJS (для рендеринга JavaScript на стороне сервера).

Кроме того, инфраструктура приложения, которую вы используете для создания приложения, также должна поддерживать этот подход (но ключевые имеют или имеют плагины, которые делают - Angular JS, React JS ). Как видите, нет Рубин на рельсах или же Джанго в списке. Эти структуры нельзя использовать для создания изоморфных приложений JavaScript, но их можно использовать для создания API-интерфейсов, обеспечивающих работу этих приложений JavaScript, что является отличным способом отделить код обработки данных от пользовательского интерфейса на основе JavaScript .

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

Вам нужна экспертиза

Это все еще довольно новый подход, сильно отличающийся от старых (например, рендеринг на стороне сервера / смесь jQuery), который требует передовых технологий. В результате вам нужны разработчики, которые готовы к работе и которым комфортно работать с этими новыми технологиями; разработчики, которые не боятся экспериментировать и пачкать руки.

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

Начало работы с изоморфным JavaScript

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

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

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

SEOs и разработчики

В ходе исследования этой статьи я понял, что, несмотря на то, что мы (SEO) думаем, сообщество разработчиков действительно взволновано созданием SEO-дружественных веб-сайтов на основе JavaScript.

Я думаю, что мы должны начать использовать потенциал изоморфного JavaScript и других удивительных новых технологий. Особая благодарность Камил Гримуза который мне очень помог с этим исследованием (и фактически соавтором этой статьи со мной). Я хочу написать больше статей о JS и SEO в ближайшее время, так как есть множество интересных тем для обсуждения.

Кредиты изображений

Популярное изображение: lenkaserbina / Depositphotos.com

Фото в посте: stockertop / Depositphotos.com

Похожие

SEO
... JavaScript должен быть включен! Практически каждый путь клиента в Интернете начинается с Google. Мы вводим определенный термин - например. Б. кухня из массива дерева - и давайте тогда рассусучим из поисковика соответствующие страницы
SEO SEO SEO
... ионала разработана * из WordPress, которая является легко управляемой системой управления контентом"> это Естественный SEO SEO Pack Нацеленность на профессионала разработана * из WordPress, которая является легко управляемой системой управления контентом. Он включает в себя 10-страничный пакет
Google / SEO
... сколько устарели, но здесь: - количество «контента» довольно ограничено (достаточно взглянуть на источник страницы), кроме того, ваша страница начинается с подсказки JavaScript; Я не знаю, применимо ли еще это практическое правило, но я полагаю, что хорошей практикой является перемещение как можно большего количества встроенного JavaScript-кода в конец документа, чтобы ваш контент был как можно выше в исходном коде; это также может помочь добавить (относительно) еще немного контента;
КПП против SEO
Последняя проверка 10 марта 2019 года в 17:19 Мир поискового маркетинга является весьма спорным поле битвы между двумя его «королей», а именно с оплатой за клик оптимизации (PPC) рекламы и поисковой системы (SEO). « Ожидается, что в 2012 году
Google, Adsense, SEO и как все это работает
... как о телевизионной рекламе. Веб-мастера могут разместить Adsense на своих сайтах. Думайте об Adsense как о телевизионной программе. Если зритель вашей веб-страницы нажимает на одно из ваших объявлений, вы получаете комиссию. Эта комиссия основана на цене Adword. Google удерживает около 60% цены предложения и передает около 40% аккаунту веб-мастера или Adsense. Способ отображения рекламы Adsense определяется плотностью ключевых слов на ваших отдельных сайтах. Если ваш сайт посвящен
Как использовать SEO от Yoast
SEO от Yoast, пожалуй, лучший инструмент для простой и оптимизации новых страниц и постов. Короче говоря, Yoast - это помощник, который говорит вам, что делать / изменять в заголовке, заголовке, содержимом, изображении и т. Д., Чтобы обеспечить оптимальную возможность поиска страницы в Интернете. Так как начать? Если вы еще не установили Yaost, мы можем начать там: Перейдите в Расширения> добавить новый> поиск "seo by yoast"> установить> активы.
SEO конференция 2011
... ия 2011 Вчера я посетил 3-ю серию SEO конференция , Форум был очень хорошим, но я должен признать, что сначала я был немного смущен. Первые лекции были посвящены социальным сетям, онлайн-репутации, созданию и поддержке фан-страниц Facebook, а также многим другим полезным и чрезвычайно важным и актуальным темам. Честно говоря, я думал, что фокус события сместился. Семинар больше походил на форум онлайн-маркетинга в целом. Я немного
SEO Торонто
... ск в Google. Эти люди активно ищут ваши услуги, и это то, что мы называем горячими лидерами. Они думают о покупке и не нуждаются в дальнейшем убеждении. Им просто нужно знать, где его купить. Вот где приходит SEO. Оптимизируя ваш сайт для поисковых систем, мы можем сделать так, чтобы ваш сайт появлялся наверху. Преимущества этого: Автоматический, последовательный и надежный поток клиентов каждый день Горячие выводы - люди
SEO СЕГОВИЯ: 2010
15 ноября Период начинает проводить полевые работы зимой SACRE. С этого дня до 15 февраля сотни добровольцев будут путешествовать по полям и лесам повсюду, считая птиц . Это будет третий сезон этой амбициозной программы мониторинга птиц, которую Испанское орнитологическое общество запустило в ноябре 2008 года,
Автоматизированный SEO
... какой это может быть боль в шее. Написание умного и убедительного контента вокруг определенных ключевых слов может полностью нагружать ваш мозг. Если бы мы сказали вам, где можно получить автоматические оптимизаторы, вас это заинтересовало бы? Звоните 760-749-9197. Автоматизированные SEO-сервисы DOitSEO - это намного больше, чем просто хорошо написанный текст, оптимизированный под ключевые слова. Конечно, вы получите много, но когда вы подпишетесь на простые автоматизированные SEO-сервисы
Google SEO и Joomla SEO
Я знаю, что на моем сайте много информации, и я могу понять, что это может немного смущать начинающих, или вам нужен более короткий контрольный список, чтобы увидеть, выполнили ли вы все шаги главный. Вот почему я написал эту статью. Он содержит только основные шаги по оптимизации SEO вашего сайта. Это максимально практично. Обратите внимание, что эта статья для новых сайтов. Для существующих сайтов вы должны быть осторожны, особенно будьте осторожны, чтобы не изменить

Комментарии

Любой может показать вам, что такое SEO, как оно работает и что вы должны учитывать; Однако, как применить это к реальному миру?
Любой может показать вам, что такое SEO, как оно работает и что вы должны учитывать; Однако, как применить это к реальному миру? Для начала любая стратегия SEO требует предварительного анализа сети, чтобы узнать, с чего мы начали. С другой стороны, анализ результатов, отслеживание, выявление областей для улучшения и подготовка отчетов, которые вы можете сравнивать месяц за месяцем, - это важные аспекты, которые вы должны знать, как это сделать, если вы хотите, чтобы ваш бизнес развивался.
Что вы думаете о том, как узнать, как установить, как настроить и как использовать Yoast SEO для оптимизации ваших сообщений?
Что вы думаете о том, как узнать, как установить, как настроить и как использовать Yoast SEO для оптимизации ваших сообщений? Обязательно прокомментируйте ниже и ознакомьтесь с содержанием, которое мы подготовили для вас! Нужно оптимизировать ваш сайт для SEO? Познакомьтесь с Oblige - агентство Создание сайта и Цифровой маркетинг , Другие
Позвольте мне сделать это предположение: вы задали Google вопросы, похожие на то, как стать экспертом по SEO?
Позвольте мне сделать это предположение: вы задали Google вопросы, похожие на то, как стать экспертом по SEO? И вот ты здесь. Первый урок того, как стать специалистом по поисковой оптимизации, состоит в том, чтобы понять: «Ориентация на ключевые слова и их ранжирование - это не что иное, как ответы на вопросы», потому что именно это я и сделал, создав целевую страницу для ответа на этот вопрос . Итак, давайте углубимся в это, потому что в течение следующих 5 минут я поделюсь с вами
Как вы можете улучшить SEO своей компании в поисковых системах, таких как Google?
Как вы можете улучшить SEO своей компании в поисковых системах, таких как Google? • Найм Alicante SEO услуги или веб-позиционного агентства. • Оптимизация вашего текущего проекта с правильными рекомендациями, которые поисковым системам действительно нравятся Хорошие методы или также называют SEO «белых перчаток»! Естественное или органическое позиционирование. • Реализация стратегии онлайн-маркетинга: через статьи, качественные ссылки, комментарии, публикации,
Но как клиент, как вы узнаете, что искать, когда ваш SEO вручает вам этот ежемесячный отчет?
Но как клиент, как вы узнаете, что искать, когда ваш SEO вручает вам этот ежемесячный отчет? Легко заблудиться в куче данных, но это то, что все сегодня вручают вам, сообщая о результатах SEO. Вы можете не знать, что делать с количеством перечисленных ссылок или с тем, что на самом деле означают все диаграммы Google Analytics, но все, что вам действительно нужно знать, - это если эти стратегии SEO приносят деньги. В следующий раз, когда вы получите отчет о поисковой оптимизации,
Но как только вы запустите локальную SEO-кампанию, как вы узнаете, работает ли она?
Но как только вы запустите локальную SEO-кампанию, как вы узнаете, работает ли она? Как вы можете на самом деле определить, насколько эффективно используются ваши усилия? Взгляните на наш список KPI для локального SEO, чтобы увидеть, как продвигается ваша кампания. Органический трафик Вероятно, наиболее очевидное измерение, ваш органический поисковый трафик является одним из более четких индикаторов вашего локального охвата SEO. Вы можете просмотреть свой обычный
Как Google распознает сущности и как это помогает SEO?
Как Google распознает сущности и как это помогает SEO? 4,7 (93,33%) 3 голос (ов) Google является одной из ключевых задач юридические лица узнаваемый и контекстуальный. В этом посте я хотел бы объяснить некоторые подходы, которые Google может использовать для решения этой проблемы, и как это сделать для
Но вы когда-нибудь задумывались, как Google удается показать вам именно то, что вы ищете?
Но вы когда-нибудь задумывались, как Google удается показать вам именно то, что вы ищете? Знаете ли вы, как поисковые системы (например, Google) решают, какие страницы будут отображаться в результатах? У Google есть миллионы веб-сайтов, и процесс определения рейтинга включает сложные алгоритмы, порождающие мир поисковой оптимизации (SEO). Давайте разберемся немного с основами SEO. Что такое SEO? Поисковая оптимизация может быть определена как процесс
Он дает вам много советов по поводу роли, или он как бы позволяет вам относиться к ней так, как если бы вы играли совершенно вымышленного персонажа?
Он дает вам много советов по поводу роли, или он как бы позволяет вам относиться к ней так, как если бы вы играли совершенно вымышленного персонажа? Очень круто играть настоящего человека, и это весело - думать, как он. Адам приложил руку к каждому аспекту шоу, от написания сценариев до декораций, костюмов и т. Д., Поэтому он не может быть на съемочной площадке так, как ему хотелось бы, или я бы хотел [его]. Временами он дает мне определенные указания относительно того,
Нужна переподготовка о том, как использовать Google Analytics для SEO?
Нужна переподготовка о том, как использовать Google Analytics для SEO? Мы вас покроем! Прочитайте наше руководство: Как освоить SEO с помощью Google Analytics - Руководство для начинающих 3. Организуйте свой контент для мобильного поиска Исследование Nielsen Norman Group показало, что это гораздо
Как долго вы занимаетесь SEO / PPC / цифровым маркетингом, и вам это нравится?
Как долго вы занимаетесь SEO / PPC / цифровым маркетингом, и вам это нравится? Что вы надеетесь получить от BrightonSEO? Какие сессии или докладчики вы с нетерпением ждете? Какими были ваши любимые сессии или докладчики? Будете ли вы посещать другие конференции по SEO / PPC в этом году? Оми Сидо является опытным международным спикером и известен в отрасли своим юмором и способностью

Что если бы существовал гибрид, который мог бы соединить все преимущества быстрого и динамического JavaScript с простым в сканировании HTML / CSS?
Как это работает?
Так как начать?
Если бы мы сказали вам, где можно получить автоматические оптимизаторы, вас это заинтересовало бы?
Любой может показать вам, что такое SEO, как оно работает и что вы должны учитывать; Однако, как применить это к реальному миру?
Что вы думаете о том, как узнать, как установить, как настроить и как использовать Yoast SEO для оптимизации ваших сообщений?
Что вы думаете о том, как узнать, как установить, как настроить и как использовать Yoast SEO для оптимизации ваших сообщений?
Нужно оптимизировать ваш сайт для SEO?
Позвольте мне сделать это предположение: вы задали Google вопросы, похожие на то, как стать экспертом по SEO?
Как вы можете улучшить SEO своей компании в поисковых системах, таких как Google?