Add Open Graph tags and/or Twitter Card tags to Outreachy Website

[blossomica]

The Outreachy website currently has no Open Graph Protocol (ogp) implementation. That means that when someone shares Outreachy URL on social media, or other third party websites that generate a snapshot of the given URL, it generates a generic snapshot that isn't eye-catching. Here's how we can fix that ->

Basic Implementation

Here are some comments by @sagesharp on how to go about this:

I think the easiest way to add the Open Graph or social cards HTML would be to add a default to the base HTML page with a stock image. Django uses a base HTML page that includes things like the navigation bar. All Outreachy pages use that HTML template as the base. You can find the base HTML template here:

https://github.com/sagesharp/outreachy-django-wagtail/blob/master/outreachyhome/templates/base.html

I don't know exactly what that image would be though. Using the Outreachy logo might work:

https://github.com/sagesharp/outreachy/blob/master/creative-works/outreachy-logo-not-square-no-background.svg

You would need to add the logo to the static images folder here:

https://github.com/sagesharp/outreachy-django-wagtail/tree/master/home/static

Additional Implementation:

As a more complex iteration in addition to what I talked about above, we could add custom social cards images for the blog posts. I try to include a picture in each blog post, and we could use that for the social card image. An example of a blog post with an image is on this post:

https://www.outreachy.org/blog/changes-to-intern-payments/

[sagesharp]

Hi @blossomica! You mentioned that you needed a jpeg or png image. You can use inkscape to export a png image from the svg file.

[blossomica]

@sagesharp - Alright, I'd do that. Thank you!

I tried to set up the environment a couple of times, but I kept getting various errors over and over especially when I run ./manage.py migrate.

I deleted everything and plan to try it all over again. Once I figure that out, hopefully I'd be able to attempt to code.

[blossomica]

@sagesharp - Is it possible you can upload the logo on the server and give me a URL pointing to it like this one? https://www.outreachy.org/media/images/moz-logo-main-rgb.max-200x200.png

There seems to be this existing issue which hasn't been resolved: https://meta.stackexchange.com/questions/264186/meta-should-use-a-full-url-for-its-open-graph-image

Here is the logo converted into png:

[sagesharp]

Hi @blossomica! I've uploaded a 1200x1200 png here: https://www.outreachy.org/media/images/outreachy-open-graph-1200x1200_RjIfgfZ.original.png

If it looks funny on Facebook (because the words are cropped off), feel free to edit the svg and png and send a pull request to the other Outreachy git repo: https://github.com/sagesharp/outreachy

[blossomica]

I checked the thing with the snippets i.e. block code and I don't think that can work because the meta tags need to be in the head, but it seems the block code places the new code in the body.

[sagesharp]

Hi @blossomica! Can this issue be closed? The basic implementation seems to be working well, so unless you want to tackle an improvement, I want to take this out of our issue queue.

[blossomica]

Hi @sagesharp! - I wanted to do the other implementation too for the blog posts but could not get it working.

1. I could not figure out how to get the meta tag appear in the head block of the blog pages instead of the universal one, and

2. how to get the url of the specific blog post to dynamically render on the src section of the meta tag.

If you have any recommendations/guidance of how that can be tackled I'd be glad to give it a shot again. If it is not possible right now, or overly complicated then you can take it out of the queue.