feat: add meta tags for Wiki Page

[nikkothari22]

This PR adds the following meta tags in every Wiki page:

1. Description
2. Keywords
3. Image
4. Image width and height defaults to 1200 by 630px - this is needed for Facebook Open Graph

Hopefully doing this will now allow us to find documentation from Google by improving page rankings.

I wasn't able to figure out how to add these fields in the web page editor. Maybe someone can help me with that.

#97 should be partially done with this.

[ankush]

Mostly LGTM, perhaps these should have UI too? 👁️

relevant code: https://github.com/frappe/frappe/blob/develop/frappe/templates/includes/meta_block.html

[nikkothari22]

Mostly LGTM, perhaps these should have UI too? 👁️

UI for meta tags? I didn't get you 😅

[ankush]

UI for meta tags? I didn't get you sweat_smile

Wiki is meant to be used from its frontend using "wiki page patches" and not the Desk interface. Though this is just meta info that not everyone understands or needs to edit.

[nikkothari22]

I wasn't able to figure out how to add these fields in the web page editor. Maybe someone can help me with that.

Yeah I wasn't able to connect fields in the frontend editor with the doctype 😄

[ankush]

merging as is for now. If someone cares about modifying this from client side, feel free to send PR. 😬

TBH I was thinking of UI rewrite to use frappe-ui so this will be easier in future. jquery + HTML attribute based state management is so '00s 😩

[nikkothari22]

I thought of recreating the entire Wiki/Docs app using a modern frontend tool.

Problem with making a SPA however is that it sucks for SEO - something that a documentation tool definitely needs.

I'm looking into SSR, or even SSG for that matter, to create a documentation site with a Frappe backend. (Probably NextJS, or Remix)

Some of the features I am thinking of:

1. Copy button for code blocks 😅
2. API blocks with direct links to open in Postman/Hoppscotch
3. Multi language tabbed code blocks (let's say a REST API call in common languages)
4. An actual page builder (with markdown support) so that it's easy to build these pages.
5. Command palette search - with more emphasis on keyword search rather than just page titles.

Most documentation sites can actually be statically served (especially public ones) - so they can be generated during build time. Obviously in our case, we would use Frappe as a CMS - so it would be built everytime the content is updated. Or we could just use SSR for it, but that's a little unnecessary for docs.

Let me know if you have any more ideas about this.

In the meantime, can someone give me access to the Wiki module of the Frappe documentation so that I can add these keywords? None of the pages actually show up on Google 😅

[NagariaHussain]

Let me know if you have any more ideas about this.

We are using vitepress for our own books and insights documentation 🙈

It is quite good, you may want to give it a try.

https://github.com/frappe/books_docs

https://github.com/nextchamp-saqib/insights_docs

[NagariaHussain]

can someone give me access to the Wiki module of the Frappe documentation so that I can add these keywords?

Sure, you can add something and send an approval request, we will give you auto-approve then.

[NagariaHussain]

I thought of recreating the entire Wiki/Docs app using a modern frontend tool.

Maybe we can build Next-gen frappe wiki on vitepress 😅