如何使用Cloud Functions的Cloud Functions为SEO预呈现页面?

Cha*_*tem 5 seo firebase firebase-hosting google-cloud-functions

对于火力地堡文档的云功能在这里指出,这可以通过使用云计算功能来完成-

预渲染单页应用程序以改善SEO.这允许您创建动态元标记,以便在各种社交网络中共享.

我有两个问题:

  • 有人可以用一个例子解释如何实现预渲染吗?

  • 这与Firebase Hosting一起使用的方法如何?所以,假设我xyz.com/salon/43在Firebase托管中有一个网页,我有一个salon.html,响应此请求.现在为了能够预渲染我应该从托管移动到呈现网页的云功能吗?换句话说,我是从哪里来的

    "rewrites": [{
        "source": "/salon/*",
        "destination": "/salon.html"}]
    
    Run Code Online (Sandbox Code Playgroud)

    "rewrites": [{
        "source": "/salon", "function": "salon"}]
    
    Run Code Online (Sandbox Code Playgroud)

dot*_*ot3 6

两个任务: - 将函数添加到主机重写中,如示例所示 - 编写函数以生成html页面

本教程提供了一个很好的示例,以下功能作为示例来自更长的代码段:

const admin = require('firebase-admin');

function buildHtmlWithPost (post) {
  const string = '<!DOCTYPE html><head>' \
    '<title>' + post.title + ' | Example Website</title>' \
    '<meta property="og:title" content="' + post.title + '">' \
    '<meta property="twitter:title" content="' + post.title + '">' \
    '<link rel="icon" href="https://example.com/favicon.png">' \
    '</head><body>' \
    '<script>window.location="https://example.com/?post=' + post.id + '";</script>' \
    '</body></html>';
  return string;
}

module.exports = function(req, res) {
  const path = req.path.split('/');
  const postId = path[2];
  admin.database().ref('/posts').child(postId).once('value').then(snapshot => {
    const post = snapshot.val();
    post.id = snapshot.key;
    const htmlString = buildHtmlWithPost(post);
    res.status(200).end(htmlString);
  });
};
Run Code Online (Sandbox Code Playgroud)


Vin*_*lho 5

首先,对不起我糟糕的英语。

通过深网搜索(开玩笑)后,我找到了解决方案。最酷的解决方案是我能够使用 Cloud Functions 将我的 Pioneer Ionic 应用程序与 Firebase Hosting 集成。

阅读以下主题后:

https://github.com/firebase/firebase-tools/issues/33

@TheRoccoB 用户解释了如何在 Firebase 托管中托管静态 Web 应用程序并将流量从 URL 重定向到 Cloud Functions。

我所做的是将我必须索引的路线映射为:

{
    "source": "/ shop / **",
    "function": "ssr"
},
{
    "source": "/ * / promotions / **",
    "function": "ssr"
}
Run Code Online (Sandbox Code Playgroud)

因为“ssr”是我在 Cloud Functions 中的函数的名称。所以我使用库https://github.com/prerender/prerender-node来检查请求是否来自谷歌爬虫,以防我将请求重定向到https://github.com/prerender/prerender服务器。

const prerender = express ();
prerender.use (cors);
prerender.use (
    require ('prerender-node')
    // .set ('prerenderServiceUrl', 'http: // localhost: 3000')
    .set ('prerenderToken', '** TOKEN **')
);
prerender.use (require ('prerender-node'). set ('beforeRender', function (req, done) {
    // do you need to do?
    console.log ('Rendering URL:', req.path);
done ();
}));
prerender.use (require ('prerender-node') set ('afterRender', function (err, req, prerender_res) {
    // do you need to do?
    console.log (req.path + 'rendering completed!');
    console.log ('Errors:', err);
}));
prerender.get ('*', (req, res) => {
    console.log ('Calling function for URL:', req.path);
    res.set ('Cache-Control', 'public, max-age = 300, s-maxage = 600');
    res.status (200) .send (fs.readFileSync ('./ www / index.html'). toString ());
});
exports.ssr = functions.https.onRequest (prerender);
Run Code Online (Sandbox Code Playgroud)