add lastmod and images field to metadata and seo

README.md

@@ -82,7 +82,39 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
 
 `pages` - pages to route to. Read the [Next.js documentation](https://nextjs.org/docs) for more information
 
-## Compose
+## Post
+
+### Frontmatter
+
+Frontmatter follows [Hugo's standards](https://gohugo.io/content-management/front-matter/).
+
+Currently 7 fields are supported.
+
+```
+title (required)
+date (required)
+tags (required, can be empty array)
+lastmod (optional)
+draft (optional)
+summary (optional)
+images (optional, adds to socialBanner in siteMetadata config)
+```
+
+Here's an example of a post's frontmatter:
+
+```
+---
+title: 'Introducing Tailwind Nexjs Starter Blog'
+date: '2021-01-12'
+lastmod: '2021-01-18'
+tags: ['next-js', 'tailwind', 'guide']
+draft: false
+summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
+images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
+---
+```
+
+### Compose
 
 `scripts/compose.js` can be used to easily generate a post with pre-filled front matter.
 

components/SEO.js

@@ -47,12 +47,21 @@ export const PageSeo = ({ title, description, url }) => {
   )
 }
 
-export const BlogSeo = ({ title, summary, date, url, tags, image = siteMetadata.socialBanner }) => {
+export const BlogSeo = ({ title, summary, date, lastmod, url, tags, images = [] }) => {
   const publishedAt = new Date(date).toISOString()
-  const featuredImage = {
-    url: `${siteMetadata.siteUrl}${image}`,
-    alt: title,
-  }
+  const modifiedAt = new Date(lastmod || date).toISOString()
+  let imagesArr =
+    typeof images === 'string'
+      ? [images, siteMetadata.socialBanner]
+      : [...images, siteMetadata.socialBanner]
+
+  const featuredImages = imagesArr.map((img) => {
+    return {
+      url: `${siteMetadata.siteUrl}${img}`,
+      alt: title,
+    }
+  })
+
   return (
     <>
       <NextSeo
@@ -63,22 +72,22 @@ export const BlogSeo = ({ title, summary, date, url, tags, image = siteMetadata.
           type: 'article',
           article: {
             publishedTime: publishedAt,
-            modifiedTime: publishedAt,
+            modifiedTime: modifiedAt,
             authors: [`${siteMetadata.siteUrl}/about`],
             tags,
           },
           url,
           title,
           description: summary,
-          images: [featuredImage],
+          images: featuredImages,
         }}
       />
       <ArticleJsonLd
         authorName={siteMetadata.author}
         dateModified={publishedAt}
-        datePublished={publishedAt}
+        datePublished={modifiedAt}
         description={summary}
-        images={[featuredImage]}
+        images={featuredImages}
         publisherLogo="/static/favicons/android-chrome-96x96.png"
         publisherName={siteMetadata.author}
         title={title}

data/blog/introducing-tailwind-nextjs-starter-blog.mdx

@@ -1,9 +1,11 @@
 ---
 title: 'Introducing Tailwind Nexjs Starter Blog'
 date: '2021-01-12'
+lastmod: '2021-01-18'
 tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
+images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
 ---
 
 ![tailwind-nextjs-banner](/static/images/twitter-card.png)
@@ -88,7 +90,39 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
 
 `pages` - pages to route to. Read the [Next.js documentation](https://nextjs.org/docs) for more information
 
-## Compose
+## Post
+
+### Frontmatter
+
+Frontmatter follows [Hugo's standards](https://gohugo.io/content-management/front-matter/).
+
+Currently 7 fields are supported.
+
+```
+title (required)
+date (required)
+tags (required, can be empty array)
+lastmod (optional)
+draft (optional)
+summary (optional)
+images (optional, adds to socialBanner in siteMetadata config)
+```
+
+Here's an example of a post's frontmatter:
+
+```
+---
+title: 'Introducing Tailwind Nexjs Starter Blog'
+date: '2021-01-12'
+lastmod: '2021-01-18'
+tags: ['next-js', 'tailwind', 'guide']
+draft: false
+summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
+images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
+---
+```
+
+### Compose
 
 `scripts/compose.js` can be used to easily generate a post with pre-filled front matter.
 

scripts/compose.js

@@ -21,6 +21,7 @@ date: '${date}'
 tags: []
 draft: true
 summary: 
+images: []
 ---
 `