Клиент нашей компании попросил нас помочь им с проблемой 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, и вы должны увидеть правильные данные о событиях.
Будущие улучшения:
- интегрировать услугу предварительной обработки
- переместите
index.html
в папку функций. - настроить конечные точки множественной конфигурации среды