From fb8f14a0dbe8ec29d42a966b4f2a335980d9df14 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Fri, 10 Dec 2021 15:15:13 +0100 Subject: [PATCH] Add support for rich snippets --- components/helmet.tsx | 188 ++++++++++++++++++------ content/roadmaps/100-frontend/meta.json | 4 +- content/roadmaps/101-backend/meta.json | 4 +- pages/[roadmap]/index.tsx | 1 + public/roadmaps/android.png | Bin 0 -> 95229 bytes 5 files changed, 144 insertions(+), 53 deletions(-) create mode 100644 public/roadmaps/android.png diff --git a/components/helmet.tsx b/components/helmet.tsx index e5302a340..c0dab3876 100644 --- a/components/helmet.tsx +++ b/components/helmet.tsx @@ -1,73 +1,163 @@ import NextHead from 'next/head'; import siteConfig from '../content/site.json'; +import { RoadmapType } from '../lib/roadmap'; +import { roadmapTheme } from '../styles/theme'; type HelmetProps = { title?: string; keywords?: string[]; canonical?: string; description?: string; + roadmap?: RoadmapType; }; -const Helmet = (props: HelmetProps) => ( - - +function getRichSnippetJson(roadmap: RoadmapType) { + return { + '@context': 'https://schema.org', + '@type': 'Article', + mainEntityOfPage: { + '@type': 'WebPage', + '@id': `https://roadmap.sh/${roadmap.id}`, + }, + headline: roadmap.seo.title, + description: roadmap.seo.description, + image: roadmap.jsonUrl + ? `https://roadmap.sh/roadmaps/${roadmap.id}.png` + : undefined, + author: { + '@type': 'Person', + name: 'Kamran Ahmed', + url: 'https://twitter.com/kamranahmedse', + }, + publisher: { + '@type': 'Organization', + name: 'roadmap.sh', + logo: { + '@type': 'ImageObject', + url: 'https://roadmap.sh/brand-square.png', + }, + }, + }; +} - {props.title || siteConfig.title} - +const Helmet = (props: HelmetProps) => { + const { roadmap, title, canonical, description, keywords } = props; - - + return ( + + - - {props.canonical && } - + {title || siteConfig.title} + - - - - - - - - + + - - - - - - + + {canonical && } + - - - - - - + + + + + + + + - - - - - + + + + + + - { /* Global Site Tag (gtag.js) - Google Analytics */} - {process.env.GA_SECRET && ( - <> - + )} + + {/* Global Site Tag (gtag.js) - Google Analytics */} + {process.env.GA_SECRET && ( + <> +