firebase - 如何使用 Cloud Functions for Firebase 为 SEO 预渲染页面?

标签 firebase seo google-cloud-functions firebase-hosting

Firebase 文档的 Cloud Functions 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"}]
    

最佳答案

两个任务: - 将函数添加到您的托管重写中,如您的示例所示 - 编写生成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);
  });
};

关于firebase - 如何使用 Cloud Functions for Firebase 为 SEO 预渲染页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44301989/

相关文章:

arrays - 仅在匹配当前用户数据时获取用户数据

javascript - Firebase 时间戳返回错误日期 - Javascript

java - 我的 onChildAdded() 在使用 Firebase Push() 时有效,但在更新时无效

node.js - Firebase云函数: how to retrieve a file from an FTP account and download it in the browser

javascript - 使用箭头函数的 forEach sum 在 Firebase 实时数据库中给出了意外的结果

android - Flutter:应用程序在热重载后不断回到初始路线

.htaccess - 自定义 404 错误页面问题

html - 多个 rel 属性

seo - 删除所有 http ://www. example.com 但保留没有 www 的 http ://example. com

flutter - 如何在 Flutter 中调用可调用的 v2 云函数?