SEO & React or Ізоморфізм і індексування

1. Що таке React? Який сенс? Чому це добре?
2. Отже ... WTF з JavaScript?
3. "Ми намагаємося зрозуміти JavaScript за JavaScript"
4. "Важко зробити це в масштабі нинішньої мережі, але ми вирішили, що варто. "
5. Що таке React?
6. Сильні сторони React
7. Ізомор ... що?
8. ReactJS ular AngularJS
9. Як ви це робите?
10. Переваги ReactJS для SEO
11. Недоліки реагування?
12. Хто використовує React?
13. І це ще не закінчено ...
14. Джерела та натхнення
15. Пропущені елементи

Це офіційний React є на всіх губах, але навіть ціною хорошої роботи з документацією, важко зрозуміти вплив цієї технології на SEO. Невелике освітлення для освоєння теми?

Що таке React? Який сенс? Чому це добре?

З появою SPA практично "реальні" веб-програми, такі як Gmail, Airbnb, Soundcloud або Netflix, JS frameworks і бібліотеки ніколи не були настільки популярні.

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

Важко упустити такі технології, як AngularJS (структура Google), Backbone.js, Ember.js або KnockoutJS.

Масове використання JavaScript змінює гру з точки зору SEO.

Отже ... WTF з JavaScript?

Основна проблема цих фреймворків полягає в тому, що вміст вводиться на стороні клієнта, після завантаження серверної сторінки (на відміну від PHP, наприклад): якщо ми подивимося на вихідний код, це ніщо!

За цих обставин Googlebot не міг сканувати та індексувати цей вміст, введений апостеріорно: катастрофічно так з точки зору SEO! (Мабуть , ...)

Нещодавно компанія Google оголосила, що Googlebot тепер спробує інтерпретувати скановані сторінки за допомогою JavaScript ... "Постараюсь ..."

"Ми намагаємося зрозуміти JavaScript за JavaScript"

У повідомленні від 23 травня 2014 року Google стверджує, що GoogleBot може інтерпретувати JavaScript і, отже, індексація вмісту раніше невидимою (тому що генерується клієнтська сторона, а не серверна сторона, ви слідуєте eh ..). Однак ви можете собі уявити, в масштабах Інтернету, це робота титану ...

"Важко зробити це в масштабі нинішньої мережі, але ми вирішили, що варто. "

З боку розробника, багато ініціатив, що дозволяють сканування та індексацію створеного таким чином контенту, розробили, але залишаються дорогими або принаймні обов'язковими для життєвого циклу проекту.

Саме тут реагує, так само як і рішення! Ви все ще стежите?

Що таке React?

реагувати це бібліотека ( набір методів і функцій ) для розробки інтерфейсів з характеристикою, що постійно змінюється : ми можемо думати про модуль коментарів у режимі "реального часу" або Facebook Ticker (який підсумовує активність ваших друзів) , там також у квазі "реальному часі").

Сила React полягає в тому, щоб завжди знаходити найкращий спосіб для оновлення та відображення [ цих змін ] швидко , без необхідності перезавантаження сторінки .

Розробка, а також публікація цієї бібліотеки є результатом співпраці сто або близько того розробників Працюючи для різних компаній, включаючи ініціативу Facebook і Instagram: досить серйозно так!

Сильні сторони React

"Реакція настільки швидка, що ніколи не спілкується безпосередньо з DOM. "

1. Розбірливість : код продукту "чистий" ( простий для читання, розуміння і підтримка), і його читання дозволяє вам відразу побачити, як ваша програма буде служити і виглядати.
2. Продуктивність : Це одна з ключових особливостей React, концепція Віртуальний DOM , Реакція зосередиться на обробці та відображенні лише змін у поданні (відкидаючи решту перегляду, що не змінюється).
3. Спільнота : ReactJS швидко спокусив спільноту розробників JS. І це не можна сказати про React Native, який зі свого боку може опублікувати рідні програми iPhone (і Android найближчим часом), написавши JavaScript. Це заощаджує значний час розробки.
4. [HOT SEO] Ізоморфізм і рендеринг на стороні сервера : через використання сервера вузол , код зможе генеруватися на стороні клієнта І на стороні сервера (трохи схожий на PHP, так ... але без перезавантаження!) на відміну від інших бібліотек і традиційних JS фреймворків ( Backbone.js , AngularJS , ember.js і т.д.), які спочатку виконують код тільки на стороні клієнта (у браузері). Ця сильна сторона - це та, яка найбільше цікавить нас з точки зору SEO, оскільки вона вирішує проблему індексації контенту (здатність сканувати та індексувати), заповнена тільки клієнтською стороною.

Ізомор ... що?

Просто пам'ятайте, що код між клієнтом (вашим браузером) і сервером є однаковим! І говорить інакше "Бекенд і фронтенд поділяють один і той же код. (Показано праворуч на діаграмі)

Крім того, React - не єдина бібліотека "вбудовування" цієї технології . На сьогоднішній день вже є двадцять хороших, таких як Брискат, Кассис, Catberry , Чаплін , казанок , Езель , Este, Flatiron, плавкий , Невидимий, jsblocks , Loopback, Lazojs, петлевий , Мохіто, Сара Taunus ,

Що стосується термінології в інших місцях, деякі воліють говорити про це Універсальний JavaScript скоріше, ніж ізоморфізм. Слід визнати, що цей вираз легше зрозуміти.

"... це суто анекдотичні докази, але коли ми використовуємо слово універсальне замість ізоморфного, кожен отримує його. "

ReactJS ular AngularJS

«Багато людей використовують V у MVC. "

Не потрібно порівнювати їх, реагувати на відміну від AngularJS не є рамкою.

Якщо Різниця між рамкою і бібліотекою ви одержимі, не соромтеся поглянути на ці обговорення. Для інших, просто пам'ятайте, що React не нав'язує конкретну архітектуру вашому додатку і може бути прищеплений до будь-якого проекту, використовуючи інші веб-технології (включаючи AngularJS), повністю незалежно.

" Відреагувати - це тільки перегляд ... "

Як ви це робите?

Ми платимо, або ми возимо!

Якщо ми не маємо коштів, ми пропонуємо сканерам альтернативну версію HTML (знімок) своїх сторінок завдяки Phantom.js (ви можете подивитися цей підручник щоб отримати ідею, вона датується трохи, але дух є). Так, від маскування ! Це "брудні" пуристи кажуть, важко підтримувати, але це працює, досить добре.

Якщо ні, і якщо у вас є невеликий бюджет (або бізнес-модель, яка тримається), то це досить потужна й проста установка: вона називається PreRender або BromBone назвати тільки їх. Якщо тема « Як зробити ваші SEO-дружні програми »Вас цікавить ця стаття приємна.

Переваги ReactJS для SEO

1. Можливість сканувань і індексації вмісту на початку: у нас є всі переваги JS, без недоліків!
2. Сприятливі часи завантаження сприяють хорошому досвіду користувача. Щасливі користувачі = Щасливий Google.

І це все! Так, з точки зору SEO. Все буде залежати від того, що ви робите наступні реалізації бек-офісу. А щоб завершити аналіз на цю тему, я пропоную вам поглянути на цю статтю Зак Аргіле, розробника @Pinterest "Припинити використовувати React для ВСЕ"

"Якщо у вас є сильна динамічна програма, яку потрібно часто оновлювати, і ви хочете уникнути великої ваги diffs, ви дивитеся на противника трав'яного типу, а віртуальний DOM ReactJS буде супер ефективним. Однак, якщо ви не збираєтеся мати ці потреби, ВИБЕРІТЬ НЕЩО! "

Недоліки реагування?

Простіше кажучи, немає нікого. Якщо копати трохи, то можна відзначити це:

• Документація прогресує, але було ще деякий час, коли було не так просто обійтись лише за допомогою Facebook. Початок .
• Facebook залишає за собою право відкликати ліцензію , право використовувати React. Ця тема обговорюється, хоча наївно можна задатися питанням, який інтерес викличе б Facebook приймати цей тип поведінки.

Хто використовує React?

Все більше компаній! Щоб говорити про найвідоміших, ми, звичайно, можемо процитувати Facebook, Instagram, а також Yahoo, Adobe, Airbnb, AdRoll, Асану, BBC, Century 21, Club Med, Dropbox, Feedly, Github, Khan Academy, KissMetrics, Netflix, Reddit, Salesforce, Twitter, WhatsApp і повні інших ,

І це ще не закінчено ...

Вам сподобалася ця стаття? Дякуємо за те, що ви поділилися або розповіли нам про свій досвід (хороший чи поганий) у рамках JS і бібліотеках, залишивши коментар.

І якщо у вас ще є певна енергія, я можу лише порадити вам прочитати нашу попередню статтю Demandware: за і проти SEO ,

PS: Завдяки Georges , Жеремі , Blandine , Франсуа і Одрі для коректури!

Джерела та натхнення

1. Реакція проти AngularJS - як два Порівнювати [UA]
2. Facebook ReactJS - Ресурси для початку [FR]
3. Awesome React, колекція чудових інструментів, ресурсів, відео та блискучих реагувань [EN]

Пропущені елементи

1. React Native, фреймворк для створення власних програм за допомогою React [EN]
2. JSX, розширення синтаксису JavaScript, схоже на XML [EN]
3. Компоненти багаторазового використання [EN]
4. Реалізуйте додатки, деякі корисні утиліти для створення React apps [UA]
5. Flux, архітектура програми для створення веб-додатків на стороні клієнта [EN]