diff --git a/README.md b/README.md
index 4167bd4..126092f 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,6 @@ Edit siteMeta data in [`/src/gatsby-config.js`](https://github.com/ryanwiemer/ga
     description: // Description of the website
       'A starter template to build amazing static websites with Gatsby, Contentful and Netlify',
     siteUrl: 'https://gcn.netlify.com', // Website URL. Do not include trailing slash
-    twitter: '', // Author's twitter username for SEO
     image: '/images/share.jpg', // Path to default image for SEO
     menuLinks: [ // The links used in the top menu
       {
@@ -75,12 +74,20 @@ Edit siteMeta data in [`/src/gatsby-config.js`](https://github.com/ryanwiemer/ga
         slug: '/contact/',
       },
     ],
-    postsPerHomepage: 7, // Number of posts on the homepage
-    postsPerPage: 6, // Number of posts used on any other pagination
+    postsPerFirstPage: 7, // Number of posts on the first page
+    postsPerPage: 6, // Number of posts used on all other pages
+    /*
+      Root URL for posts and tags
+      For example: 'blog' will result in:
+        - www.example.com/blog/
+        - www.example.com/blog/post-name/
+        - www.example.com/blog/tag/tag-name/
+    */
+    basePath: '/', // Defaults to the homepage
   }
 ```
 
-**Note:** If you do not see your changes reflected when developing locally you may need to run `yarn run clean` and restart the development server.
+**Note:** If you do not see your changes reflected when developing locally you may need to run `yarn clean` followed by restarting the server via `yarn develop`.
 
 ### Theme UI
 
diff --git a/gatsby-config.js b/gatsby-config.js
index 790a226..951cf9c 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -21,7 +21,6 @@ module.exports = {
     description:
       'A starter template to build amazing static websites with Gatsby, Contentful and Netlify',
     siteUrl: 'https://gcn.netlify.com',
-    twitter: '',
     image: '/images/share.jpg',
     menuLinks: [
       {
@@ -37,8 +36,9 @@ module.exports = {
         slug: '/contact/',
       },
     ],
-    postsPerHomepage: 7,
+    postsPerFirstPage: 7,
     postsPerPage: 6,
+    basePath: '/',
   },
   plugins: [
     `gatsby-plugin-emotion`,
diff --git a/package.json b/package.json
index 99d70fd..21e176e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-starter-gcn",
   "description": "A starter template to build amazing static websites with Gatsby, Contentful and Netlify",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "repository": "https://github.com/ryanwiemer/gatsby-starter-gcn",
   "author": "Ryan Wiemer <ryan@ryanwiemer.com>",
   "dependencies": {
diff --git a/src/components/Card.js b/src/components/Card.js
index 6e68f13..a0cf5d4 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -69,7 +69,7 @@ const Card = ({ slug, heroImage, title, publishDate, body, ...props }) => {
     <>
       {heroImage && body && (
         <Post featured={props.featured}>
-          <Link to={`/${slug}/`}>
+          <Link to={`${props.basePath}/${slug}/`}>
             <StyledImg fluid={heroImage.fluid} backgroundColor={'#eeeeee'} />
             <Title>{title}</Title>
             <Date>{publishDate}</Date>
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
index ae8f9c5..644908d 100644
--- a/src/components/Pagination.js
+++ b/src/components/Pagination.js
@@ -75,8 +75,8 @@ const Pagination = props => {
   function changePage(e) {
     navigate(
       e.target.value
-        ? `${props.context.paginationPrefix}/${e.target.value}`
-        : `${props.context.paginationPrefix}/`
+        ? `${props.context.paginationPath}/${e.target.value}`
+        : `${props.context.paginationPath}/`
     )
   }
 
diff --git a/src/components/PostLinks.js b/src/components/PostLinks.js
index a313438..d19bf5d 100644
--- a/src/components/PostLinks.js
+++ b/src/components/PostLinks.js
@@ -41,12 +41,14 @@ const PostLinks = props => {
     <Wrapper>
       <Box>
         {props.previous && (
-          <PreviousLink to={`/${props.previous.slug}/`}>
+          <PreviousLink to={`${props.basePath}/${props.previous.slug}/`}>
             &#8592; Prev
           </PreviousLink>
         )}
         {props.next && (
-          <NextLink to={`/${props.next.slug}/`}>Next &#8594;</NextLink>
+          <NextLink to={`${props.basePath}/${props.next.slug}/`}>
+            Next &#8594;
+          </NextLink>
         )}
       </Box>
     </Wrapper>
diff --git a/src/components/SEO.js b/src/components/SEO.js
index 6974650..0a81ec7 100644
--- a/src/components/SEO.js
+++ b/src/components/SEO.js
@@ -2,7 +2,7 @@ import React from 'react'
 import Helmet from 'react-helmet'
 import { useStaticQuery, graphql } from 'gatsby'
 
-const SEO = ({ title, description, image, slug }) => {
+const SEO = ({ title, description, image }) => {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -10,9 +10,8 @@ const SEO = ({ title, description, image, slug }) => {
           siteMetadata {
             title
             description
-            siteUrl
             image
-            twitter
+            siteUrl
           }
         }
       }
@@ -20,10 +19,8 @@ const SEO = ({ title, description, image, slug }) => {
   )
 
   const defaultImage = site.siteMetadata.siteUrl + site.siteMetadata.image
-  const defaultUrl = site.siteMetadata.siteUrl
   const metaDescription = description || site.siteMetadata.description
   const metaImage = image || defaultImage
-  const metaUrl = slug ? `${defaultUrl}/${slug}` : defaultUrl
 
   return (
     <Helmet
@@ -31,6 +28,7 @@ const SEO = ({ title, description, image, slug }) => {
         lang: `en`,
       }}
       title={title}
+      defaultTitle={site.siteMetadata.title}
       titleTemplate={`%s | ${site.siteMetadata.title}`}
     >
       <meta charSet="utf-8" />
@@ -41,16 +39,11 @@ const SEO = ({ title, description, image, slug }) => {
 
       {/* OpenGraph tags */}
       <meta property="og:title" content={title} />
-      <meta property="og:url" content={metaUrl} />
       <meta property="og:image" content={metaImage} />
       <meta property="og:description" content={metaDescription} />
 
       {/* Twitter Card tags */}
       <meta name="twitter:card" content="summary_large_image" />
-      <meta
-        name="twitter:creator"
-        content={site.siteMetadata.twitter ? site.siteMetadata.twitter : ''}
-      />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:image" content={metaImage} />
       <meta name="twitter:description" content={metaDescription} />
diff --git a/src/components/TagList.js b/src/components/TagList.js
index d6a5328..a6741db 100644
--- a/src/components/TagList.js
+++ b/src/components/TagList.js
@@ -32,7 +32,7 @@ const TagList = props => {
     <List>
       {props.tags.map(tag => (
         <Tag key={tag.id}>
-          <Link to={`/tag/${tag.slug}/`}>{tag.title}</Link>
+          <Link to={`${props.basePath}/tag/${tag.slug}/`}>{tag.title}</Link>
         </Tag>
       ))}
     </List>
diff --git a/src/gatsby/node/createPages.js b/src/gatsby/node/createPages.js
index 9c24e70..cccc3fd 100644
--- a/src/gatsby/node/createPages.js
+++ b/src/gatsby/node/createPages.js
@@ -6,62 +6,74 @@ const { paginate } = require(`gatsby-awesome-pagination`)
 module.exports = async ({ graphql, actions }) => {
   const { createPage } = actions
 
+  const basePath = config.siteMetadata.basePath || '/'
+
   // Create a page for each "post"
   const postsQuery = await graphql(query.data.posts)
   const posts = postsQuery.data.allContentfulPost.edges
   posts.forEach((post, i) => {
     const next = i === posts.length - 1 ? null : posts[i + 1].node
     const prev = i === 0 ? null : posts[i - 1].node
+
     createPage({
-      path: `/${post.node.slug}/`,
+      path: `${basePath === '/' ? '' : basePath}/${post.node.slug}/`,
       component: path.resolve(`./src/templates/post.js`),
       context: {
         slug: post.node.slug,
+        basePath: basePath === '/' ? '' : basePath,
         prev,
         next,
       },
     })
   })
 
-  // Create a page containing all "posts" and paginate. This is usually the index page
+  // Create a page containing all "posts" and paginate.
   paginate({
     createPage,
     component: path.resolve(`./src/templates/posts.js`),
     items: posts,
-    itemsPerFirstPage: config.siteMetadata.postsPerHomepage,
-    itemsPerPage: config.siteMetadata.postsPerPage,
-    pathPrefix: '/',
+    itemsPerFirstPage: config.siteMetadata.postsPerFirstPage || 7,
+    itemsPerPage: config.siteMetadata.postsPerPage || 6,
+    pathPrefix: basePath,
     context: {
-      paginationPrefix: '/',
+      basePath: basePath === '/' ? '' : basePath,
+      paginationPath: basePath === '/' ? '' : `/${basePath}`,
     },
   })
 
-  // Create a page for each "page"
-  const pagesQuery = await graphql(query.data.pages)
-  const pages = pagesQuery.data.allContentfulPage.edges
-  pages.forEach((page, i) => {
-    createPage({
-      path: `/${page.node.slug}/`,
-      component: path.resolve(`./src/templates/page.js`),
-      context: {
-        slug: page.node.slug,
-      },
-    })
-  })
-
   // Create "tag" page and paginate
   const tagsQuery = await graphql(query.data.tags)
   const tags = tagsQuery.data.allContentfulTag.edges
+
   tags.forEach((tag, i) => {
+    const tagPagination =
+      basePath === '/'
+        ? `/tag/${tag.node.slug}`
+        : `/${basePath}/tag/${tag.node.slug}`
+
     paginate({
       createPage,
       component: path.resolve(`./src/templates/tag.js`),
       items: tag.node.post || [],
-      itemsPerPage: config.siteMetadata.postsPerPage,
-      pathPrefix: `tag/${tag.node.slug}`,
+      itemsPerPage: config.siteMetadata.postsPerPage || 6,
+      pathPrefix: tagPagination,
       context: {
         slug: tag.node.slug,
-        paginationPrefix: `tag/${tag.node.slug}`,
+        basePath: basePath === '/' ? '' : basePath,
+        paginationPath: tagPagination,
+      },
+    })
+  })
+
+  // Create a page for each "page"
+  const pagesQuery = await graphql(query.data.pages)
+  const pages = pagesQuery.data.allContentfulPage.edges
+  pages.forEach((page, i) => {
+    createPage({
+      path: `/${page.node.slug}/`,
+      component: path.resolve(`./src/templates/page.js`),
+      context: {
+        slug: page.node.slug,
       },
     })
   })
diff --git a/src/hooks/use-site-metadata.js b/src/hooks/use-site-metadata.js
index 7ee1b76..b0892f4 100644
--- a/src/hooks/use-site-metadata.js
+++ b/src/hooks/use-site-metadata.js
@@ -9,7 +9,6 @@ export const useSiteMetadata = () => {
             title
             description
             siteUrl
-            twitter
             image
             menuLinks {
               name
diff --git a/src/pages/contact.js b/src/pages/contact.js
index c34f2f9..6c874b2 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -8,11 +8,7 @@ import SEO from '../components/SEO'
 const Contact = ({ data }) => {
   return (
     <Layout>
-      <SEO
-        title="Contact"
-        description="Contact description goes here"
-        slug="contact"
-      />
+      <SEO title="Contact" description="Contact description goes here" />
       <Container>
         <PageTitle>Contact</PageTitle>
         <ContactForm />
diff --git a/src/templates/page.js b/src/templates/page.js
index a95d252..7439450 100644
--- a/src/templates/page.js
+++ b/src/templates/page.js
@@ -7,7 +7,7 @@ import PageBody from '../components/PageBody'
 import SEO from '../components/SEO'
 
 const PageTemplate = ({ data }) => {
-  const { title, metaDescription, slug, body } = data.contentfulPage
+  const { title, metaDescription, body } = data.contentfulPage
   return (
     <Layout>
       <SEO
@@ -17,7 +17,6 @@ const PageTemplate = ({ data }) => {
             ? metaDescription.internal.content
             : body.childMarkdownRemark.excerpt
         }
-        slug={slug}
       />
       <Container>
         <PageTitle>{title}</PageTitle>
diff --git a/src/templates/post.js b/src/templates/post.js
index bb68fc4..25efe22 100644
--- a/src/templates/post.js
+++ b/src/templates/post.js
@@ -13,7 +13,6 @@ const PostTemplate = ({ data, pageContext }) => {
   const {
     title,
     metaDescription,
-    slug,
     heroImage,
     body,
     publishDate,
@@ -22,6 +21,7 @@ const PostTemplate = ({ data, pageContext }) => {
 
   const previous = pageContext.prev
   const next = pageContext.next
+  const { basePath } = pageContext
 
   let ogImage
   try {
@@ -39,19 +39,18 @@ const PostTemplate = ({ data, pageContext }) => {
             ? metaDescription.internal.content
             : body.childMarkdownRemark.excerpt
         }
-        slug={slug}
         image={ogImage}
       />
       <Hero title={title} image={heroImage} height={'50vh'} />
       <Container>
-        {tags && <TagList tags={tags} />}
+        {tags && <TagList tags={tags} basePath={basePath} />}
         <PostDetails
           date={publishDate}
           timeToRead={body.childMarkdownRemark.timeToRead}
         />
         <PageBody body={body} />
       </Container>
-      <PostLinks previous={previous} next={next} />
+      <PostLinks previous={previous} next={next} basePath={basePath} />
     </Layout>
   )
 }
@@ -80,8 +79,6 @@ export const query = graphql`
         }
         ogimg: resize(width: 1800) {
           src
-          width
-          height
         }
       }
       body {
diff --git a/src/templates/posts.js b/src/templates/posts.js
index 7440cf0..0b9d185 100644
--- a/src/templates/posts.js
+++ b/src/templates/posts.js
@@ -6,34 +6,41 @@ import Card from '../components/Card'
 import Container from '../components/Container'
 import Pagination from '../components/Pagination'
 import SEO from '../components/SEO'
+import { startCase } from 'lodash'
 
 const Posts = ({ data, pageContext }) => {
   const posts = data.allContentfulPost.edges
-  const { humanPageNumber } = pageContext
+  const { humanPageNumber, basePath } = pageContext
   const isFirstPage = humanPageNumber === 1
   let featuredPost
+  let ogImage
 
   try {
     featuredPost = posts[0].node
   } catch (error) {
     featuredPost = null
   }
+  try {
+    ogImage = posts[0].node.heroImage.ogimg.src
+  } catch (error) {
+    ogImage = null
+  }
 
   return (
     <Layout>
-      <SEO title="Home" />
+      <SEO title={startCase(basePath)} image={ogImage} />
       <Container>
         {isFirstPage ? (
           <CardList>
-            <Card {...featuredPost} featured />
+            <Card {...featuredPost} featured basePath={basePath} />
             {posts.slice(1).map(({ node: post }) => (
-              <Card key={post.id} {...post} />
+              <Card key={post.id} {...post} basePath={basePath} />
             ))}
           </CardList>
         ) : (
           <CardList>
             {posts.map(({ node: post }) => (
-              <Card key={post.id} {...post} />
+              <Card key={post.id} {...post} basePath={basePath} />
             ))}
           </CardList>
         )}
@@ -61,6 +68,9 @@ export const query = graphql`
             fluid(maxWidth: 1800) {
               ...GatsbyContentfulFluid_withWebp_noBase64
             }
+            ogimg: resize(width: 1800) {
+              src
+            }
           }
           body {
             childMarkdownRemark {
diff --git a/src/templates/tag.js b/src/templates/tag.js
index b88ea97..f61caa2 100644
--- a/src/templates/tag.js
+++ b/src/templates/tag.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { graphql } from 'gatsby'
-import orderBy from 'lodash/orderBy'
+import { startCase, orderBy } from 'lodash'
 import SEO from '../components/SEO'
 import moment from 'moment'
 import Layout from '../components/Layout'
@@ -18,16 +18,27 @@ const TagTemplate = ({ data, pageContext }) => {
     ['desc']
   )
 
-  const { title, slug } = data.contentfulTag
+  const { title } = data.contentfulTag
   const numberOfPosts = posts.length
   const skip = pageContext.skip
   const limit = pageContext.limit
-  const { humanPageNumber } = pageContext
+  const { humanPageNumber, basePath } = pageContext
+
+  let ogImage
+  try {
+    ogImage = posts[0].heroImage.ogimg.src
+  } catch (error) {
+    ogImage = null
+  }
 
   return (
     <>
       <Layout>
-        <SEO title={title} description={title} slug={`tag/${slug}`} />
+        <SEO
+          title={`Tag: ${startCase(title)}`}
+          description={`Posts Tagged: ${startCase(title)}`}
+          image={ogImage}
+        />
         <Container>
           <PageTitle small>
             {numberOfPosts} Posts Tagged: &ldquo;
@@ -36,7 +47,7 @@ const TagTemplate = ({ data, pageContext }) => {
           </PageTitle>
           <CardList>
             {posts.slice(skip, limit * humanPageNumber).map(post => (
-              <Card {...post} key={post.id} />
+              <Card {...post} key={post.id} basePath={basePath} />
             ))}
           </CardList>
         </Container>
@@ -65,8 +76,6 @@ export const query = graphql`
           }
           ogimg: resize(width: 1800) {
             src
-            width
-            height
           }
         }
         body {