[Feature] Embed SEO

[kilemensi]

Description

Render the chart image/screenshot server-side and include the necessary SEO information for social media sharing. This eliminates the need to screenshot the charts on client-side.

NOTE: Seems like Vercel has issues with node-canvas: Automattic/node-canvas#1394. We may need to deploy this to dokku for server-side image generation to work.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Screenshots

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/codeforafrica/pesayetu/BHfxzyUmJgcoYrqs8TpGhi28Ymbc
✅ Preview: https://pesayetu-git-feature-embedseo-codeforafrica.vercel.app

[KobbyMmo]

looks good @kilemensi
maybe not entirely related, but how do we plan to handle multi-chart with the current embed structure

[kilemensi]

looks good @kilemensi maybe not entirely related, but how do we plan to handle multi-chart with the current embed structure

Duuude... You just can't give a brother some props, can you? Give me my ✅ already @KobbyMmo!

To answer your question, you're 💯 on the mark, we should also handle multi-charts in embed but we can only look into it once #122 is approved and merged. At the moment, my plan is to go with one of:

1. /embed/<geoCode>-<geoCode>/<chartId>-<slug-for-seo-like-population-by-age>, or
2. move embeds into /explore folder and go with /explore/<geoCode>/<chartId>-<slug-for-seo-like-population-by-age> for single viz and /explore/<geoCode>-<geoCode>/<chartId>-<slug-for-seo-like-population-by-age> for multi viz. This limits all HURUmap functionality under /explore which is kinda cool I think.

PS: For SEO, may be we should also augment current /explore location pages with <slug-for-seo> e.g. /explore/47 is pretty non-descriptive compared to /explore/47-nairobi.

[KhadijaMahanga]

this looks good 🚀 🚀

[KobbyMmo]

here is some rock music @kilemensi
🪨 🎹