Add react-helmet-async package and configure head/og tags

[drikusroor]

This PR adds title, description, meta and structured data information dynamically through react-helmet for experiments.

Whenever you leave an experiment page and go to another page, like an experiment collection page, all tags reset to their original state which is based on the old implementation of using environment variables.

Resolves #834

[BeritJanssen]

Let's discuss when it would be good to merge this. It's a nice feature to have, but I wonder how we'll deal with the fact that with #928, we'll reorganize information. For running something like Toontjehoger, it would be good that every Experiment (will be "Rule") has their own image, but if we move towards embedding every rule in an ExperimentCollection (will be "Experiment"), we'll need to refactor where the og information comes from. Or we hold this PR until after #928, but that's quite a long hold-up.

[drikusroor]

Let's discuss when it would be good to merge this. It's a nice feature to have, but I wonder how we'll deal with the fact that with #928, we'll reorganize information. For running something like Toontjehoger, it would be good that every Experiment (will be "Rule") has their own image, but if we move towards embedding every rule in an ExperimentCollection (will be "Experiment"), we'll need to refactor where the og information comes from. Or we hold this PR until after #928, but that's quite a long hold-up.

Will any of the relevant fields on an Experiment(Rule) be removed in the architectural changes? If not, I think we can keep it for now. Then we at least have the foundational code in the frontend already, which makes it easier to add OG information from other levels later on.

We could also think about fallback information in case information at the current level is not available. For example:

• OG Information at Experiment(Rule) level - Added in this PR & relevant fields exist on model. In case of no information, it falls back to:
• OG Information at Group(Phase) level - Non-existent, but something we can add later. In case of no information, it falls back to:
• OG Information at Collection(Experiment) level - Non-existent, but something we can add later. In case of no information, it falls back to:
• OG Information at site level

Or maybe I understood incorrectly... Do you mean that ideally we'll put the OG information only on the Collection(Experiment) level later on?

[BeritJanssen]

I think that og information should come from the ExperimentCollection level eventually. I think communication (such as sharing the experiment on social networks) will be about the ExperimentCollection, which in most cases just contains just one rule. ExperimentCollection already contains a description. I think in most cases the og_image (on ExperimentCollection level) would be the logo, which may be configured through the theme, and if this is not set, fallback to the site settings (through env variables) is indeed sensible. So perhaps this branch should be adjusted so it points to the ExperimentCollection's description, and logo of the theme (with fallbacks). This will be immediately useful for Toontjehoger, which needs custom og information.