diff --git a/Server/Components/App.razor b/Server/Components/App.razor
index a457eee..ca3a4fa 100644
--- a/Server/Components/App.razor
+++ b/Server/Components/App.razor
@@ -39,11 +39,17 @@
     </script>
     <base href="/" />
    <meta charset="UTF-8" />
-   <title>Mind Map Maker-Syncfusion Blazor Components Showcase App</title>
+   <title>Mind Map Maker - Syncfusion Blazor Components Showcase App</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="The showcase sample application has been built using blazor platform to create diagrams like mind map chart.">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
-   <link href=@Urihelper.Uri rel="canonical" />
+   <link href="https://showcase.syncfusion.com/mind-map-maker/blazor/" rel="canonical" />
+   <meta property="og:title" content="Mind Map Maker - Syncfusion Blazor Components Showcase App" />
+   <meta property="og:description" content="The showcase sample application has been built using blazor platform to create diagrams like mind map chart." />
+   <meta property="og:url" content="https://showcase.syncfusion.com/mind-map-maker/blazor/" />
+   <meta property="og:image" content="@(Urihelper.BaseUri)diagram_component.svg" />
+   <meta property="og:type" content="website" />
+   <meta name="twitter:card" content="summary_large_image" />
    <ResourcePreloader />
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
diff --git a/WASM/MindMap/Components/App.razor b/WASM/MindMap/Components/App.razor
index fc5bed3..11fd70c 100644
--- a/WASM/MindMap/Components/App.razor
+++ b/WASM/MindMap/Components/App.razor
@@ -6,7 +6,7 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <title>Mind Map Maker-Syncfusion Blazor Components Showcase App</title>
+    <title>Mind Map Maker - Syncfusion Blazor Components Showcase App</title>
     <base href="/" />
     <!-- Google Tag Manager -->
     <!-- Load GTM-P3WXFWCW immediately on page load  -->
@@ -42,7 +42,13 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
     <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
-    <link href=@Urihelper.Uri rel="canonical" />
+    <link href="https://showcase.syncfusion.com/mind-map-maker/blazor/wasm/" rel="canonical" />
+    <meta property="og:title" content="Mind Map Maker - Syncfusion Blazor Components Showcase App" />
+    <meta property="og:description" content="The showcase sample application has been built using blazor platform to create diagrams like mind map chart." />
+    <meta property="og:url" content="https://showcase.syncfusion.com/mind-map-maker/blazor/wasm/" />
+    <meta property="og:image" content="@(Urihelper.BaseUri)diagram_component.svg" />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
     <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet">
     <link href="@Assets["assets/db-icons1/style.css"]" rel="stylesheet" />
     <link href="@Assets["assets/dbstyle/diagrambuilder.css"]" rel="stylesheet" />