Fix OG image

src/app/about/page.tsx

@@ -1,7 +1,8 @@
 import { PageTitle, Paragraph } from '@components/typography';
 import AboutCard from './AboutCard';
 import type { Metadata } from 'next';
-import { BASE_URL } from '../../utils/conts';
+import { BASE_URL } from '../../utils/const';
+import { OG_IMAGE } from '../../utils/ogImage';
 
 interface Feedback {
   avatar: string;
@@ -78,6 +79,7 @@ export const metadata: Metadata = {
     '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],
   },
 };
 

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

@@ -3,7 +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/conts';
+import { BASE_URL } from '../../../utils/const';
+import { OG_IMAGE } from '../../../utils/ogImage';
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { slug } = params;
@@ -14,6 +15,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     description: blogPost?.summary,
     openGraph: {
       url: new URL(`${BASE_URL}/blog/${slug}`),
+      images: [OG_IMAGE],
     },
   };
 }

src/app/blog/page.tsx

@@ -2,7 +2,8 @@ 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/conts';
+import { BASE_URL } from '../../utils/const';
+import { OG_IMAGE } from '../../utils/ogImage';
 
 export const revalidate = 0;
 
@@ -12,6 +13,7 @@ export const metadata: Metadata = {
     '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],
   },
 };
 

src/app/emoji/page.tsx

@@ -2,7 +2,8 @@ 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/conts';
+import { BASE_URL } from '../../utils/const';
+import { OG_IMAGE } from '../../utils/ogImage';
 
 export const revalidate = 0;
 
@@ -11,6 +12,7 @@ export const metadata: Metadata = {
   description: 'Here you can have fun and vote for your favorite emoji.',
   openGraph: {
     url: new URL(`${BASE_URL}/emoji`),
+    images: [OG_IMAGE],
   },
 };
 

src/app/gallery/page.tsx

@@ -1,13 +1,15 @@
 import WorkInProgress from '@components/WorkInProgress';
 import type { Metadata } from 'next';
-import { BASE_URL } from '../../utils/conts';
+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],
   },
 };
 

src/app/layout.tsx

@@ -5,7 +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/conts';
+import { BASE_URL } from '../utils/const';
 
 const redHatText = Red_Hat_Text({
   variable: '--font-red-hat-text',
@@ -29,7 +29,7 @@ export const metadata: Metadata = {
   alternates: {
     canonical: './',
   },
-  metadataBase: new URL(BASE_URL),
+  metadataBase: new URL(`${BASE_URL}/`),
 };
 
 interface Props {

src/app/newsletter/page.tsx

@@ -1,12 +1,14 @@
 import WorkInProgress from '@components/WorkInProgress';
 import type { Metadata } from 'next';
-import { BASE_URL } from '../../utils/conts';
+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],
   },
 };
 

src/app/page.tsx

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

src/app/snippets/page.tsx

@@ -1,13 +1,15 @@
 import WorkInProgress from '@components/WorkInProgress';
 import type { Metadata } from 'next';
-import { BASE_URL } from '../../utils/conts';
+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],
   },
 };
 

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,
+};