Add social media meta tags in blog post page (#4948)

* make changes in the blog templates

* Add the inline styles to website.less
I also tweaked the design a bit, added h1 for header and increased the spacing a bit.

* Remove inline style and add css to less file

also added some spacing to make the blogpost look good by default.

* make the headings bold

* Add meta tags for social media in blog post page

.gitignore

@@ -11,6 +11,8 @@ build/
 frappe/docs/current
 .vscode
 node_modules
+.kdev4/
+*.kdev4
 
 
 # Not Recommended, but will remove once webpack ready

frappe/templates/includes/meta_block.html

@@ -1,5 +1,11 @@
 {%- if metatags -%}
 {%- for name in metatags %}
-<meta name="{{ name }}" content="{{ metatags[name]|striptags|escape }}" data-html-block="meta_block">
+<meta {% if name == 'og:title' or name == "og:image" or name == "og:type" or name == "og:description" %} property="{{ name }}" {% else %} name="{{ name }}" {% endif %}  content="{{ metatags[name]|striptags|escape }}" data-html-block="meta_block">
 {%- endfor -%}
+<meta property="og:url" content="{{ frappe.utils.get_url(path) }}"></meta>
+<meta itemprop="datePublished" content="{{ frappe.format_date(published_on) }}"></meta>
+<meta itemprop="author" content="{{ blogger }}"></meta>
+<meta itemprop="name" content="{{ name }}" data-html-block="meta_block">
+<meta itemprop="description" content="{{ description }}" data-html-block="meta_block">
+<meta itemprop="image" content="{{ frappe.utils.get_url(metatags["image"]) }}" data-html-block="meta_block">
 {%- endif -%}

frappe/website/context.py

@@ -189,7 +189,7 @@ def add_metatags(context):
 	tags = context.get("metatags")
 	if tags:
 		if not "twitter:card" in tags:
-			tags["twitter:card"] = "summary"
+			tags["twitter:card"] = "summary_large_image"
 		if not "og:type" in tags:
 			tags["og:type"] = "article"
 		if tags.get("name"):
@@ -197,5 +197,5 @@ def add_metatags(context):
 		if tags.get("description"):
 			tags["og:description"] = tags["twitter:description"] = tags["description"]
 		if tags.get("image"):
-			tags["og:image"] = tags["twitter:image:src"] = tags["image"]
-
+			tags["og:image"] = tags["twitter:image:src"] = tags["image"] = frappe.utils.get_url("image")
+        

frappe/website/doctype/blog_post/templates/blog_post.html

@@ -1,11 +1,9 @@
 {% extends "templates/web.html" %}
-
+{% include "templates/includes/meta_block.html" %}
 {% block page_content %}
 
 <div class="blog-container">
 <article class="blog-content" itemscope itemtype="http://schema.org/BlogPosting">
-	<meta itemprop="datePublished" content="{{ frappe.format_date(published_on) }}"></meta>
-	<meta itemprop="author" content="{{ full_name }}"></meta>
 	<!-- begin blog content -->
 	<div class="blog-info">
 	<h1 itemprop="headline" class="blog-header">{{ title }}</h1>