2017-06-01 5 views
1

Die Cloud-Funktionen für die Dokumentation Firebase here besagt, dass diese Funktionen mit Cloud getan werden kann -Wie kann ich Cloud-Funktionen für Firebase verwenden, um Seiten für SEO vorzureinigen?

Prerendering für einzelne Seite apps SEO zu verbessern. Auf diese Weise können Sie dynamische Meta-Tags für die Freigabe in verschiedenen sozialen Netzwerken erstellen.

Es gibt zwei Fragen, die ich habe:

  • jemand mit einem Beispiel erklären kann, wie Pre-Rendering erreicht wird?

  • Wie funktioniert das in Verbindung mit Firebase Hosting? Nehmen wir an, ich habe eine Webseite unter xyz.com/salon/43 und in Firebase-Hosting habe ich eine salon.html, die als Antwort auf diese Anfrage serviert wird. Um nun prerender zu werden, sollte ich vom Hosting zu einer Cloud-Funktion wechseln, die die Webseite rendert? Mit anderen Worten gehe ich aus

    "rewrites": [{ 
        "source": "/salon/*", 
        "destination": "/salon.html"}] 
    

    zu

    "rewrites": [{ 
        "source": "/salon", "function": "salon"}] 
    

Antwort

2

zwei Aufgaben: - Fügen Sie die Funktion auf Ihre Hosting-Rewrite wie in Ihrem Beispiel - die Funktion Schreiben Sie eine HTML-Seite

This tutorial bietet ein großartiges Beispiel, mit der folgenden Funktion als ein Beispiel von einem längeren zu erzeugen Schnipsel:

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

Sie richtig sind, effektiv Sie Ihre App-HTML-Seite neu zu schreiben, um eine Funktion zu Punkt statt eines statischen Dokuments. Wenn auf diese Seite zugegriffen wird, generiert Ihre Funktion den HTML-Code, der zurück an den Browser gesendet wird. Sie ergreifen diese Gelegenheit, um in diesem Moment zu entscheiden, was der Inhalt des HTML sein soll.

Wenn der Inhalt nicht bei jedem einzelnen Zugriff generiert werden muss (jeder kostet Geld gemäß den Abrechnungsraten, die auf pricing page angezeigt werden), möchten Sie wahrscheinlich auch caching verwenden, um zu beseitigen zu dienen im Cache gespeicherte, vorgerenderte Inhalte von den Firebase-Hosting-CDNs.

Verwandte Themen