如何使用 Cloud Functions for Firebase 为 SEO 预渲染页面？

Question

Cloud Functions for Firebase 文档 here 指出这可以使用云函数来完成 -

Prerendering for single page apps to improve SEO. This allows you to create dynamic meta tags for sharing across various social networks.

我有两个问题：

谁能举例说明预渲染是如何实现的？
这如何与 Firebase 托管结合使用？所以假设我在 xyz.com/salon/43 有一个网页，在 Firebase 托管中我有一个 salon.html 是为了响应这个请求而提供的。现在为了能够预呈现，我应该从托管转移到呈现网页的云功能吗？换句话说，我是从
```
"rewrites": [{
    "source": "/salon/*",
    "destination": "/salon.html"}]
```
到
```
"rewrites": [{
    "source": "/salon", "function": "salon"}]
```

Answer 1

您是对的，您有效地重写了应用程序的 HTML 页面以指向函数而不是静态文档。然后，当访问该页面时，您的函数将有效地生成发送回浏览器的 HTML。您正在借此机会决定 HTML 的内容应该是什么。

如果不需要在每次访问时都生成内容（根据 pricing page), you'll also probably want to make use of caching 上显示的计费率，每次访问都需要付费，以消除从Firebase 托管 CDN。

Answer 2

两个任务： - 将函数添加到您的托管重写中，如您的示例所示 - 编写生成html页

的函数

This tutorial 提供了一个很好的示例，以下函数作为来自较长代码段的示例：

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);
  });
};

Answer 3

首先，抱歉我的英语不好。

经过深网搜索（开玩笑），我找到了解决方案。最酷的解决方案是我能够使用 Cloud Functions 将我的 Pioneer Ionic 应用程序与 Firebase 托管集成。

阅读以下主题后：

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

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

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

{
    "source": "/ shop / **",
    "function": "ssr"
},
{
    "source": "/ * / promotions / **",
    "function": "ssr"
}

因为 "ssr" 是我在 Cloud Functions 中的函数名称。所以我使用了库 https://github.com/prerender/prerender-node to check if the request is from a google crowler, in case I redirect the request to a https://github.com/prerender/prerender server.

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);

如何使用 Cloud Functions for Firebase 为 SEO 预渲染页面？

How to use Cloud Functions for Firebase to prerender pages for SEO?

seo

firebase

firebase-hosting

google-cloud-functions