Have you ever wonder how do sites setup the information we see when we search in google or any search engines? ![Inbytes.dev's Meta](https://res.cloudinary.com/inbytes/image/upload/v1686744452/dev/azelalynetan/posts/iymta0mta/inbytesnc7.png) Meta tags give informations that help the search engines to tell what's the page is all about. ### How to add meta tags in Nuxt 3? In Nuxt 3, we have different ways to add meta and improve our SEO. **1. Defaults (Defining meta in nuxt config)** Using the app.head property in nuxt config, you can define meta for your project. Example (nuxt.config.ts): ```javascript export default defineNuxtConfig({ app: { head: { charset: 'utf-8', viewport: 'width=device-width, initial-scale=1', title: 'My Website' } } }) ``` **2. Using useHead composable** It's similar to the Head method in Nuxt 2, where we can manage meta in a reactive way on each pages. ```html ``` **3. Using useSeoMeta / useServerSeoMeta composable** It's similar to useHead composable but it helps you avoid common mistakes such as `name` instead of `property`. ```html ``` It is advisable if you don't need any reactivity to use useServerSeoMeta for better performance. SEO Composables in Nuxt are powered by [unhead](https://unhead.unjs.io). To learn more and check it in detailed, read the docs [here](https://unhead.unjs.io/usage/composables/use-head). **4. Components** In Nuxt, you can use components to define your metadata in your template. Example: ```html

DJANGO GIRLS CDO 2024

Deploying Nuxt 3 App to Vercel

Ways to Setup Meta Tags in Nuxt 3