description content for optimised social sharing

[techievivek]

Problem Description

Add the description content to be shown while sharing the link on Facebook and Twitter.

From the above image, you can see the description part is missing. Only the title and image are shown.

Solution Description

I have already added the image preview feature the only thing that is lacking is the description part that will be shown when any link will be shared.

Helping Hands

You can get the content part of a page/post and then first strip HTML tags to convert into plain text and then get the first 20 words or so to be used in the description part.
Some plugins that you can play with strip-html-tags and markdown-excerpt

Note

Please don't add new fields, use the one that are already implemented, read more about it here

[techievivek]

@kgodey Mam, Please add labels to this issue so that somebody can take it.

[kgodey]

thanks for creating this @techievivek

[nik-gautam]

Can I work on this issue?

[techievivek]

@nik-gautam go ahead.

[nik-gautam]

@techievivek where can I find the latest code with the previous image fixes that you made?

Thanks.

[techievivek]

@nik-gautam Check here #183

[techievivek]

@kgodey Can't we use JavaScript here too to add meta description once the DOM content is loaded rather then going for plugins to strip HTML and get excerpt.
It will be easy to implement.
I have gone through some articles on setting meta data using JS, if we can do before the page loads fully there won't be an issue.
We will wait for @nik-gautam if he has any other plans for same.

[kgodey]

@techievivek could you link the articles you read here?

[nik-gautam]

@techievivek I think will be easier to use javascript.
Till now, I have been trying to fix the issue with strip-html-tags plugin.

A problem that I faced was where to get the info from, because as far I saw there is no common p-tag or any other tag that every page has (which contains the info we want to display), so a common script cannot be ran for all.

Also, my mid-sem exams are going on right now, it will take me a few days to really start coding.

Sorry for the delay.

[techievivek]

@kgodey Here is one they are doing using Jquery https://stackoverflow.com/questions/9231845/javascript-to-change-metadata-metatags-dynamically
(I have not tested this myself for now). There are some speculations that FB doesn't run JS code. And I have gone through some articles looking for its effect on SEO, but luckily google crawlers can run JavaScript.
Here is from their official developer website:- https://developers.google.com/search/docs/guides/javascript-seo-basics
And here is a report generated by searchengineland team https://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

[techievivek]

@nik-gautam All the post/page have content stored in content folder, we can use frontend html-stripping and get first 20 words to be part of meta description tag.
When we do html-stripping it will take care and will return us just the text content.
This is not recommended method as there are speculations that FB wont run JS code, so we will have to test it locally first.

[techievivek]

@nik-gautam @kgodey It might not be possible with JS https://stackoverflow.com/questions/25420887/does-facebook-crawler-currently-interpret-javascript-before-parsing-the-dom
I will try then locally and will confirm by today. Also if this doesn't we will see for alternate with lektor itself.

[nik-gautam]

@techievivek js won't work with Facebook crawler...

I did some research, it turns out that fb gets the data by crawling and looking for og meta tags, before loading the DOM. So, any changes via JavaScript on DOM won't work.

Data has to added before generating the static HTML files in lektor.

[techievivek]

@nik-gautam Yes, I tested it, it's not working. Try doing it with lektor plugins itself.

[nik-gautam]

@techievivek @kgodey I have somewhat fixed the issue.

https://github.com/nik-gautam/creativecommons.github.io-source/tree/description_for_social_media_sharing

Can you check it before I make a PR?

[nik-gautam]

@kgodey @techievivek
Please take a look at this PR.

[techievivek]

@nik-gautam It's good. If possible please add a screenshot so that it will easy to see the end result. @kgodey will be available after Tuesday till then you can look for other issues.