Checklist for Web Projects

I have worked on so many web projects. No matter how many I have worked on, I always miss out a few little things —such as favicons or fonts— before publishing the site. I created this checklist to avoid those mistakes.

I have included a progress bar to keep track of the items you have checked off.

# General

• lang attribute on html tag
• charset meta tag
• viewport meta tag
• Add fonts

If possible, load the fonts asyncronously.

• Add favicon
• Add apple-touch-icon.png

This is the icon that appears on the home screen of iOS devices. To use a different named file or multiple files, refer to the Apple documentation .

• Add analytics script.
• Add robots.txt file.

# SEO

• Add title tag
• Add description meta tag
• Add keywords meta tag
• Add canonical link tag
• Add sitemap link tag

# Social Graph

• Add og:title
• Add og:description
• Add og:site_name
• Add og:image
• Add og:image:alt
• Add og:image:width
• Add og:image:height
• Add og:url
• Add og:type
• Add og:locale

Open Graph Protocol tags enable us to control how our content is displayed on social media platforms. Majority of the social media platforms support the og:* tags. I can’t stress enough how important these tags are. I feel kind of embarassed when I share something I made and it does not show a preview image.

• Add twitter:card
• Add twitter:site
• Add twitter:creator

On top of the og:* tags, Twitter supports additional tags which start with twitter:. They give us more control on how our content is displayed on Twitter. The documentation can be found at developer.x.com . The `twitter

The value for both twitter:site and twitter:creator must be the Twitter handle, without the @ symbol.

# Backend

• Add Access-Control-* headers
• Add E-Tag header
• Add Cache-Control header

# Others

• Documentation on how to setup, run, and deploy the project

Documentation is a must for any software projects, even if it’s just for yourself.