Search Engine Optimization (SEO) is the process of making your website better for search engines (aka Google). Your website is given a score based on some known and some unknown parameters evaluated by the crawlers. The important thing for the crawler is that the page is complete and filled with the content the moment it’s going to be analysed. Nuxt facilitates it by easily changing the rendering of the project.
The head tag in HTML gives information and metadata to describe the content for crawlers.
NuxtJS is a framework that manages a SPA. To distinguish pages, Nuxt offers two ways to add metadata: globally in the nuxt.config.ts file or locally in the script or template section of each page.
For custom and reactive metadata, it's possible to set up the tag inside each page by using useHead() or useSEOMeta() in the script or template section. useHead() accepts an object similar to the one used for global metadata (title, meta...) while useSEOMeta() accepts an object where metadata is placed as a field of the object.
Both useHead() and useSEOMeta() should work properly when called inside the asyncData(). The alternative is to use some special tags directly inside the template section of the SFC file.
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." - Tim Berners-Lee, inventor of the WWW
The World Wide Web Consortium (W3C) and the Web Accessibility Initiative (WAI) developed technical specifications, guidelines, techniques and supporting resources that describe accessibility solutions. Overall, accessibility guidelines and techniques are based on four core principles:
- Perceivable: be perceivable to everyone, media should provide captions and content should be easy to see (and hear)
- Operable: users should easily navigate, find content, and determine where the are (even through keyboard and not the mouse for example)
- Understandable
- Robust: it means that the website supports and can be accessed on a variety of devices, including assistive technologies.
Some "techniques" to use to achieve accessibility:
- Ranking of headers is important since there are software that re-organize the appearence of the website using the headers (paragraphs, sub-paragraphs) you use
- Alt text are a lot important: it is a written description of an image that screen readers can read out loud. Note that there exists decorative images which are images that doesn't add information to what is already written. In this case alt text is not necessary
- ARIA (Accessible Rich Internet Applications) is a set of roles and attributes that define ways to make web content and web applications more accessible to people with disabilities. ARIA provides a framework for adding attributes to identify features for user interaction, how they relate to each other and their current state. For example a written description of a progress bar. From HTML5 some of the functionalities of ARIA are already implemented inside the semantic tags. "No ARIA is better than bad ARIA".