SEO setup

src/app/about/page.tsx

@@ -1,6 +1,8 @@
 import { PageTitle, Paragraph } from '@components/typography';
 import AboutCard from './AboutCard';
 import type { Metadata } from 'next';
+import { BASE_URL } from '../../utils/const';
+import { OG_IMAGE } from '../../utils/ogImage';
 
 interface Feedback {
   avatar: string;
@@ -73,6 +75,12 @@ const DATA: Array<Feedback> = [
 
 export const metadata: Metadata = {
   title: 'About',
+  description:
+    'Learn more about me through the words of some of my close friends, managers and peers.',
+  openGraph: {
+    url: new URL(`${BASE_URL}/about`),
+    images: [OG_IMAGE],
+  },
 };
 
 function Page() {

src/app/blog/[slug]/page.tsx

@@ -3,6 +3,8 @@ import { Mdx } from '@components/mdx';
 import { allBlogs } from '@contentlayer/generated';
 import { type Metadata } from 'next';
 import ViewTracker from './ViewTracker';
+import { BASE_URL } from '../../../utils/const';
+import { OG_IMAGE } from '../../../utils/ogImage';
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { slug } = params;
@@ -11,6 +13,10 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   return {
     title: blogPost?.title,
     description: blogPost?.summary,
+    openGraph: {
+      url: new URL(`${BASE_URL}/blog/${slug}`),
+      images: [OG_IMAGE],
+    },
   };
 }
 

src/app/blog/page.tsx

@@ -2,11 +2,19 @@ import { PageTitle, Paragraph, SectionTitle } from '@components/typography';
 import ArticlePreview from '@components/ArticlePreview';
 import { type Metadata } from 'next';
 import { getAllBlogPosts } from '@lib/models/blog';
+import { BASE_URL } from '../../utils/const';
+import { OG_IMAGE } from '../../utils/ogImage';
 
 export const revalidate = 0;
 
 export const metadata: Metadata = {
   title: 'Blog',
+  description:
+    'Weekly content about software development and management. All articles are based on my own experience and real cases.',
+  openGraph: {
+    url: new URL(`${BASE_URL}/blog`),
+    images: [OG_IMAGE],
+  },
 };
 
 function Page() {

src/app/emoji/page.tsx

@@ -2,11 +2,18 @@ import Emoji from './Emoji';
 import { PageTitle, Paragraph } from '@components/typography';
 import { getAllEmojis } from '@lib/models/emoji';
 import { type Metadata } from 'next';
+import { BASE_URL } from '../../utils/const';
+import { OG_IMAGE } from '../../utils/ogImage';
 
 export const revalidate = 0;
 
 export const metadata: Metadata = {
   title: 'Emoji',
+  description: 'Here you can have fun and vote for your favorite emoji.',
+  openGraph: {
+    url: new URL(`${BASE_URL}/emoji`),
+    images: [OG_IMAGE],
+  },
 };
 
 async function Page() {

src/app/gallery/page.tsx

@@ -1,8 +1,16 @@
 import WorkInProgress from '@components/WorkInProgress';
 import type { Metadata } from 'next';
+import { BASE_URL } from '../../utils/const';
+import { OG_IMAGE } from '../../utils/ogImage';
 
 export const metadata: Metadata = {
   title: 'Gallery',
+  description:
+    'I like photography and here are a couple of my favorite pictures.',
+  openGraph: {
+    url: new URL(`${BASE_URL}/gallery`),
+    images: [OG_IMAGE],
+  },
 };
 
 function Page() {

src/app/layout.tsx

@@ -5,6 +5,7 @@ import { Analytics } from '@vercel/analytics/react';
 import type { Metadata } from 'next';
 import Container from '@components/Container';
 import './globals.css';
+import { BASE_URL } from '../utils/const';
 
 const redHatText = Red_Hat_Text({
   variable: '--font-red-hat-text',
@@ -25,6 +26,10 @@ export const metadata: Metadata = {
     template: '%s | Kirill Kurko',
     default: 'Kirill Kurko',
   },
+  alternates: {
+    canonical: './',
+  },
+  metadataBase: new URL(`${BASE_URL}/`),
 };
 
 interface Props {

src/app/newsletter/page.tsx

@@ -1,8 +1,15 @@
 import WorkInProgress from '@components/WorkInProgress';
 import type { Metadata } from 'next';
+import { BASE_URL } from '../../utils/const';
+import { OG_IMAGE } from '../../utils/ogImage';
 
 export const metadata: Metadata = {
   title: 'Newsletter',
+  description: 'Follow my newsletter on software development and management.',
+  openGraph: {
+    url: new URL(`${BASE_URL}/newsletter`),
+    images: [OG_IMAGE],
+  },
 };
 
 function Page() {

src/app/page.tsx

@@ -1,9 +1,15 @@
 import { PageTitle, Paragraph } from '@components/typography';
 import type { Metadata } from 'next';
+import { BASE_URL } from '../utils/const';
+import { OG_IMAGE } from '../utils/ogImage';
 
 export const metadata: Metadata = {
   title: 'kkurko.dev',
-  description: 'Frontend Developer, creator, and penguin.',
+  description: 'Frontend Developer and Penguin 🐧',
+  openGraph: {
+    url: new URL(BASE_URL),
+    images: [OG_IMAGE],
+  },
 };
 
 function Page() {

src/app/snippets/page.tsx

@@ -1,8 +1,16 @@
 import WorkInProgress from '@components/WorkInProgress';
 import type { Metadata } from 'next';
+import { BASE_URL } from '../../utils/const';
+import { OG_IMAGE } from '../../utils/ogImage';
 
 export const metadata: Metadata = {
   title: 'Snippets',
+  description:
+    'Short code snippets that I found useful and want to keep at hand.',
+  openGraph: {
+    url: new URL(`${BASE_URL}/snippets`),
+    images: [OG_IMAGE],
+  },
 };
 
 function Page() {

src/utils/const.ts

@@ -0,0 +1 @@
+export const BASE_URL = 'https://kkurko.dev';

src/utils/ogImage.ts

@@ -0,0 +1,7 @@
+import ogImage from '../app/opengraph-image.png';
+
+export const OG_IMAGE = {
+  url: ogImage.src,
+  width: ogImage.width,
+  height: ogImage.height,
+};