我正在构建一个角度pwa,我想对其进行一些基本的seo优化。我设置了meta标签,以便在您使用seo服务导航到应用程序中的其他路由时进行更改。然后,我制作了一个使用该函数的firebase云函数。https.onRequest(myFunction)检查该请求是否来自机器人,如果是,则将其发送到rendertron,如果不是,它将把用户发送到我的页面。
我认为我的Firebase云功能出了点问题。它要么没有检测到机器人请求,要么没有正确地将请求发送到rendertron,但是我不确定如何调试它。
我尝试使用firebase serve模拟用户请求页面,并且一切正常。我只是不确定如何模拟本地请求页面的机器人,因此我可以看到发生了什么。我尝试部署该功能并通过在Facebook上共享该功能进行测试,但在Facebook预览中似乎只能看到初始的元标记,而不是已更改的标记。
该服务似乎正常运行。我只是以为我会包括这个,这样您就可以了解如何动态更改元标记。
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'});
}
我怀疑这是问题所在
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);
如果您可以在我的代码或云函数中发现任何错误,那将是非常棒的。如果没有,我正在寻找的是一种在漫游器请求页面时调试该功能的方法。