A checklist for web projects that needs to be gone through before release.
- Language
- Metadata
- Opengraph
- Favicons
- Accessibility
- Error pages
- Cookies
- Markup Validation
- Tracking codes (Google Analytics, Facebook Pixels etc)
- Performance
- SSL/HTTPS
- Security headers
- Robots.txt
- Documentation
General
webdevchecklist.com, web.dev/measure
Accessibility
WAVE Evaluation Tool (Chrome Extension)
Performance
PageSpeed Insights, webpagetest.org, web.dev/measure
Security
Open graph/sharing
Facebook sharing debugger, Open Graph Preview (Chrome Extension)
Tracking/Analytics
Facebook Pixel Helper (Chrome Extension)
The <html> element at the top of your document should have the language specified. Remember about proper language codes: en-US, sv-SE, etc.
Example: <html lang="sv-SE">
The site needs those in the <head>:
<title>- the page title, every subpage has it's own (with the formatPage - (- Category) - Site name)<meta name="description">- a short paragraph (max 160 char) describing the content of main site, category or a single post<link rel="home" href="http://site.url">- a link to home root page<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">- Don't disable zoom
Optional and ocassionaly beneficial tags:
<meta name="keywords">- a list of,-separated tags that describes the content<meta name="author">- a list of,-separated names of main people involved in the project
Opengraph meta elements -- mainly for social media link sharing:
<meta property="og:type" content="website">- the type of document, for the most projects it's "website"<meta property="og:site_name" content="name">- the name of the site,Significant Bit<meta property="og:title" content="title">- the same as in<title><meta property="og:description" content="description">- the same as in meta description<meta property="og:url" content="http://site.url">- The page url<meta property="og:image" content="social-image-1200x630.png">- an image with dimensions 1200x630 px<meta property="og:image:width" content="1200">- Image width in pixels<meta property="og:image:height" content="630">- Image height in pixels
Documentation/resources:
- Open graph
- A Guide to Sharing for Webmasters (Facebook)
- Facebook sharing debugger
- Open Graph Preview (Chrome Extension)
Use Favicons. A great tool for this is http://realfavicongenerator.net.
Resources:
Include pages for error pages such as 404 and 500. Make sure the styling is similar to the main site and give a brief description about what might have went wrong.
Also use an error/exception reporting service, like Honeybadger.
We need to inform visitors if the site uses cookies.
Make sure to fix all invalid markup.
Resources:
Set up all appropriate tracking codes.
Resources:
Make sure the site has good performance.
Resources:
All sites should be protected with HTTPS, even ones that don't handle sensitive data. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs.
Deploy security response headers. Security headers audit can be done at securityheaders.com.
Add a robots.txt file to inform search engine spiders how to interact with indexing your content.
A README.md with the page maintenance, installation instructions and inner workings explained. However, don't be too specific. Your HTML markup, SCSS styles and JavaScript should be semantic and well commented on its own.