fix: use absolute url for og:image tag (#270)

* fix: use absolute url for og:image tag

* fix: open graph tags are under property instead of name

* refactor: use vercel env to read site url

* fix: try again with hardcoded url

Author: Balastrong

app/routes/__root.tsx

@@ -40,7 +40,7 @@ export const Route = createRootRouteWithContext<{
     ...seo({
       title: 'TanStack | High Quality Open-Source Software for Web Developers',
       description: `Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.`,
-      image: ogImage,
+      image: `https://tanstack.com${ogImage}`,
       keywords:
         'tanstack,react,reactjs,react query,react table,open source,open source software,oss,software',
     }),

app/utils/seo.ts

@@ -17,14 +17,14 @@ export const seo = ({
     { name: 'twitter:description', content: description },
     { name: 'twitter:creator', content: '@tannerlinsley' },
     { name: 'twitter:site', content: '@tannerlinsley' },
-    { name: 'og:type', content: 'website' },
-    { name: 'og:title', content: title },
-    { name: 'og:description', content: description },
+    { property: 'og:type', content: 'website' },
+    { property: 'og:title', content: title },
+    { property: 'og:description', content: description },
     ...(image
       ? [
           { name: 'twitter:image', content: image },
           { name: 'twitter:card', content: 'summary_large_image' },
-          { name: 'og:image', content: image },
+          { property: 'og:image', content: image },
         ]
       : []),
   ]