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' +})