Клиент нашей компании попросил нас помочь им с проблемой SEO для публикации в фейсбуке. По причинам компании мне пришлось искать самый быстрый способ добиться этого. Платформа представляет собой платформу для социальных мероприятий, интерфейс которой написан на angularJS и размещен на хостинге firebase.

Наша цель состояла в том, чтобы показать подробную информацию о мероприятии при публикации в Facebook. SSR нелегко реализовать с angularJS 1 (по сравнению с современными js-фреймворками), и в любом случае это было явно излишним для этой задачи, поэтому после небольшого исследования я обнаружил, что облачная функция для хостинга firebase - это то, что я искал.

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

Следующим шагом будет создание нашей облачной функции firebase. Поскольку интерфейс использует Typescript, я решил использовать Typescript и в нашей облачной функции для обеспечения согласованности.

Обратите внимание на пару вещей:

  • мы используем промежуточное ПО express, чтобы упростить управление несколькими маршрутами и получение параметров маршрута.
  • мы проверяем текущий пользовательский агент, чтобы узнать, исходит ли запрос от поискового робота facebook

Следующим шагом будет управление ответом:

  • если мы найдем краулер facebook, нам нужно запросить данные о событии на бэкэнде. Для этого мы использовали модуль node-fetch.
  • если мы не найдем сканера fb, все, что нам нужно сделать, это вернуть файл index.html. Поскольку мы используем облачные функции, мы находимся в совершенно иной среде, чем хостинговая платформа. Это немного усложняет доступ к index.html файлу: мы можем получить к нему доступ, запросив файл с node-fetch с хостинга firebase, или мы можем скопировать файл в папку functions. В этом случае я использовал первый подход, хотя он занимает на ~ 250 мс больше.

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

Будущие улучшения: