66 lines
3.2 KiB
JavaScript
66 lines
3.2 KiB
JavaScript
import React from 'react'
|
|
import { Head } from '@inertiajs/react'
|
|
|
|
function normalizeJsonLd(input) {
|
|
if (!input) return []
|
|
return (Array.isArray(input) ? input : [input]).filter((schema) => schema && typeof schema === 'object')
|
|
}
|
|
|
|
export default function SeoHead({ seo = {}, title = null, description = null, jsonLd = null }) {
|
|
const metaTitle = seo?.title || title || 'Skinbase'
|
|
const metaDescription = seo?.description || description || ''
|
|
const canonical = seo?.canonical || null
|
|
const robots = seo?.robots || null
|
|
const prev = seo?.prev || null
|
|
const next = seo?.next || null
|
|
const ogTitle = seo?.og_title || metaTitle
|
|
const ogDescription = seo?.og_description || metaDescription
|
|
const ogUrl = seo?.og_url || canonical
|
|
const ogType = seo?.og_type || 'website'
|
|
const ogImage = seo?.og_image || null
|
|
const keywords = seo?.keywords || null
|
|
const twitterCard = seo?.twitter_card || (ogImage ? 'summary_large_image' : 'summary')
|
|
const twitterTitle = seo?.twitter_title || ogTitle
|
|
const twitterDescription = seo?.twitter_description || ogDescription
|
|
const twitterImage = seo?.twitter_image || ogImage || null
|
|
const schemas = [...normalizeJsonLd(seo?.json_ld), ...normalizeJsonLd(jsonLd)]
|
|
|
|
return (
|
|
<Head>
|
|
<title>{metaTitle}</title>
|
|
{metaDescription ? <meta head-key="description" name="description" content={metaDescription} /> : null}
|
|
{keywords ? <meta head-key="keywords" name="keywords" content={keywords} /> : null}
|
|
{robots ? <meta head-key="robots" name="robots" content={robots} /> : null}
|
|
{canonical ? <link head-key="canonical" rel="canonical" href={canonical} /> : null}
|
|
{prev ? <link head-key="prev" rel="prev" href={prev} /> : null}
|
|
{next ? <link head-key="next" rel="next" href={next} /> : null}
|
|
|
|
<meta head-key="og:site_name" property="og:site_name" content={seo?.og_site_name || 'Skinbase'} />
|
|
<meta head-key="og:type" property="og:type" content={ogType} />
|
|
<meta head-key="og:title" property="og:title" content={ogTitle} />
|
|
{ogDescription ? <meta head-key="og:description" property="og:description" content={ogDescription} /> : null}
|
|
{ogUrl ? <meta head-key="og:url" property="og:url" content={ogUrl} /> : null}
|
|
{ogImage ? <meta head-key="og:image" property="og:image" content={ogImage} /> : null}
|
|
{seo?.og_image_alt ? <meta head-key="og:image:alt" property="og:image:alt" content={seo.og_image_alt} /> : null}
|
|
|
|
<meta head-key="twitter:card" name="twitter:card" content={twitterCard} />
|
|
<meta head-key="twitter:title" name="twitter:title" content={twitterTitle} />
|
|
{twitterDescription ? <meta head-key="twitter:description" name="twitter:description" content={twitterDescription} /> : null}
|
|
{twitterImage ? <meta head-key="twitter:image" name="twitter:image" content={twitterImage} /> : null}
|
|
|
|
{schemas.map((schema, index) => {
|
|
const schemaType = typeof schema?.['@type'] === 'string' ? schema['@type'] : 'schema'
|
|
|
|
return (
|
|
<script
|
|
key={`jsonld-${schemaType}-${index}`}
|
|
head-key={`jsonld-${schemaType}-${index}`}
|
|
type="application/ld+json"
|
|
>
|
|
{JSON.stringify(schema)}
|
|
</script>
|
|
)
|
|
})}
|
|
</Head>
|
|
)
|
|
} |