Merge pull request #1282 from blocknative/update-meta-data

gesquinca · web-flow · commit e434fadd98f1 · 2022-09-23T15:32:09.000-04:00
add meta tags to homepage
diff --git a/docs/src/app.html b/docs/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link rel="icon" type="image/x-icon" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
 
diff --git a/docs/src/lib/components/SEO/OpenGraph.svelte b/docs/src/lib/components/SEO/OpenGraph.svelte
@@ -0,0 +1,21 @@
+<script>
+  export let image;
+  export let metadescription;
+  export let pageTitle;
+  export let url;
+  export let siteTitle;
+  export let ogLanguage;
+</script>
+
+<svelte:head>
+  <meta property="og:site_name" content={siteTitle} />
+  <meta property="og:locale" content={ogLanguage} />
+  <meta property="og:url" content={url} />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content={pageTitle} />
+  <meta property="og:description" content={metadescription} />
+  {#if image}
+    <meta property="og:image" content={image.url} />
+    <meta property="og:image:alt" content={image.alt} />
+  {/if}
+</svelte:head>
diff --git a/docs/src/lib/components/SEO/Twitter.svelte b/docs/src/lib/components/SEO/Twitter.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let image;
+  export let metadescription;
+  export let pageTitle;
+  export let url;
+</script>
+
+<svelte:head>
+  <meta property="twitter:card" content="summary_large_image" />
+  <meta property="twitter:title" content={pageTitle} />
+  <meta property="twitter:description" content={metadescription} />
+  <meta property="twitter:url" content={url} />
+  {#if image}
+    <meta name="twitter:image" content={image.url} />
+    <meta name="twitter:image:alt" content={image.alt} />
+  {/if}
+</svelte:head>
diff --git a/docs/src/lib/components/SEO/index.svelte b/docs/src/lib/components/SEO/index.svelte
@@ -0,0 +1,32 @@
+<script>
+  import OpenGraph from './OpenGraph.svelte';
+  import Twitter from './Twitter.svelte';
+
+  export let metadescription;
+  export let title;
+  export let url;
+
+  export let image = {
+    url: 'https://onboard.blocknative.com/blocknative-onboard-og-image.png',
+    alt: 'Web3-Onboard Connect Wallet Button'
+  }
+
+  const twitterProps = {
+    image,
+    metadescription,
+    pageTitle: title,
+    url
+  }
+
+  const openGraphProps = {
+    siteTitle: title,
+    ogLanguage: 'en_us',
+    image,
+    metadescription,
+    pageTitle: title,
+    url
+  }
+</script>
+
+<Twitter {...twitterProps} />
+<OpenGraph {...openGraphProps} />
diff --git a/docs/src/routes/__layout-homepage.svelte b/docs/src/routes/__layout-homepage.svelte
@@ -11,8 +11,8 @@
   import '$lib/styles/kit-docs.css'
 
   import { KitDocs, KitDocsLayout, SocialLink } from '@svelteness/kit-docs'
-
   import IconBN from '$lib/components/icons/blocknative.svelte'
+  import SEO from '$lib/components/SEO/index.svelte';
 
   /** @type {import('@svelteness/kit-docs').NavbarConfig} */
   const navbar = {
@@ -24,19 +24,26 @@
     ]
   }
 
-  let title = 'Web3-Onboard Docs'
-  let description = 'Web3-Onboard Documentation'
+  const title = 'Web3-Onboard | The easy way to connect web3 users to dapps'
+  const metadescription = 'Open-source, framework-agnostic JavaScript library to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection, real-time transaction states, and more.'
+  const url = 'https://onboard.blocknative.com/'
 </script>
 
 <svelte:head>
   {#if title}
     <title>{title}</title>
   {/if}
-  {#if description}
-    <meta name="description" content={description} />
+  {#if metadescription}
+    <meta name="description" content={metadescription} />
   {/if}
 </svelte:head>
 
+<SEO
+ {title}
+ {metadescription}
+ {url}
+/>
+
 <KitDocs>
   <KitDocsLayout {navbar} --kd-content-max-width={'100%'}>
     <div slot="navbar-left">
diff --git a/docs/static/blocknative-onboard-og-image.png b/docs/static/blocknative-onboard-og-image.png
