Додавання можливості шарінгу (публікації) контенту в соціальних мережах в односторінковому додатку

Single-Page Applications (SPAs) (* односторінковий додаток. Тут і надалі примітка перекладача) працюють завдяки візуалізації шаблонів на стороні клієнта. Це додає швидкодію досвіду взаємодії користувача з застосуванням. Недавно компанія Google повідомила, що вони виконують веб-збирання та виконують код JavaScript таким же чином, як би це робив звичайний користувач. У результаті чого веб-скрапінг (* витягнення веб-даних із веб-сторінок) сайтів, функціонуючих завдяки фреймворкам для створення односторінкових додатків (Angular, Ember и Vue и т.д.), відбувається без покарання з боку Google.

Окрім пошукових роботів для видимості вашого сайту також необхідні й інші веб-роботи, а саме роботи для виконання шарінгу докладного контенту в соціальних мережах. Вони покладаються на мета-теги та досі не враховують код JavaScript.

У цьому посібнику ми створимо додатковий модуль для розміщення маршруту та відтворення шаблону для вашого сервера Express та Node.js, який ви можете використовувати з більшістю фреймворків для створеня односторінкових застосунків. Завдяки цьому модулю ваш сайт зможе надати користувачеві можливість виконання шарінг докладного контенту в Twitter, Facebook та Pinterest.

Попереджаю

У цьому посібнику мова йде тільки про веб-роботів, котрі добувають інформацію для додавання до соціальних мереж. Не пробуйте використовувати ці приклади для веб-пауків пошукових систем. Компанії пошукових систем можуть серйозно відреагувати на подібну поведінку та визнати її спамом чи обманом, в результаті чого рейтинг вашого сайту може швидко знизитися.

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

Шарінг докладного контенту в соціальних мережах

Якщо ви опублікуєте нову статтю в Facebook та додасте URL (* уніфікований покажчик [місцезнаходження інформаційного] ресурсу), то веб-робот Facebook прочитає HTML - код та буде шукати в ньому мета-теги для протоколу OpenGraph. Нижче наведено приклад для головної сторінки Envato Tuts+ :

При перегляді HTML-коду ми бачимо в тегу head відповідні теги для створення цього прев'ю:

1

<meta content="Envato Tuts+" property="og:title">

2

<meta content="Envato Tuts+ teaches creative and technical skills across many topics to millions of people worldwide. We offer tutorials, articles, news and insights that help you take your knowledge to the next level." property="og:description">

3

<meta content="http://static.tutsplus.com/assets/favicon-8b86ba48e7f31535461f183680fe2ac9.png" property="og:image">

Pinterest використовує тий же протокол (OpenGraph), що й Facebook. Тому їх механізми для шарінгу контенту працюють доволі подібно.

У Twitter концепція контенту має назву 'карточка', і в Twitter є декілька її різних реалізацій в залежності від способу представлення вашого контенту. Нижче наведено приклад карточки Twitter з GitHub:

А ось HTML-код для її створення:

1

<meta content="@github" name="twitter:site">

2

<meta content="summary" name="twitter:card">

3

<meta content="NodeRedis/node_redis" name="twitter:title">

4

<meta content="redis client for node. Contribute to node_redis development by creating an account on GitHub." name="twitter:description">

5

<meta content="https://avatars1.githubusercontent.com/u/5845577?v=3&amp;s=400" name="twitter:image:src">

Примітка: GitHub використовує спосіб, подібний тому, що описується в цьому посібнику. Існує невелика відмінність коду HTML у тегу, атрибут name котрого має значення twitter:description. Мені необхідно змінити назву агента користувача, як показано пізніше в цьому посібнику, щоб отримати відповідний мета-тег.

Перешкоди під час відтворення контенту на стороні клієнта

Додавання мета-тегів не становить труднощів, якщо вас влаштовує додавання тільки одного заголовка, опису чи зображення в соціальних мережах для цілого сайту. Просто впишіть значення мета-тегів прямо до head вашого HTML-документа. Проте, на щастя, ви створюєте набагато більш складний веб-сайт та хочете, щоб публікуємий докладний контент у соціальних мережах змінювався залежно від значення URL-адреси (яка, напевно, встановлюється за допомогою HTML5 History API (* дозволяє змінювати URL веб-сайту без перезавантаження всієї сторінки), яким маніпулює ваш фреймворк).

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

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

ПЗ проміжного шару для визначення агента користувача

Клієнти (роботи, веб-пауки, веб-браузери) відсилають рядок User Agent (UA) ( * агент користувача) у заголовках HTTP кожного запиту. Припускається, що завдяки цьому можна буде  визначити тип програмного забезпечення клієнта. Тоді як веб-браузери мають велику різноманітність рядків UA, веб-роботи більш-менш стабільні у цьому питанні. Facebook, Twitter та Pinterest розголошують рядки UA своїх веб-ботів через повагу до розробників.

У Express значення рядка UA міститься в об'єкті запиту request у властивості user-agent. Я використовую регулярний вираз для ідентифікації різних веб-ботів, яким я хотів би надати альтернативний контент. Ми розмістимо його у ПЗ проміжного шару. ПЗ проміжного шару подібно до маршрутів, проте для нього не потрібен шлях чи метод та в ньому (звичайно) запит передається до іншого ПЗ проміжного шару чи маршруту. У Express маршрути та ПЗ проміжного шару виконуються послідовно, тому розташуйте наступний код вище будь-якого іншого маршруту у вашому додатку Express.

1

app.use(function(req,res,next) {

2

  var

3

    ua = req.headers['user-agent'];

4

5

  if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) {

6

    console.log(ua,' is a bot');

7

  } 

8

9

 next();

10

});

Вищезазначений регулярний вираз виконує пошук символів  'facebookexternalhit', 'Twitterbot' чи 'Pinterest' на початку рядка UA. Якщо символи знайдено, то значення рядка UA виводиться до консолі.

Нижче наводиться код усього сервера:

1

var

2

  express   = require('express'),

3

  app       = express(),

4

  server;

5

6

app.use(function(req,res,next) {

7

  var

8

    ua = req.headers['user-agent'];

9

10

  if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) {

11

    console.log(ua,' is a bot');

12

  } 

13

14

  next();

15

});

16

17

app.get('/',function(req,res) {

18

  res.send('Serve SPA');

19

});

20

21

server = app.listen(

22

  8000,

23

  function() {

24

    console.log('Server started.');

25

  }

26

);

Тестування вашого ПЗ проміжного шару

У Chrome перейдіть на ваш новий сервер (URL-адресою якого повинна бути http://localhost:8000/). Відкрийте DevTools та увімкніть ‘Device Mode’ (* режим пристрою), кликнувши по іконці смартфона у верхній лівій частині панелі розробника.

На панель інструментів пристрою уведіть рядок 'Twitterbot/1.0' в поле для редагування значення UA.

Тепер перезавантажте сторінку.

У цей момент ви повинні побачити 'Serve SPA' на сторінці, проте при перегляді результату в консолі вашого додатка Express ви повинні побачити:

Twitter/1.0 is a bot

Альтернативна маршрутизація

Тепер, коли ми можемо визначати веб-ботів, давайте створимо альтернативний маршрут. В Express може використовуватися безліч маршрутизаторів, що часто використовуються для розділення маршрутизаторів в залежності від шляху. У нашому випадку ми збираємося використовувати маршрутизатор трохи по-особливому. Маршрутизатори являють собою по суті ПЗ проміжного шару, тому вони приймають об'єкти req, res та next, як і решта ПЗ проміжного шару. Ідея тут полягає в тому, щоб згенерувати інший набір маршрутів із тими ж самими шляхами.

1

nonSPArouter = express.Router();

2

nonSPArouter.get('/', function(req,res) {

3

  res.send('Serve regular HTML with metatags');

4

});

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

1

var

2

  express   = require('express'),

3

  app       = express(),

4

5

  nonSPArouter      

6

            = express.Router(),

7

  server;

8

9

nonSPArouter.get('/', function(req,res) {

10

  res.send('Serve regular HTML with metatags');

11

});

12

13

app.use(function(req,res,next) {

14

  var

15

    ua = req.headers['user-agent'];

16

17

  if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) {

18

    console.log(ua,' is a bot');

19

    nonSPArouter(req,res,next);

20

  } else {

21

    next();

22

  }

23

});

24

25

app.get('/',function(req,res) {

26

  res.send('Serve SPA');

27

});

28

29

server = app.listen(

30

  8000,

31

  function() {

32

    console.log('Server started.');

33

  }

34

);

Якщо ми протестуємо додаток за тією ж схемою, як і вище, то при вказанні значенням UA рядка Twitterbot/1.0 браузер покаже при перезавантаженні наступне:

Serve regular HTML with metatags

Тоді як при використанні стандартного UA Chrome ви побачите:

Serve SPA

Мета-теги

Як ми розглядали вище, додавання докладного контенту до соціальних мереж відбувається завдяки мета-тегам усередині заголовка вашого HTML-документа. Оскільки ви створюєте односторінковий застосунок, то, напевно, у вас навіть не встановлено шаблонізатора. В цьому посібнику ми будемо використовувати jade. Jade являє собою доволі просту мову для написання шаблонів, в якій пробіли та табуляція грають роль та немає потреби у використанні закриваючих тегів. Ми можемо встановити його за допомогою команди:

npm install jade

У первинному коді нашого сервера додайте цей рядок перед рядком app.listen.

app.set('view engine', 'jade');

Тепер ми збираємося додати інформацію, яку хотіли б передати тільки веб-боту. Ми змінимо nonSPArouter. Оскільки ми встановили механізм представлення в методі set об'єкта app, метод res.render буде виконувати візуалізацію шаблонів на jade.

Давайте створимо невеликий jade-шаблон для представлення інформації веб-ботам, котрі виконують шарінг контенту в соціальних мережах.

1

doctype html

2

html

3

  head

4

    title= title

5

    meta(property="og:url"  name="twitter:url" content= url)

6

    meta(property="og:title" name="twitter:title" content= title)

7

    meta(property="og:description" name="twitter:description" content= descriptionText)

8

    meta(property="og:image" content= imageUrl)

9

    meta(property="og:type" content="article")

10

    meta(name="twitter:card" content="summary")

11

  body

12

    h1= title

13

    img(src= img alt= title)

14

    p= descriptionText

Більшу частину коду складають мета-теги, проте ви можете звернути увагу, що я додав інформацію й до тіла документа. На момент написання цього посібника вважається, що усі веб-боти для додавання контенту в соціальних мережах звертають увагу тільки на мета-теги. Проте додавання інформації в почасти читабельному для людини вигляді є установленою практикою та робиться на випадок, якщо необхідно буде провести перевірку коду людиною через деякий час.

Збережіть шаблон до папки для представлень вашого застосунку та назвіть його bot.jade. Ім'я файлу без розширення (‘bot’) буде першим параметром методу res.render.

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

1

var

2

  express   = require('express'),

3

  app       = express(),

4

5

  nonSPArouter      

6

            = express.Router(),

7

  server;

8

9

nonSPArouter.get('/', function(req,res) {

10

  var

11

    img   = 'placeholder.png';

12

13

  res.render('bot', { 

14

    img       : img,

15

    url       : 'https://bot-social-share.herokuapp.com/',

16

    title     : 'Bot Test', 

17

    descriptionText 

18

              : 'This is designed to appeal to bots',

19

    imageUrl  : 'https://bot-social-share.herokuapp.com/'+img

20

  });

21

});

22

23

app.use(function(req,res,next) {

24

  var

25

    ua = req.headers['user-agent'];

26

27

  if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) {

28

    console.log(ua,' is a bot');

29

    nonSPArouter(req,res,next);

30

  } else {

31

    next();

32

  }

33

});

34

35

app.get('/',function(req,res) {

36

  res.send('Serve SPA');

37

});

38

app.use('/',express.static(__dirname + '/static'));

39

app.set('view engine', 'jade');

40

server = app.listen(

41

  process.env.PORT || 8000,

42

  function() {

43

    console.log('Server started.');

44

  }

45

);

Також зверніть увагу, що я використовую ПЗ проміжного шару express.static для передачі зображень із папки /static.

Налагодження вашого додатку

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

Для початку ви можете протестувати за допомогою інструмента Facebook Debugger. Уведіть вашу URL-адресу та натисніть 'Fetch new scrape information' (* Отримати нову інформацію про URL).

Ви повинні побачити дещо подібне:

Далі ви можете перейти до тестування вашої карточки Twitter за допомогою інструмента Twitter Card Validator. Для використання цього інструмента вам необхідно буде увійти до вашого акаунта Twitter.

Pinterest надає налагоджувач, але цей приклад не буде працювати в тому вигляді, в якому він зараз, оскільки Pinterest дозволяє використовувати «докладні Піни» для усіх URL-адрес, окрім URL-адреси вашої головної сторінки.

Наступні кроки

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

Незважаючи на те, що Pinterest, Facebook та Twitter складають значну долю ринку соціальних мереж, у вас може з'явитися бажання інтегруватися з іншими сервісами. Деякі сервіси дійсно публікують назви своїх веб-роботів для виконання шарінгу контенту в соціальних мережах, а деякі можуть і приховувати. Для визначення агента користувача ви можете використати команду console.log та подивитися на результат у консолі. Спробуйте спочатку зробити це на сервері, не призначеного для публікації вашого сайта для широких мас, оскільки під час визначення агента користувача на високонавантажених сайтах для цього може бути невдалий момент. Після цього ви можете змінити регулярний вираз у нашому ПЗ проміжного шару, щоб відслідкувати і нового агента користувача.

Докладні публікації в соціальних мережах можуть представляти відмінну можливість для приваблення відвідувачів на ваш незвичайний сайт, основою якого є односторінковий додаток. Вибірково спрямовуючи веб-роботів до машинопрочитуваного контенту, ви можете передати їм відповідну інформацію.