[QA-1342] Fix default SSR tags (#8719)

packages/web/src/components/meta-tags/MetaTags.tsx

@@ -16,6 +16,7 @@ export type MetaTagsProps = {
    */
   ogDescription?: string
   image?: string
+  imageAlt?: string
   canonicalUrl?: string
   structuredData?: object
   noIndex?: boolean
@@ -31,6 +32,7 @@ export const MetaTags = (props: MetaTagsProps) => {
     description,
     ogDescription,
     image,
+    imageAlt,
     canonicalUrl,
     structuredData,
     noIndex = false
@@ -87,6 +89,13 @@ export const MetaTags = (props: MetaTagsProps) => {
         </Helmet>
       ) : null}
 
+      {imageAlt ? (
+        <Helmet encodeSpecialCharacters={false}>
+          <meta name='twitter:image:alt' content={imageAlt} />
+          <meta name='og:image:alt' content={imageAlt} />
+        </Helmet>
+      ) : null}
+
       <Helmet encodeSpecialCharacters={false}>
         <meta property='og:type' content='website' />
         <meta name='twitter:card' content='summary' />

packages/web/src/ssr/index/+onRenderHtml.tsx

@@ -1,11 +1,36 @@
 // For all routes except the explicitly defined ones
 // simply render the SPA without SSR
 
+import { renderToString } from 'react-dom/server'
+import { Helmet } from 'react-helmet'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 
+import { MetaTags } from 'components/meta-tags/MetaTags'
 import { getIndexHtml } from 'ssr/getIndexHtml'
+import { getDefaultSEOFields } from 'utils/seo'
 
 export function render() {
+  const seoMetadata = getDefaultSEOFields()
+
+  const pageHtml = renderToString(
+    <>
+      <MetaTags {...seoMetadata} />
+      <div />
+    </>
+  )
+
+  const helmet = Helmet.renderStatic()
+
   const html = getIndexHtml()
+    .replace(`<div id="root"></div>`, `<div id="root">${pageHtml}</div>`)
+    .replace(
+      `<meta property="helmet" />`,
+      `
+      ${helmet.title.toString()}
+      ${helmet.meta.toString()}
+      ${helmet.link.toString()}
+      `
+    )
+
   return escapeInject`${dangerouslySkipEscape(html)}`
 }

packages/web/src/utils/seo.ts

@@ -164,3 +164,13 @@ export const getCollectionPageSEOFields = ({
     structuredData
   }
 }
+
+export const getDefaultSEOFields = () => ({
+  title: 'Audius - Empowering Creators',
+  description:
+    'Audius is a music streaming and sharing platform that puts power back into the hands of content creators.',
+  ogDescription:
+    'Audius is a music streaming and sharing platform that puts power back into the hands of content creators.',
+  image: 'https://audius.co/ogImage.jpg',
+  imageAlt: 'The Audius Platform'
+})