Repository navigation
Implement Open Graph protocol to increase social media presence #25
Description
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
layoutcomponent and other pages to place head section appropriately. - Implement OGP on the existing pages.
- Extend OGP to blog posts and modules.
Activity
ANURADHAJHA99 commentedon Oct 9, 2019
I would like to work on the following issue. Thank you very much.
GraceChiamaka commentedon Oct 10, 2019
@ANURADHAJHA99 are you working on this?
ANURADHAJHA99 commentedon Oct 10, 2019
@GraceChiamaka Yes, I am working on it.
ANURADHAJHA99 commentedon Oct 13, 2019
@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 commentedon Oct 14, 2019
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 commentedon Oct 14, 2019
can we use OGP in markdown modules?
majordwarf commentedon Oct 14, 2019
Nope, we currently have 200+ modules. Updating each
README.mdwith 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 commentedon Oct 14, 2019
I updated the about component, with basic metadata, am I doing it correctly?
majordwarf commentedon Oct 14, 2019
No, the only thing that needs to change is the
layoutcomponent and all the other pages, posts pages passing props back to parent to avoid writing the same boilerplate code again and again.So the
layoutwill 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 commentedon Oct 14, 2019
Ok, got it now! Thank you very much for your help.
ANURADHAJHA99 commentedon Oct 14, 2019
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 commentedon Oct 14, 2019
we have to add states within the highlighted component? I am sorry to continuously disturb, I am learning and working on it.
majordwarf commentedon Oct 14, 2019
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 commentedon Oct 14, 2019
so we are suppose to change the props in the blog.jsx and post.jsx?
ANURADHAJHA99 commentedon Oct 14, 2019
Essentially I meant, we are supposed to introduce OGP metadata in the blog template and post template?
majordwarf commentedon Oct 14, 2019
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 commentedon Oct 14, 2019
There are many other components within the layout components, what should I do to them?
majordwarf commentedon Oct 15, 2019
Every child component needs to have the tags as said earlier.
soloturn commentedon Nov 11, 2026
Covered on the Astro site: the head is rendered in by the layout, with Open Graph and Twitter tags per page including blog posts (title, description, URL). #267 adds the remaining og:type and og:image, using the post cover for blog posts. Closing now, with #267 pending merge.