Seo (#17)

.github/workflows/workflow.yaml

@@ -13,10 +13,14 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "18.x"
-          cache: "yarn"
+          node-version: '18.x'
+          cache: 'yarn'
       - run: yarn install --immutable
-      - run: yarn test
+      - name: Run Tests
+        env:
+          NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: ${{ secrets.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME }}
+          NEXT_PUBLIC_SITE_URL: ${{ secrets.NEXT_PUBLIC_SITE_URL }}
+        run: yarn test
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v4
         with:

.gitignore

@@ -30,6 +30,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env*.test
 
 # vercel
 .vercel

src/app/layout.tsx

@@ -2,16 +2,19 @@
 
 import { Metadata } from 'next';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { getCldOgImageUrl } from 'next-cloudinary';
 
 import AppLayout from '@/components/AppLayout';
+import getBaseUrl from '@/app/lib/getBaseUrl';
 
 export const metadata: Metadata = {
   title: {
     template: '%s | Nichole Frey',
     // a default is required when creating a template
     default: 'Nichole Frey',
   },
-  description: 'Full-Stack Web Developer located in Central Florida',
+  description:
+    'Portfolio website for Nichole Frey, a Full-Stack Developer based in Orlando, FL',
 
   generator: 'Next.js',
   applicationName: 'Nichole Frey | Full-Stack Developer',
@@ -28,6 +31,19 @@ export const metadata: Metadata = {
   authors: [{ name: 'Nichole Frey' }],
   creator: 'Nichole Frey',
   publisher: 'Nichole Frey',
+  openGraph: {
+    url: getBaseUrl(),
+    images: [
+      {
+        width: 1200,
+        height: 627,
+        url: getCldOgImageUrl({
+          src: 'zensite/og-image',
+          crop: 'scale',
+        }),
+      },
+    ],
+  },
 };
 
 interface RootLayoutProps {

src/app/lib/getBaseUrl.ts

@@ -0,0 +1,7 @@
+const getBaseUrl = () => {
+  // TODO: Determine why VERCEL_URL is not working in vercel deployment
+  // https://github.com/nicholeuf/zen-site-next/issues/18
+  return process.env.NEXT_PUBLIC_SITE_URL;
+};
+
+export default getBaseUrl;

src/app/lib/routes.ts

@@ -2,18 +2,22 @@ const routes = {
   home: {
     href: '/',
     name: 'Home',
+    priority: 1,
   },
   about: {
     href: '/about',
     name: 'About',
+    priority: 0.8,
   },
   work: {
     href: '/work',
     name: 'Work',
+    priority: 0.8,
   },
   contact: {
     href: '/contact',
     name: 'Contact',
+    priority: 0.5,
   },
 };
 

src/app/robots.test.ts

@@ -0,0 +1,14 @@
+import robots from './robots';
+
+describe('The robots file', () => {
+  test('generates as expected', () => {
+    const output = robots();
+    expect(output).toEqual({
+      rules: {
+        userAgent: '*',
+        allow: '/',
+      },
+      sitemap: `${process.env.NEXT_PUBLIC_SITE_URL}/sitemap.xml`,
+    });
+  });
+});

src/app/robots.ts

@@ -0,0 +1,15 @@
+import { MetadataRoute } from 'next';
+
+import getBaseUrl from '@/app/lib/getBaseUrl';
+
+const robots = (): MetadataRoute.Robots => {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: new URL('sitemap.xml', getBaseUrl()).toString(),
+  };
+};
+
+export default robots;

src/app/sitemap.test.ts

@@ -0,0 +1,34 @@
+import sitemap from './sitemap';
+
+describe('The sitemap file', () => {
+  test('generates as expected', () => {
+    const output = sitemap();
+    expect(output).toMatchObject([
+      {
+        url: `${process.env.NEXT_PUBLIC_SITE_URL}/`,
+        lastModified: expect.any(Date),
+        changeFrequency: 'always',
+        priority: expect.any(Number),
+      },
+      {
+        url: `${process.env.NEXT_PUBLIC_SITE_URL}/about`,
+        lastModified: expect.any(Date),
+        changeFrequency: 'always',
+        priority: expect.any(Number),
+      },
+
+      {
+        url: `${process.env.NEXT_PUBLIC_SITE_URL}/work`,
+        lastModified: expect.any(Date),
+        changeFrequency: 'always',
+        priority: expect.any(Number),
+      },
+      {
+        url: `${process.env.NEXT_PUBLIC_SITE_URL}/contact`,
+        lastModified: expect.any(Date),
+        changeFrequency: 'always',
+        priority: expect.any(Number),
+      },
+    ]);
+  });
+});

src/app/sitemap.ts

@@ -0,0 +1,16 @@
+import { MetadataRoute } from 'next';
+import routes from '@/app/lib/routes';
+import getBaseUrl from '@/app/lib/getBaseUrl';
+
+const sitemap = (): MetadataRoute.Sitemap => {
+  return Object.values(routes).map((route) => {
+    return {
+      url: new URL(route.href, getBaseUrl()).toString(),
+      lastModified: new Date(),
+      changeFrequency: 'always',
+      priority: route.priority,
+    };
+  });
+};
+
+export default sitemap;

versel.json

@@ -0,0 +1,4 @@
+{
+  "cleanUrls": true,
+  "trailingSlash": true
+}