Implement Open Graph protocol to increase social media presence

[majordwarf]

Open Graph protocol (OGP) gives you control of how website/page specifc data travels to third-party sites. Providing much better social media presence along with optimized SEO. Right now we are using Helmet to do manage the head and meta tags for the pages. The main layout component would require some restructuring along with additional changes to other pages to implement OGP as currently the head is being rendered inside body, which works but is a bad practice.

You can learn more about OGP here.

---

Things to be done:

• [ ] Restructure layout component and other pages to place head section appropriately.
• [ ] Implement OGP on the existing pages.
• [ ] Extend OGP to blog posts and modules.

[ANURADHAJHA99]

I would like to work on the following issue. Thank you very much.

[GraceChiamaka]

@ANURADHAJHA99 are you working on this?

[ANURADHAJHA99]

@GraceChiamaka Yes, I am working on it.

[ANURADHAJHA99]

@majordwarf I was going through the layout component and started working on introducing OGP, but I am having certain issues understanding how should I introduce the basic metadata? Can you please provide me a small example, or help me understand it?

[majordwarf]

You can look at how meta-data for blog and modules are stored in their respective markdown files as frontmatter. We need to implement OGP to take that data dynamically to make the shared post on social media with appropriate metadata being shown.

[ANURADHAJHA99]

can we use OGP in markdown modules?

[majordwarf]

Nope, we currently have 200+ modules. Updating each README.md with their respective meta-data manually is a tedious task. The main purpose of this project was to automate as many as tasks possible and to reduce manual effort. Also, the OpenGraph tags won't be generated inside the markdown file. it's just the wrong heirarchy of tags even if they are generated. We want the tags to be generated inside the head of every page. The content of the markdown is used to go inside the body not inside the head.

[ANURADHAJHA99]

I updated the about component, with basic metadata, am I doing it correctly?

[majordwarf]

No, the only thing that needs to change is the layout component and all the other pages, posts pages passing props back to parent to avoid writing the same boilerplate code again and again.

So the layout will contain variables that will replace the OpenGraph meta-tags' content. During the build, the child component will pass some variables back to the parent to replace the variables.

[ANURADHAJHA99]

Ok, got it now! Thank you very much for your help.

[ANURADHAJHA99]

Sorry, I have a doubt, we are suppose to pass the child header component with the variables in the layout component such that it replaces the variable in the header parent component?

[ANURADHAJHA99]

we have to add states within the highlighted component? I am sorry to continuously disturb, I am learning and working on it.

[majordwarf]

This layout contains Helmet as stated in the first message of the issue itself. It handles how meta-data tags are handled on the website. Currently all I had in mind was to pass props from child like the blog template, post template to the current layout component and that will fill out the variables in Helment component. But not having actually work on it, it might still needs some research. If passing props won't work we might have to rewrite the templates written already.

[ANURADHAJHA99]

so we are suppose to change the props in the blog.jsx and post.jsx?

[ANURADHAJHA99]

Essentially I meant, we are supposed to introduce OGP metadata in the blog template and post template?

[majordwarf]

Yes but if you want to directly implement OGP in their respective template, they will need restructuring. Eliminating the need for layout component in them. Or else pass some props to layout if you're using the layout component.

[ANURADHAJHA99]

There are many other components within the layout components, what should I do to them?

[majordwarf]

Every child component needs to have the tags as said earlier.