URL Rewrite based on User-Agent header

Question

You can optimize content by delivering only Open Graph meta tags to the crawler and only the content itself to regular users. [source]

I'm trying to identify Facebot(Facebook's crawler) so I can serve it the meta tags. To do that, I'll need to be able to do rewrites based on User-Agent header.

I went through the Firebase documentation, but it seems to me that I can only do rewrites based on request url.

Another approach that comes to mind is to decide which content to serve within a firebase function. But I can't figure out how to fall back to index.html from a firebase function.

So in short: How would you serve the Open Graph tags just to Facebot using the Firebase ecosystem?

Noooooooooooooo! They mention you can do this with cloud functions, but really struggling to figure out how to do this properly. — RoccoB, Oct 30 '17 at 22:46
What service did you end up using? I've been trying to do a similar thing involving redirecting certain user agents. — Alex Dueppen, Aug 13 '19 at 18:06
@AlexDueppen AWS Lambda and lambda@edge. We manage the infrastructure via the Serverless framework — Daniel Birowsky Popeski, Aug 13 '19 at 20:40
Looking for the same exact thing, because my app is angular+ionc, and the index.html is static. Facebot isn't rendering the page, just getting index.html… Meanwhile I've set up a dummy subdomain on an apache server, and with htaccess I redirect bots to an opengraph-generating page, and other clients to the real page. Not ideal, but at least I get previews… feel free to yell at me or to suggest the real solution — Arno Teigseth, Jul 30 '20 at 04:28

score 1 · Answer 1 · answered May 27 '22 at 08:37

1

For anyone still looking for a solution to this: Here is how I currently check whether a user agent is from facebook:

const agent = request.headers["user-agent"]

if (agent.toLowerCase().includes("facebook"))
    response.send(<payload>)
else
    response.redirect(<path-to-index.html>)

The request / response variables are the ones, received through functions.https.onRequest((request, response) => { ... }). For more information, check the Firebase Docs and Express Docs.

answered May 27 '22 at 08:37

tim

171
6

1

But that means you're catching ALL the requests in your function, and redirecting back to index only those that don't match the bot. That's a useless extra request for a regular non-bot user. – maganap Jun 24 '22 at 11:46
@maganap Yes, you are right. In my app I use express to render a view, rather than redirecting the request. However, this requires express to be able to access the html files (check out [this answer](https://stackoverflow.com/questions/4529586/render-basic-html-view) for the express setup). – tim Jun 25 '22 at 12:33
@maganap but you may as well, within that index.html, return information that you would have required a Cloud Function call later to retrieve. Ofc this implies modifying the index.html file before sending it. For example: when the user visits a profile you can retrieve the first name, last name, ... from your db in your cloud function and prevent making one more Cloud Function call to retrieve that info (which you need on the frontend anyway). As long as you don't take too long to load that information, so you don't hurt UX by increasing load times too much – josue.0 Dec 07 '22 at 06:43

URL Rewrite based on User-Agent header

1 Answers1