Support OGP on catalog pages for Facebook and Twitter

[yoichiro]

Currently, each catalog page has meta tags for OGP. However, their tags are generated dynamically by JavaScript, therefore Facebook and Twitter crawler can't get them.

[yoichiro]

To support OGP tags for each keyboard catalog page, I thought the following architecture:

1. A user accesses to the /catalog/:definitionId on his/her Web browser.
2. The new Firebase Functions catalog handles the request.
3. The function retrieves the keyboard information according to the definitionId value included in the path, then generates an index.html content which has meta tags reflected the keyboard information and sends it as the response.
4. The index.html content has a script location.href = /_catalog/:definitionId to redirect from /catalog to /_catalog. Because, the index.html content doesn't have any React script code.
5. The user's Web browser loads the index.html content, and it redirects to the /catalog/:definitionId. As the result, the React script code is loaded and executed.
6. The catalog page is rendered.

[yoichiro]

Facebook Share Debugger said that the OGP information from the keyboard catalog page can be fetched.

[yoichiro]

@adamrocker and I discussed about the architecture of this feature again. As the result, we decided that we should apply more simple architecture than current it. I intend to change the architecture like the following:

1. Receive /catalog/123 requests with the Firebase Functions.
2. In the function, fetch the HTML content of the index.html from the https://remap-keys.app.
3. Retrieve the keyboard definition ID from the request path, and fetch the keyboard information from Firestore with the ID.
4. Replace each meta tag in the HTML content with the keyboard information.
5. Send the result above.

Pros: we don't need the /_catalog path and the redirecting.