Add better open-graph support for website previews (twitter cards, linkedin preview, etc)

[michaltrzesimiech]

For now:

• the title are missing
• images are missing
• description is missing

eg

<meta name="description" content="{{ slogan }}">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta property="og:url"           content="https://eahub.org" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="Effective Altruism Hub" />
<meta property="og:image"         content="/img/image.png" />
<link rel="canonical" href="https://eahub.org" />

[viktor-yunenko]

I would say the best practice here is to make the <title> tag extendable, eg

<title>
    {% block page_title %}Default text{% endblock %} - {{ request.site.name }}
</title>

and then extend page_title on every page.

[vagarwalla]

Simple version:

• [ ] Groups
• [ ] Profiles
• [ ] Homepage
• [ ] Individual Group Directory/Group Page

[viktor-yunenko]

in short we need:

• title
• description
• image (we can use the logo here by default)

[vagarwalla]

THIS IS A WIP.

Groups title: EA Groups Directory description: @cafelow Ideas? image: [ea groups map screenshot?]

Profiles title: EA Community Directory description: Connect with the global EA community. image: [picture of the colorful profile images?]

Homepage title: EA Hub description: TBD image: Hub Logo / homepage preview?

Individual Group Directory (filtered view) title: [Full group name] description: [group description from profile] Image: Hub logo

[vagarwalla]

@victor-yunenko How long is the description supposed to be?

[viktor-yunenko]

We can just stick to the common best practices, eg something as https://yoast.com/meta-descriptions/

[vagarwalla]

This is the image preview for eahub.org Just leaving it here for reference.

[viktor-yunenko]

This ticket doesn't have sufficient specification to be a good first issue yet.