Проблема
Я создаю угловой pwa, и я хотел сделать несколько основных SEO-оптимизаций на нем.Я настроил метатеги, чтобы они менялись при переходе по разным маршрутам в приложении с помощью SEO-сервиса.Затем я создал облачную функцию firebase, которая использует functions.https.onRequest (myFunction), чтобы проверить, поступил ли запрос от бота, и, если это так, отправить его на rendertron, если не отправляет пользователя на мою страницу.
Я думаю, что-то не так с моей облачной функцией Firebase.Либо он не обнаруживает запросы ботов, либо неправильно отправляет запрос на rendertron, но я не уверен, как это отладить.
Я пытался использовать firebase serve для симуляции пользователя, запрашивающего страницу, и все работает отлично.Я просто не уверен, как имитировать бот, запрашивающий страницу локально, чтобы я мог видеть, что происходит.Я попытался развернуть функцию и протестировать ее, поделившись ею на Facebook, но предварительный просмотр Facebook, кажется, видит только начальные мета-теги, а не теги, которые были изменены.
Сервис SEO
СервисКажется, работает нормально.Я просто подумал, что включу это, чтобы вы могли понять, как я динамически меняю свои метатеги.
import { Injectable } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { SeoConfig } from '../interfaces/seo-config.interface';
@Injectable({
providedIn: 'root'
})
export class SeoService {
constructor(private meta: Meta) { }
generateTags(config: SeoConfig) {
config = {
title: 'my default site title here...',
description: 'my default description here...',
image: 'my default path to image here...',
slug: '',
...config
}
this.meta.updateTag({ property: 'og:title', content: config.title});
this.meta.updateTag({ property: 'og:description', content: config.description});
this.meta.updateTag({ property: 'og:image', content: config.image});
this.meta.updateTag({ property: 'og:url', content:`https://paradigmShift.app/${config.slug}`});
this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image'});
}
Облачная функция Firebase
Здесь я подозреваю, чтопроблема в
const functions = require('firebase-functions');
const express = require('express');
const fetch = require('node-fetch');
const url = require('url');
const app = express();
const cors = require('cors')
const appUrl = 'my domain here';
const renderUrl = 'https://render-tron.appspot.com/render';
function generateUrl(request) {
return url.format({
protocol: request.protocol,
host: appUrl,
pathname: request.originalUrl
});
}
function detectBot(userAgent) {
const botList = 'baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|slackbot|facebot|developers\.google\.com\/\+\/web\/snippet\/'.toLowerCase();
if (userAgent.toLowerCase().search(botList) != -1) {
return true;
} else {
return false;
}
}
app.use(cors());
app.get('*',(req, res) => {
const isBot = detectBot(req.headers['user-agent']);
if (isBot) {
const botUrl = generateUrl(req);
console.log('bot detected', botUrl);
fetch(`${renderUrl}/${botUrl}`)
.then(res => res.text())
.then(body => {
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
res.set('Very', 'User-Agent');
res.send(body.toString());
});
} else {
console.log('no bot detected', appUrl);
fetch(`${appUrl}`)
.then(res => res.text())
.then(body => {
console.log(body.toString());
res.send(body.toString());
});
}
});
exports.app = functions.https.onRequest(app);
Если вы обнаружите какие-либо ошибки в моем коде или облачной функции, это было бы здорово.Если нет, то я ищу метод отладки функции, когда бот запрашивает страницу.