Add Unique Meta Tags to Pages
Learn the importance of page meta tags and the different methods by which they can be added.
Building web pages for a production application is incomplete if the possibility of the pages being discovered over the internet is not considered. To achieve this, the meta tags are added to the page head with the required information. The meta tags are the HTML elements providing essential metadata for web browsers and search engines, ensuring correct presentation and relevant display of pages. This makes the meta tag a crucial aspect of the web development process.
Here’s a list of tags that need to be set to enable SEO on the pages generated in the previous lessons.
SEO Meta Tags
Name | Description | |
1. | Title | This is the main title of the page that appears in search engine results. |
2. | Description | This is a short description of the page’s content. |
3. | Robots | This specifies to the search engine whether the page should be indexed or not. |
4. | Keywords | These are keywords that describe the topic of the page. |
5. | Author | This is the author of the page. For a survey page, this could be set to the author of the survey. |
6. | Open Graph Tags | These tags enable social media sites to display shared content and are usually prefixed with “og:”. The tags include “og:url”, “og:title”, “og:description”, “og:image”, etc. |
7. | Twitter Tags | These tags enable Twitter to display shared content and are usually prefixed with “twitter:”. The tags include “twitter:title”, “twitter:site”, “twitter:description”, “twitter:image”. |
Setting meta tags in Nuxt
Having understood what the meta tags are for and how they are beneficial to web pages, the next step is to discuss how to set them up in a Nuxt project.
In a Nuxt project, there are multiple ways to add meta tags to a page:
- They can be added in the Nuxt config file (
nuxt.config.ts). - They can be added using
components. - They can be added using
composables, such as theuseHead,