Gatsby SEO Starter
The Gatsby starter with typescript and a lot of goodies.
It is a 100% SEO ready gatsby blog starter, especially programming blogs, as it can extract a list of repos via GitHub api. It also includes tags, comments, search, social buttons and SEO support.
Preview
victoriaz.netlify.com
How to install
Verify if npm and node are installed on your machine:
node -v && npm -v
Otherwise, install them:
// For Ubuntu
sudo apt-get install npm
sudo apt-get install node
Install the starter:
gatsby new YourProjectName https://github.com/garrynsk/gatsby-seo-starter
If you want to configure installed plugins, navigate to gatsby-config.js in the root directory and edit it as you wish.
The list of preinstalled plugins
Feel free to configure them.
Images/Video
-
gatsby-image
Speedy, optimized images without the work.
-
gatsby-remark-responsive-image
Make images in markdown responsive.
-
gatsby-plugin-sharp
Exposes several image processing functions built on the Sharp image processing library.
-
gatsby-remark-images
Processes images in markdown so they can be used in the production build.
-
gatsby-remark-responsive-iframe
Wraps iframes or objects (e.g. embedded YouTube videos) within markdown files in a responsive elastic container with a fixed aspect ratio.
-
gatsby-transformer-sharp
Creates ImageSharp nodes from image types that are supported by the Sharp image processing library and provides fields in their GraphQL types for processing your images in a variety of ways including resizing, cropping, and creating responsive images.
Code blocks
- gatsby-remark-prismjs
Adds syntax highlighting to code blocks in markdown files using PrismJS.
SEO
-
gatsby-plugin-sitemap
Create a sitemap for your Gatsby site.
-
gatsby-plugin-google-analytics
Easily add Google Analytics to your Gatsby site.
-
gatsby-plugin-manifest
Adds support for shipping a manifest.json with your site. To create manifest.json, you need to run gatsby build.
-
gatsby-plugin-favicon
Generates all favicons for Web, Android, iOS, ...
-
gatsby-plugin-hotjar
Hotjar analytics.
UX
-
gatsby-plugin-offline
Adds drop-in support for making a Gatsby site work offline and more resistant to bad network connections. It creates a service worker for the site and loads the service worker into the client.
-
gatsby-plugin-nprogress
Automatically shows the nprogress indicator when a page is delayed in loading (which Gatsby considers as one second after clicking on a link).
-
gatsby-plugin-algolia
Search powered by Algolia.
-
gatsby-plugin-feed
Create an RSS feed (or multiple feeds) for your Gatsby site.
Dev tools
-
gatsby-plugin-webpack-bundle-analyzer
A Gatsby plugin to help analyze your bundle content with webpack-bundle-analyzer.
-
gatsby-plugin-debug-build
Gatsby plugin to force the dev version of builds. NOT FOR USE IN PRODUCTION. This is a debugging utility. Don’t do stupid things with it.
-
gatsby-plugin-netlify
Automatically generates a _headers file and a _redirects file at the root of the public folder to configure HTTP headers and redirects on Netlify.
Helpers
-
gatsby-link
A component for Gatsby. It’s a wrapper around React Router’s Link component that adds enhancements specific to Gatsby. All props are passed through to React Router’s Link.
-
gatsby-plugin-catch-links
Intercepts local links from markdown and other non-react pages and does a client-side pushState to avoid the browser having to refresh the page.
-
gatsby-remark-copy-linked-files
Copies local files linked to/from markdown to your public folder.
-
gatsby-transformer-remark
Parses Markdown files using Remark.
-
gatsby-plugin-fastclick
Make your Gatsby app more responsive on touch devices with Fastclick.
-
gatsby-plugin-react-helmet
Provides drop-in support for server rendering data added with React Helmet. React Helmet is a component which lets you control your document head using their React component.
-
gatsby-remark-smartypants
Replaces “dumb” punctuation marks with “smart” punctuation marks using the retext-smartypants plugin.
-
gatsby-source-filesystem
Plugin for creating File nodes from the file system.
-
gatsby-plugin-twitter
Loads the Twitter JavaScript for embedding tweets. Let's you add tweets to markdown and in other places
Language
- gatsby-plugin-typescript
Provides drop-in support for TypeScript and TSX.
Social
-
gatsby-source-github-api
Source plugin for pulling data into Gatsby from the official GitHub v4 GraphQL API.
-
gatsby-remark-autolink-headers
Adds GitHub-style links to MarkdownRemark headers.
Features
UI
Posts in markdown
Special blog features
Social features
SEO
Development tools
Customisation
Configuration
First, look as config.js. Here you keep all configuration data. It can be queried like this:
export const query = graphql`
query AboutQuery {
site {
siteMetadata {
siteUrl
siteTitle
userEmail
userName
userMoto
githubUrl
facebookUrl
twitterUrl
linkednUrl
... // other configuration data
}
},
}
SEO
I spend quite some time wrapping my head around how to make seo works in gatsby, but finally it works.
You must know, that react-helmet doesn't work with Facebook scrapper. It just fails to fetch dynamic tags. So you have to use some kind of prerendering.
I allow myself to cite @cjimmy:
Convert your app to server-side rendering
This is the most obvious solution but the most onerous. You won't be able to use client-side definitions like window in your js. If you're using React Router, you'll have to find a way to mirror the routes between server and client. If you're like me, you might be serverless, and running a server would be a lot more work. On the other hand, your page will likely load faster, and crawlers will see what your users would. This is a non-exhaustive list of tradeoffs.
Use a pre-rendering service
Prerender.io, Render-tron, and Prerender.cloud to name a few, give you a way to server-side render when the user-agent is a bot. Some CDNs like Netlify and Roast.io do this for you so you don't have to run your own server.
The downside to this is this is yet another service to pay for.
Pre-render on your own
A couple of packages exist for rendering your React app statically. Graphcool's Prep, React-Snap, React-Snapshot were ones I've found that all essentially run a local server to render the site and download the html files. The files won't be pretty, but if all you're looking for is the generated by React Helmet, this will do.
I tried Prep, React-Snap, but they failed. So I ended up using Netlify prerendering feature. It works just fine.
Also, react-helmet inserts meta tags in the end of a header. But most of the crawlers limits their search. At least Facebook couldn't find my headers after gatsby's inlined styles. So I wrote some plain simple helpers for tags inserting. You may find them in components/seo/seo.tsx.
I introduced some great free services for site monitoring: hotjar, heap, google-analytics and google tagmanager. I recommend you to use tagmanager whenever you need to insert static meta tags. It is very convenient. I installed Google Optimiser, Conversion Linker and Facebook Pixel with this. And Facebook Pixel now works fine. But you can try gatsby-plugin-facebook-analytics. I didn't manage it, though. It fails with Facebook Pixel Helper. Maybe it is my fault.
I checked my blog's SEO health with:
- OpenLink Structured Data Sniffer
- SEOQuake
- Google's Structured Data testing tool
- Dareboost
- Facebook Sharing Debugger
- Twitter Card Validator
- Screaming Frog
And a bunch of other tools!
Posts
To define custom tags you need to write them in every post in the block at the beginning of the post. Like this:
---
title: "What Are They, Monads, Angels or Demons?"
date: "2018-03-26T10:30:00.000Z"
author: "Zakharova Victoria"
path: "/monads"
featuredImage: "./angels.jpg"
tags: ["monads", "Scala"]
---
Every post has it's featured image, which will be shown on the Home page and in the post itself. You should it define in the every post too.
Plugins
Your plugins can be configurated in gatsby-node.js.
-
gatsby-source-github-api
You must provide token and graphQL query.
-
gatsby-plugin-webpack-bundle-analyzer
Is disabled by default. If you need it, change the value of the "disable" parameter.
-
gatsby-plugin-google-analytics
You must provide trackingId.
-
gatsby-plugin-facebook-analytics
You must provide appId.
-
gatsby-plugin-mixpanel
You must provide apiToken.
-
gatsby-plugin-feed
Write a query.
-
gatsby-plugin-hotjar
Provide an id.
Social
For social buttons is used addthis service. You can configure it in templates/post.tsx.
For social icons is used fontawesome. You can configure it in components/socialButtons/socialButtons.tsx
In the file parser/parser.tsx is stored a parser for github API.
Embed
You can include or exclude scripts for embed links from templates/post.tsx.
Oh, I forgot some issues. The first one with repositories' readme. Starter doesn't fetch images and code from readme, it fetches text anyway, but I hope I find time to deal with it.
And the second one is performance. The blog is not notoriously slow, but doesn't perform as fast as I expected. I think, tree-shaking could improve the situation, but Gatsby, unfortunately, still uses Webpack 1.
So, if anyone can advise me how to speed up the blog, it will be great.
Enjoi!