GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → sderosiaux → guidelines-to-create-a-strong-website

sderosiaux / guidelines-to-create-a-strong-website

Licence: other
A list of all things to consider when making a website or webapp of quality.

Labels

csssecurityperformanceprivacywebseoa11y

Projects that are alternatives of or similar to guidelines-to-create-a-strong-website

Asqatasun
Mirror of Asqatasun ---> we've moved to GITLAB https://gitlab.com/asqatasun/Asqatasun - Opensource web site analyser, used for web accessibility "a11y"
Stars: ✭ 217 (+135.87%)
Mutual labels:  seo, a11y
Fusuma
✍️Fusuma makes slides with Markdown easily.
Stars: ✭ 5,033 (+5370.65%)
Mutual labels:  seo, a11y
HTML-Lint
A code quality bookmarklet and command-line tool
Stars: ✭ 20 (-78.26%)
Mutual labels:  a11y
ocean-web
Blu's Design System
Stars: ✭ 25 (-72.83%)
Mutual labels:  a11y
jquery-accessible-modal-window-aria
jQuery simple and accessible modal window, using ARIA
Stars: ✭ 61 (-33.7%)
Mutual labels:  a11y
SEO-Manager-Electron
Generates SEO Report Easily
Stars: ✭ 24 (-73.91%)
Mutual labels:  seo
nuxt-netlify-lambda-starter
🛠️ SEO-friendly website starter backed by Netlify lambda functions in a simple, friendly repo
Stars: ✭ 60 (-34.78%)
Mutual labels:  seo
nuxt-jsonld
A Nuxt.js module to manage JSON-LD in Vue component.
Stars: ✭ 198 (+115.22%)
Mutual labels:  seo
AT-browser-tests
HTML tests for various uses, including HTML5accessibility.com and JAWS tests
Stars: ✭ 74 (-19.57%)
Mutual labels:  a11y
SeoMaestro
🧙‍♂️A ProcessWire module helping you to manage SEO related tasks like a boss.
Stars: ✭ 33 (-64.13%)
Mutual labels:  seo
rgaa composants javascript
Cette plateforme de tests présente les implémentations des composants ARIA telles qu'elles sont définies par les motifs de conception.
Stars: ✭ 16 (-82.61%)
Mutual labels:  a11y
web-components-good-practices
😎☑️ Good Practices for build Web Components.
Stars: ✭ 80 (-13.04%)
Mutual labels:  a11y
jquery-accessible-carrousel-aria
jQuery Accessible Carrousel System, using ARIA
Stars: ✭ 40 (-56.52%)
Mutual labels:  a11y
quiz-extensions
A self-service LTI for faculty to easily extend time for multiple users for all quizzes at once.
Stars: ✭ 15 (-83.7%)
Mutual labels:  a11y
slim-seo
A fast and automated WordPress SEO plugin.
Stars: ✭ 49 (-46.74%)
Mutual labels:  seo
agnosticui
AgnosticUI is a set of UI primitives that start their lives in clean HTML and CSS. These standards compliant components are then copied to our framework implementations in: React, Vue 3, Angular, and Svelte.
Stars: ✭ 326 (+254.35%)
Mutual labels:  a11y
a11y-accordion-tabs
A script for an accessible accordion tabs component
Stars: ✭ 50 (-45.65%)
Mutual labels:  a11y
wagtail-metadata-mixin
🔍 OpenGraph, Twitter Card and Schema.org snippet tags for Wagtail CMS pages
Stars: ✭ 42 (-54.35%)
Mutual labels:  seo
conference-diversity-and-inclusion
Diversity and Inclusion Guidelines for Conferences
Stars: ✭ 14 (-84.78%)
Mutual labels:  a11y
laravel-seo
SEO package for Laravel
Stars: ✭ 136 (+47.83%)
Mutual labels:  seo
View All Similar Projects ➔

Guidelines to create a strong website

Here you'll find out all the things I could think of and find out, to create a "good" website.

From security, to performance, social sharing, analytics etc. I'm trying to not forget anything. This is not about which framework to use, but about everything that makes a "good" website in general: secured, performant, social compliant, SEO compliant, offline ready, and more.

This list is growing over time.

You know more ?

Don't hesitate to PR! Let's try to be concise: other resources on the web go further in details for each topic, let's keep them one-liner here with a sample code when necessary.

Be strong

Summary

Care about security ?

  • Use HTTPS (add a letsencrypt certificate, renew every 3 months automatically)
  • Add all security headers
    • get A+ on https://securityheaders.io/
    • Content-Security-Policy: define which hosts are allowed for the browser to download/send from/to (scripts, styles, images, iframes, forms..). Content-Security-Policy: script-src 'self' https://apis.google.com; img-src 'self'. All details here https://www.html5rocks.com/en/tutorials/security/content-security-policy/. A very interesting piece to read: https://hackernoon.com/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5 (look for "Content Security Policy") about CSP tricks and escapes.
    • Content-Security-Policy-Report-Only: when migrating an existing website to CSP, use this first just to get reports on CSP violations (the browser will still acts normal)
    • X-Webkit-CSP (old Chrome)
    • X-Content-Security-Policy: IE10, FF<24)
    • Public-Key-Pins: ensure the webclient has the right public keys, to avoid MITM attacks public-key-pins-report-only:max-age=500; pin-sha256="WoiWRyIOVNa9ihaBciRSC7XHjliYS9VwUGOIud4PB18="; report-uri="http://example.com/hpkp/"
    • Public-Key-Pins-Report-Only: Same as CSP-RO. At first, add this one to see if you get any error. Facebook is using this one for instance.
    • Strict-Transport-Security: specify to the browser to use only HTTPS for a period of time. The browser will automatically use https if it got the header before. Strict-Transport-Security: max-age=63072000; includeSubDomains; preload (2 years), and add it to the preload list of Chrome https://hstspreload.appspot.com and figure inside Chromium's source: https://cs.chromium.org/chromium/src/net/http/transport_security_state_static.json
    • X-Content-Type-Options: do not rely on files MIME types. (a .txt containing some .js, and there are even some exploits that insert JS into MIME-types!) X-Content-Type-Options: nosniff
    • X-Frame-Options: avoid your website to be embedded into an iframe, to just allow for same domain. X-Frame-Options: deny. For a finer control, CSP exist.
    • X-XSS-Protection: enable by default, the browser does not execute a js if it finds the same in the querystring. As CSP, a report url option exists: X-XSS-Protection: 1; report=http://www.company.com/report
    • X-Download-Options: IE8
    • X-Permitted-Cross-Domain-Policies: Restrict Adobe Flash Player's and Reader's access to data. X-Permitted-Cross-Domain-Policies: none
    • Access-Control-Allow-Origin: Known as CORS. Control how a HTTP request is handled (accepted or rejected) if it's coming from another domain. Generally, an API adds the host(s) serving the UI in this header (only if on different domain ofc). Never use Access-Control-Allow-Origin: * except if you are reckless or don't care. Lots of details: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
    • Timing-Allow-Origin: prevent browsers to access timing information through PerformanceResourceTiming (window.performance) for privacy reasons: Timing-Allow-Origin: (no value)
    • Observe CORB impact
    • Add CRI (Subresource Integrity) to your resources https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
<script src="framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

Care about social ?

<meta property="fb:admins" content="USER_ID" />
<meta property="fb:app_id" content="123456789456489" />
  • Twitter Card
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="{{ PAGE_NAME }}"/>
<meta name="twitter:description" content="{{ PAGE_DESCRIPTION }}"/>
<meta name="twitter:site" content="{{ TWITTER_WEBSITE_ACCOUNT }}"/>
<meta name="twitter:image" content="{{ PAGE_IMAGE_URL }}" />
<meta name="twitter:creator" content="{{ TWITTER_CREATOR_ACCOUNT }}"/>
<meta name="twitter:domain" content="mon.site.com"/>

Care about SEO ?

  • Use HTTPS
  • Isomorphic/Universal Javascript (prerendering page)
  • Add share & like buttons
  • Take care of the name of your images and alt
  • Add a sitemap.xml
  • Define the crawlers politic. Define the file robots.txt, or you can add a meta:
<meta name="robots" content="index,follow" />
<link type="text/plain" rel="author" href="humans.txt" />
<link rel="alternate" hreflang="es" href="http://es.example.com/" />
  • If your website publishes news:
    • you can use <meta name="news_keywords" content="football, world cup" /> to help Google News to reference you https://support.google.com/news/publisher/answer/68297?hl=en
    • you can use <meta name="syndication-source" content="http://example.com/my_news" /> if you are the original creator of the news, to indicate you are the original source.
    • it exists also a meta original-source to reference the sources you reference in your article

Care about communication ?

<meta property="og:locale" content="{{ LOCALE }}" />
<meta property="og:type" content="article" /> <!-- product... -->
<meta property="og:title" content="{{ PAGE_NAME }}" />
<meta property="og:description" content="{{ PAGE_DESCRIPTION }}" />
<meta property="og:image" content="{{ PAGE_IMAGE_URL }}" />
<meta property="og:url" content="{{ PAGE_CANONICAL_URL }}" />
<meta property="og:site_name" content="{{ APPLICATION_NAME }}" />	
<meta property="og:updated_time" content="2015-05-12T22:24:50+00:00" />
<meta property="article:publisher" content="{{ PUBLISHER }}" />
<meta property="article:author" content="{{ AUTHOR }}" />
<meta property="article:section" content="Technology" />
<meta property="article:published_time" content="2015-01-06T23:07:41+00:00" />
<meta property="article:modified_time" content="2015-05-12T22:24:50+00:00" />
  • Bing
<meta name="geo.placename" content="United States" />
<meta name="geo.position" content="x;x" />
<meta name="geo.region" content="usa" />
<meta name="ICBM" content="x,x" />
  • Define a canonical URL for every page (to avoid to reference twice the same page, for instance the mobile version and the desktop's)
<link rel="canonical" href="article.html">
  • Define it's UTF8
<meta charset="utf-8">
  • Define the content type
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  • Language
<html lang="en">
<meta http-equiv="Content-Language" content="en">
<meta name="language" content="{{ LANG }}" /><!-- Old -->
  • Provide some info the browsers/crawlers can use to describe your app (if web app)
<meta name="application-name" content="{{ APPLICATION_NAME }}">
<meta name="description" content="{{ PAGE_DESCRIPTION }}">
<meta name="keywords" content="{{ PAGE_KEYWORD }}" />
<link rel="pingback" href="http://www.example.com/xmlrpc.php" />
  • You can put some RSS
<link rel="alternate" type="application/rss+xml" href="http://www.example.com/rss.xml" />
  • Prev/Next pages if you are in a listing
<link rel="prev" title="..." href=".../page/1" />
<link rel="next" title="..." href=".../page/3" />
  • Define the shortlink of the pages
<link rel="shortlink" type="text/html" href="http://example.com/Ad1ca9">
  • Define the sitemap of the website
<link rel="sitemap" type="application/xml" title="Sitemap" href="{{ SITEMAP_URL }}" />
<!-- The classic one; ico or png -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

<!-- Used by http://fluidapp.com/ (website to native app on Mac) -->
<link rel="fluid-icon" href="fluidicon.png" title="...">

<!-- Apple formats https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">

<!-- For Safari pinned tabs -->
<link rel="mask-icon" href="logo.svg" color="orange">

<!-- Recommanded is 192x192 only -->
<link rel="icon" type="image/png" sizes="192x192"  href="/icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Not sure if still used. App should used it if og:image is unspecified, to display an image when sharing -->
<link rel="image_src" href="{{ PAGE_IMAGE_URL }}">

<!-- Windows -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.example.com/xmlrpc.php?rsd" />
  • WindowsLiveWriter
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.example.com/wlwmanifest.xml" />
<meta name="msapplication-task" content="name=Example: home;action-uri=http://www.example.com/home;icon-uri=http://www.example.com/favicon.ico">
  • OpenSearch
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="...">
<script type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"WebSite","url":"https:\/\/...","name":"...","alternateName":"..."}</script>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<meta name="DC.Format" content="text/html">
<meta name="DC.Language" content="en">
<meta name="DC.Type" content="Text">
<meta name="DC.Title" content="My revolution">
  • Keep URLs short and meaningful
  • Handle page errors (404, etc.) with some links inside, instead of dumping the classic raw default page

Care about Apple ?

<link rel="apple-touch-startup-image" href="/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

Care about accessibility (a11y) ?

Care about privacy ?

Care about style ?

<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, minimal-ui">
  • Avoid FOUC (Flash Of Unstyled Content) and FOIC (Flash Of Invisible Content) https://css-tricks.com/fout-foit-foft/
  • Make it responsive using media queries and other css techniques
  • Talk to a UI and UX designer
  • Avoid to use custom scrollbars plugins. People tends to not like them. There are often used to cancel the style of the ugly scrollbars in Windows unfortunately.
  • Fix the size of elements in the page (images, videos..) to avoid shifting layouts
  • Ensure the color contrast you are using is fine: http://leaverou.github.io/contrast-ratio/

Care about legacy ?

  • Add X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • If you uses specific features, you can use @supports if css only, or https://modernizr.com/ to detect if a feature is available and can fallback.
  • Add shims
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<script type="module" src="main.mjs"></script>
<script nomodule type="javascript" src="fallback.js"></script>

Care about performance ?

  • Test with https://web.dev/measure
  • Use HTTP/2
  • Define a performance budget (overall, js, images, time to interactive, first paint..) and improve it over time (you can't deploy something out of the budget)
  • DNS Prefetch to resolve DNS asap (for future pages)
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//themes.googleusercontent.com">
  • DNS+Handshake+TLS Preconnect. Better. DNS+TCP handshake + optional TLS negotiation. Use for the current page.
<link rel="preconnect" href="//fonts.googleapis.com">
  • Resource preload (high priority) Download a resource right now (into cache) if we know we'll need it. It supports media queries (for instance, if you want to preload an image that is available in 3 formats, according to the screen max-width)
<link rel="preload" href="image.png" as="image" media="(min-width: 1024px)">
  • Module preload (mjs)
<link rel="modulepreload" href="lib.mjs">
  • Resource Prefetch (low priority). Download a resource (into the cache) when the browser will have time, if we know it's going to be used later.
<link rel="prefetch" href="image.png">
  • Add https://instant.page/ to preload pages when the user hovers a link
  • Subresource (deprecated, not supported anymore): Download directly (high priority, whereas prefetch is low priority) a resource that will be discovered later in the page (such as <script> at the end) Use preload.
<link rel="subresource" href="app.js">
  • Prerender. Fetch the whole content of another page (css, process js etc.). Useful when you know that the user will click on it for sure. It will take only a instant (everything will be already loaded!)
<link rel="prerender" href="http://example.com/about">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300">
  • Better, don't use <link rel="stylesheet" ..>, it's a blocking resource download. Try to inline into <style>.
  • For classic js third party libraries, use a cdn (unpkg, cdnjs, jsdelivr, maxcdn..)
  • Use a generic CDN for your resources like Cloudflare
  • If you don't want an external CDN, install a "HTTP Web Accelerator" like Varnish to cache static resources server side and serve them faster
  • Use rel="noopener" for external links: <a href="http://example.com" target="_blank" rel="noopener">
  • Check your performances with https://testmysite.io/
  • Check your performances and best practices with Lighthouse: https://github.com/GoogleChrome/lighthouse GitHub stars (test if you app can be considered as "progressive")
  • Analyze what changes in the DOM with Chrome extensions such as DOMListener and http://google.github.io/tracing-framework/ if you want the best!
  • Evaluate your bloat score http://www.webbloatscore.com/
  • Async image processing to get better responsiveness <img decoding=async src="..."> (proposal)
  • Load lazily your resources
// js modules here (or dynamic imports, à la webpack)
const module = await import('more.mjs')
module.something()

Care about mobile ?

<link rel="manifest" href="/manifest.json">
{
	"name": "example.com",
	"short_name": "EXX",
	"start_url": "/",
	"display": "standalone",
	"background_color": "#fff",
	"theme_color": "#0379C4",
	"description": "The official website and documentation for ...",
	"icons": [ { } ]
}

Care about offline ?

Care about analytics ?

  • Google Webmaster
<meta name="google-site-verification" content="xyz">
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

Care about bugs ?

Care about misc ?

<meta name="google" value="notranslate">

More tips

https://developers.google.com/speed/docs/insights/rules https://www.awesomeweb.com/blog/make-website-awesome

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].