seo updates

canameti · Aug 19, 2024 · 5ba8997 · 5ba8997
1 parent 81b6b0a
commit 5ba8997
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 29 deletions.
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -53,6 +53,10 @@ export default function Blog() {
 						author: {
 							'@type': 'Person',
 							name: person.name,
+                            image: {
+								'@type': 'ImageObject',
+								url: `${baseURL}/images/avatar.png`,
+							},
 						},
 					}),
 				}}

diff --git a/src/app/gallery/components/MasonryGrid.tsx b/src/app/gallery/components/MasonryGrid.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import Masonry from 'react-masonry-css';
+import { SmartImage } from "@/once-ui/components";
+import { gallery } from "@/app/resources";
+import styles from "@/app/gallery/Gallery.module.scss";
+
+export default function MasonryGrid() {
+    const breakpointColumnsObj = {
+        default: 4,
+        1440: 3,
+        1024: 2,
+        560: 1
+    };
+
+    return (
+        <Masonry
+            breakpointCols={breakpointColumnsObj}
+            className={styles.masonryGrid}
+            columnClassName={styles.masonryGridColumn}>
+            {gallery.images.map((image, index) => (
+                <SmartImage
+                    key={index}
+                    radius="m"
+                    aspectRatio={image.orientation === "horizontal" ? "16 / 9" : "9 / 16"}
+                    src={image.src}
+                    alt={image.alt}
+                    className={styles.gridItem}
+                />
+            ))}
+        </Masonry>
+    );
+}
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
@@ -1,33 +1,66 @@
-"use client";
+import { Flex } from "@/once-ui/components";
+import MasonryGrid from "./components/MasonryGrid";
+import { baseURL, gallery, person } from "../resources";
 
-import Masonry from 'react-masonry-css';
-import { SmartImage } from "@/once-ui/components";
-import { gallery } from "@/app/resources";
-import styles from "@/app/gallery/Gallery.module.scss";
+export function generateMetadata() {
+	const title = gallery.title;
+	const description = gallery.description;
+	const ogImage = `https://${baseURL}/og?title=${encodeURIComponent(title)}`;
 
-export default function Gallery() {
-    const breakpointColumnsObj = {
-        default: 4,
-        1440: 3,
-        1024: 2,
-        560: 1
-    };
+	return {
+		title,
+		description,
+		openGraph: {
+			title,
+			description,
+			type: 'website',
+			url: `https://${baseURL}/gallery`,
+			images: [
+				{
+					url: ogImage,
+					alt: title,
+				},
+			],
+		},
+		twitter: {
+			card: 'summary_large_image',
+			title,
+			description,
+			images: [ogImage],
+		},
+	};
+}
 
+export default function Gallery() {
     return (
-        <Masonry
-            breakpointCols={breakpointColumnsObj}
-            className={styles.masonryGrid}
-            columnClassName={styles.masonryGridColumn}>
-            {gallery.images.map((image, index) => (
-                <SmartImage
-                    key={index}
-                    radius="m"
-                    aspectRatio={image.orientation === "horizontal" ? "16 / 9" : "9 / 16"}
-                    src={image.src}
-                    alt={image.alt}
-                    className={styles.gridItem}
-                />
-            ))}
-        </Masonry>
+        <Flex fillWidth>
+            <script
+				type="application/ld+json"
+				suppressHydrationWarning
+				dangerouslySetInnerHTML={{
+					__html: JSON.stringify({
+						'@context': 'https://schema.org',
+						'@type': 'ImageGallery',
+						name: gallery.title,
+						description: gallery.description,
+						url: `https://${baseURL}/gallery`,
+						image: gallery.images.map((image) => ({
+                            '@type': 'ImageObject',
+                            url: `${baseURL}${image.src}`,
+                            description: image.alt,
+                        })),
+						author: {
+							'@type': 'Person',
+							name: person.name,
+                            image: {
+								'@type': 'ImageObject',
+								url: `${baseURL}/images/avatar.png`,
+							},
+						},
+					}),
+				}}
+			/>
+            <MasonryGrid/>
+        </Flex>
     );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,15 +3,66 @@ import React from 'react';
 import { Heading, Flex, Text, Button,  Avatar } from '@/once-ui/components';
 import { Projects } from '@/app/work/components/Projects';
 
-import { home } from '@/app/resources'
+import { baseURL, home, person } from '@/app/resources'
 import { Mailchimp } from '@/app/components';
 import { Posts } from '@/app/blog/components/Posts';
 
+export function generateMetadata() {
+	const title = home.title;
+	const description = home.description;
+	const ogImage = `https://${baseURL}/og?title=${encodeURIComponent(title)}`;
+
+	return {
+		title,
+		description,
+		openGraph: {
+			title,
+			description,
+			type: 'website',
+			url: `https://${baseURL}/blog`,
+			images: [
+				{
+					url: ogImage,
+					alt: title,
+				},
+			],
+		},
+		twitter: {
+			card: 'summary_large_image',
+			title,
+			description,
+			images: [ogImage],
+		},
+	};
+}
+
 export default function Home() {
 	return (
 		<Flex
 			maxWidth="m" fillWidth gap="24"
 			direction="column" alignItems="center">
+			<script
+				type="application/ld+json"
+				suppressHydrationWarning
+				dangerouslySetInnerHTML={{
+					__html: JSON.stringify({
+						'@context': 'https://schema.org',
+						'@type': 'WebPage',
+						name: home.title,
+						description: home.description,
+						url: `https://${baseURL}`,
+						image: `${baseURL}/og?title=${encodeURIComponent(home.title)}`,
+						publisher: {
+							'@type': 'Person',
+							name: person.name,
+							image: {
+								'@type': 'ImageObject',
+								url: `${baseURL}/images/avatar.png`,
+							},
+						},
+					}),
+				}}
+			/>
 			<Flex
 				fillWidth
 				direction="column"

diff --git a/src/app/resources/content.js b/src/app/resources/content.js
@@ -143,7 +143,8 @@ const work = {
 
 const gallery = {
     label: 'Gallery',
-    title: 'Gallery',
+    title: 'My photo gallery',
+    description: `A photo collection by ${person.name}`,
     images: [
         { 
             src: '/images/gallery/img-01.jpg',