diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-19 13:56:34 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-19 14:22:28 +0100 |
| commit | a26b775b7bbf1abd3e99c8bf9ce4c7522d3a0adc (patch) | |
| tree | 7f041845fa64d00f20f949d1cba14fec3eca3435 /src/components/Branding/Branding.tsx | |
| parent | 813084fc23113ae2f594bf6ef1cf53bd003c9479 (diff) | |
chore: add structured data using schema.org and JSON-LD
I also added the featured image on single article.
Diffstat (limited to 'src/components/Branding/Branding.tsx')
| -rw-r--r-- | src/components/Branding/Branding.tsx | 63 |
1 files changed, 42 insertions, 21 deletions
diff --git a/src/components/Branding/Branding.tsx b/src/components/Branding/Branding.tsx index 9421314..5e2cf6a 100644 --- a/src/components/Branding/Branding.tsx +++ b/src/components/Branding/Branding.tsx @@ -6,36 +6,57 @@ import photo from '@assets/images/armand-philippot.jpg'; import Logo from '@assets/images/armand-philippot-logo.svg'; import { config } from '@config/website'; import styles from './Branding.module.scss'; +import Head from 'next/head'; +import { Person, WithContext } from 'schema-dts'; type BrandingReturn = ({ isHome }: { isHome: boolean }) => ReactElement; const Branding: BrandingReturn = ({ isHome = false }) => { const TitleTag = isHome ? 'h1' : 'p'; + const schemaJsonLd: WithContext<Person> = { + '@context': 'https://schema.org', + '@type': 'Person', + '@id': `${config.url}/#branding`, + name: config.name, + url: config.url, + jobTitle: config.baseline, + image: photo.src, + subjectOf: { '@id': `${config.url}` }, + }; + return ( - <div className={styles.wrapper}> - <div className={styles.logo}> - <div className={styles.logo__front}> - <Image - src={photo} - alt={t({ - message: `${config.name} picture`, - comment: 'Branding logo.', - })} - layout="responsive" - /> - </div> - <div className={styles.logo__back}> - <Logo /> + <> + <Head> + <script + type="application/ld+json" + dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} + ></script> + </Head> + <div id="branding" className={styles.wrapper}> + <div className={styles.logo}> + <div className={styles.logo__front}> + <Image + src={photo} + alt={t({ + message: `${config.name} picture`, + comment: 'Branding logo.', + })} + layout="responsive" + /> + </div> + <div className={styles.logo__back}> + <Logo /> + </div> </div> + <TitleTag className={styles.name}> + <Link href="/"> + <a className={styles.link}>{config.name}</a> + </Link> + </TitleTag> + <p className={styles.job}>{config.baseline}</p> </div> - <TitleTag className={styles.name}> - <Link href="/"> - <a className={styles.link}>{config.name}</a> - </Link> - </TitleTag> - <p className={styles.job}>{config.baseline}</p> - </div> + </> ); }; |