diff --git a/packages/web/src/components/meta-tags/MetaTags.tsx b/packages/web/src/components/meta-tags/MetaTags.tsx
index cf1d07546a4..caf5a192d5d 100644
--- a/packages/web/src/components/meta-tags/MetaTags.tsx
+++ b/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) => {
) : null}
+ {imageAlt ? (
+
+
+
+
+ ) : null}
+
diff --git a/packages/web/src/ssr/index/+onRenderHtml.tsx b/packages/web/src/ssr/index/+onRenderHtml.tsx
index 430493c969d..7af4cc29c7f 100644
--- a/packages/web/src/ssr/index/+onRenderHtml.tsx
+++ b/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(
+ <>
+
+
+ >
+ )
+
+ const helmet = Helmet.renderStatic()
+
const html = getIndexHtml()
+ .replace(``, `${pageHtml}
`)
+ .replace(
+ ``,
+ `
+ ${helmet.title.toString()}
+ ${helmet.meta.toString()}
+ ${helmet.link.toString()}
+ `
+ )
+
return escapeInject`${dangerouslySkipEscape(html)}`
}
diff --git a/packages/web/src/utils/seo.ts b/packages/web/src/utils/seo.ts
index 2fc534fa20d..3170cace769 100644
--- a/packages/web/src/utils/seo.ts
+++ b/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'
+})