{"_path":"/blog/nuxt3-nuxtcontent2-meta-tags","_draft":false,"_partial":false,"_empty":false,"title":"Adding Meta tags in Nuxt 3 and Nuxt Content 2","description":"While Nuxt v3 is still not released (RC) and docs are missing some pages, it doesn't stop enthusiasts from using it.","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"adding-meta-tags-in-nuxt-3-and-nuxt-content-2"},"children":[{"type":"text","value":"Adding Meta tags in Nuxt 3 and Nuxt Content 2"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As a developer, I love to build websites. I enjoy the process itself and the results I see.\nAs a product owner, I want to make the website noticeable in search engines and social media. To make that happen, you need to work on your website Meta tags. Adding Meta, Open Graph, and Twitter Meta tags are the same in Nuxt."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As for now, Nuxt 3 is still not released, so that things may change in the future."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are several ways to set the Meta tags in Nuxt 3. Not all of them are dynamic:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"nuxt.config.ts (dynamic ❌)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"useHead composable (dynamic ✅)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Meta components (dynamic ✅)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"useMeta (deprecated)"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's see how you can use them in your code."}]},{"type":"element","tag":"h3","props":{"id":"nuxtconfigts"},"children":[{"type":"text","value":"Nuxt.config.ts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can set the META tags in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":". I believe this is a good place for the tags\nthat rarely / never change."}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n // Global page headers: https://go.nuxtjs.dev/config-head\n app: {\n head: {\n htmlAttrs: {\n lang: 'en'\n },\n meta: [\n {name: 'viewport', content: 'width=device-width, initial-scale=1'},\n {property: 'og:site_name', content: 'XDEVS.PRO'},\n {property: 'og:image', content: 'https://xdevs.pro/ogXDEVS.png'},\n {property: 'og:url', content: 'https://xdevs.pro/'},\n {property: \"og:type\", content: \"website\"},\n ],\n link: [\n {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}\n ]\n },\n },\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtConfig({\n // Global page headers: https://go.nuxtjs.dev/config-head\n app: {\n head: {\n htmlAttrs: {\n lang: 'en'\n },\n meta: [\n {name: 'viewport', content: 'width=device-width, initial-scale=1'},\n {property: 'og:site_name', content: 'XDEVS.PRO'},\n {property: 'og:image', content: 'https://xdevs.pro/ogXDEVS.png'},\n {property: 'og:url', content: 'https://xdevs.pro/'},\n {property: \"og:type\", content: \"website\"},\n ],\n link: [\n {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}\n ]\n },\n },\n})\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"usehead-composable"},"children":[{"type":"text","value":"useHead composable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It can be used to set constant Meta tags, or you can use it in combination with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useRoute"}]},{"type":"text","value":", which adds a bit of flexibility. "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useHead"}]},{"type":"text","value":" can be used both globally and on per page basis."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"app.vue"}]},{"type":"text","value":", you can set global Meta tags in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useHead"}]},{"type":"text","value":" composable:"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Any other page component, e.g., "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"blog/index.vue"}]}]},{"type":"element","tag":"code","props":{"code":"// You can override the global title \n// that was set in app.vue like this\nuseHead({ \n title: 'XDEVS Team Blog – our latest articles 📚', \n}) \n\n// it won't have direct access to your meta tags\ndefinePageMeta({ \n layout: 'blog', \n ogType: 'OgType',\n otherArgs: youWantToPass \n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// You can override the global title \n// that was set in app.vue like this\nuseHead({ \n title: 'XDEVS Team Blog – our latest articles 📚', \n}) \n\n// it won't have direct access to your meta tags\ndefinePageMeta({ \n layout: 'blog', \n ogType: 'OgType',\n otherArgs: youWantToPass \n})\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"usehead-title-templates"},"children":[{"type":"text","value":"useHead Title Templates"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Finally, something we can use to set the page title dynamically. Unfortunately, it works only with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"title"}]},{"type":"text","value":" tag."}]},{"type":"element","tag":"code","props":{"code":"// in your app.vue, add the following.\nconst route = useRoute()\n\nuseHead({\n // route.meta.title is is defined in definePageMeta({}) in another page component\n titleTemplate: (titleChunk) => {\n return titleChunk || route.meta.title || 'Site Default Title'\n },\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// in your app.vue, add the following.\nconst route = useRoute()\n\nuseHead({\n // route.meta.title is is defined in definePageMeta({}) in another page component\n titleTemplate: (titleChunk) => {\n return titleChunk || route.meta.title || 'Site Default Title'\n },\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you can set the title using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useHead"}]},{"type":"text","value":" on any other page of your website."}]},{"type":"element","tag":"code","props":{"code":"useHead({\n title: 'Some other page title.',\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"useHead({\n title: 'Some other page title.',\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"or"}]},{"type":"element","tag":"code","props":{"code":"definePageMeta({\n title: 'Any other page title.',\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"definePageMeta({\n title: 'Any other page title.',\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In case no title is set, the default title will be used."}]},{"type":"element","tag":"h3","props":{"id":"definepagemeta"},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"text","value":" is extracted at build time via a macro, so it can't be set dynamically.\nIt extends "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"route.meta"}]},{"type":"text","value":" with any non-dynamic information you pass. It's important to notice that you can't set Meta tags using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"text","value":" without using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useHead"}]},{"type":"text","value":" composable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"page1.vue"}]}]},{"type":"element","tag":"code","props":{"code":"definePageMeta({\n someInformation: 'You may need elsewhere available at a build time.'\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"definePageMeta({\n someInformation: 'You may need elsewhere available at a build time.'\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"app.vue"}]}]},{"type":"element","tag":"code","props":{"code":"const route = useRoute()\n\nconsole.log(route.meta.someInformation)\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const route = useRoute()\n\nconsole.log(route.meta.someInformation)\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"meta-components"},"children":[{"type":"text","value":"Meta components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You may find the Meta component a more flexible and valuable solution to set Meta tags."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt provides "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Base>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Script>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Style>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Meta>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Link>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Body>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Html>"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Head>"}]},{"type":"text","value":" components so that you can interact directly with your metadata within your component's template."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They can be used with any dynamic data like a regular Nuxt component."}]},{"type":"element","tag":"code","props":{"code":"<template>\n <div>\n <Head>\n <Meta property=\"og:title\" content=\"XDEVS – Top Software Engineers for your needs ❤️🔥\"/>\n <Meta property=\"og:description\" content=\"Web / mobile app development and consulting across different cycles of your product life.\" />\n <Meta name=\"description\" :content=\"pageDescriptionRef\" />\n </Head>\n </div>\n</template>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n <div>\n <Head>\n <Meta property=\"og:title\" content=\"XDEVS – Top Software Engineers for your needs ❤️🔥\"/>\n <Meta property=\"og:description\" content=\"Web / mobile app development and consulting across different cycles of your product life.\" />\n <Meta name=\"description\" :content=\"pageDescriptionRef\" />\n </Head>\n </div>\n</template>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"how-do-i-set-meta-tags-with-nuxt-content-v2"},"children":[{"type":"text","value":"How do I set META tags with Nuxt Content v2?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Managing Meta tags in Nuxt Content is made very easy."}]},{"type":"element","tag":"h3","props":{"id":"front-matter"},"children":[{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/markdown#front-matter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Front-matter"}]},{"type":"text","value":":"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/markdown#front-matter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Front-matter"}]},{"type":"text","value":" is a convention of Markdown-based CMS to provide meta-data to pages, like description or title. In Nuxt Content, the front-matter uses the YAML syntax with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"key: value"}]},{"type":"text","value":" pairs."}]}]},{"type":"element","tag":"code","props":{"code":"yourArticle.md\n\n---\ntitle: Managing SEO (Meta) tags in Nuxt 3 and Nuxt Content 2\ndescription: Your article description.\n---\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yourArticle.md\n\n---\ntitle: Managing SEO (Meta) tags in Nuxt 3 and Nuxt Content 2\ndescription: Your article description.\n---\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"usecontenthead"},"children":[{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/markdown#front-matter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"useContentHead()"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is basically the same as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useHead()"}]},{"type":"text","value":" that we talked about earlier."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/markdown#front-matter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"useContentHead()"}]},{"type":"text","value":" is a composable providing a binding between your content data and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useHead()"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"code","props":{"code":"yourArticle.md\n\n---\ntitle: Managing SEO (Meta) tags in Nuxt 3 and Nuxt Content 2\ndescription: Your article description.\nimage:\n src: '/assets/image.jpg'\n alt: 'An image showcasing My Page.'\n width: 400\n height: 300\nhead:\n meta:\n - name: 'keywords'\n content: 'nuxt, vue, content'\n - name: 'robots'\n content: 'index, follow'\n - name: 'author'\n content: 'NuxtLabs'\n---\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yourArticle.md\n\n---\ntitle: Managing SEO (Meta) tags in Nuxt 3 and Nuxt Content 2\ndescription: Your article description.\nimage:\n src: '/assets/image.jpg'\n alt: 'An image showcasing My Page.'\n width: 400\n height: 300\nhead:\n meta:\n - name: 'keywords'\n content: 'nuxt, vue, content'\n - name: 'robots'\n content: 'index, follow'\n - name: 'author'\n content: 'NuxtLabs'\n---\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Moreover, you can dynamically use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Nuxt Meta components"}]},{"type":"text","value":" to set Meta tags on the article page. To see a real-world example of setting Meta tags in the Nuxt 3 project, you can check our "},{"type":"element","tag":"a","props":{"href":"https://github.com/XDEVS-PRO/XDEVS-website","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"repo"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is definitely more than one way to set Meta tags in the Nuxt 3 framework. Is it bad or good? It's up to you. Having the possibility to make the same thing in multiple ways may be confusing for some people, including myself, but as Nuxt 3 is getting released, I believe we will get more clarification regarding adding Meta tags :)"}]}]},"topic":"Nuxt 3 - Nuxt Content 2","createdAt":1658865733050,"category":"Web development","image":"/blog/nuxt3_seo_tags/nuxt-nuxt-content.png","head":{"image":"/blog/nuxt3_seo_tags/nuxt-nuxt-content.png"},"alt":"Managing SEO tags in Nuxt3 and Nuxt Content v2.","author":{"name":"Xander Pokhylenko","bio":"Full-stack Developer","img":"/blog/authors/xander.webp"},"tags":["Nuxt","Nuxt Content"],"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"adding-meta-tags-in-nuxt-3-and-nuxt-content-2"},"children":[{"type":"text","value":"Adding Meta tags in Nuxt 3 and Nuxt Content 2"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As a developer, I love to build websites. I enjoy the process itself and the results I see.\nAs a product owner, I want to make the website noticeable in search engines and social media. To make that happen, you need to work on your website Meta tags. Adding Meta, Open Graph, and Twitter Meta tags are the same in Nuxt."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As for now, Nuxt 3 is still not released, so that things may change in the future."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are several ways to set the Meta tags in Nuxt 3. Not all of them are dynamic:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"nuxt.config.ts (dynamic ❌)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"useHead composable (dynamic ✅)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Meta components (dynamic ✅)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"useMeta (deprecated)"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's see how you can use them in your code."}]},{"type":"element","tag":"h3","props":{"id":"nuxtconfigts"},"children":[{"type":"text","value":"Nuxt.config.ts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can set the META tags in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":". I believe this is a good place for the tags\nthat rarely / never change."}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n // Global page headers: https://go.nuxtjs.dev/config-head\n app: {\n head: {\n htmlAttrs: {\n lang: 'en'\n },\n meta: [\n {name: 'viewport', content: 'width=device-width, initial-scale=1'},\n {property: 'og:site_name', content: 'XDEVS.PRO'},\n {property: 'og:image', content: 'https://xdevs.pro/ogXDEVS.png'},\n {property: 'og:url', content: 'https://xdevs.pro/'},\n {property: \"og:type\", content: \"website\"},\n ],\n link: [\n {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}\n ]\n },\n },\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// Global page headers: https://go.nuxtjs.dev/config-head"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"app: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" head: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" htmlAttrs: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" lang: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'en'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" meta: ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {name: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'viewport'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", content: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'width=device-width, initial-scale=1'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {property: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'og:site_name'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", content: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'XDEVS.PRO'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {property: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'og:image'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", content: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'https://xdevs.pro/ogXDEVS.png'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {property: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'og:url'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", content: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'https://xdevs.pro/'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {property: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"og:type\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", content: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"website\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" link: ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {rel: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'icon'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", type: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'image/x-icon'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", href: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'/favicon.ico'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" }"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"usehead-composable"},"children":[{"type":"text","value":"useHead composable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It can be used to set constant Meta tags, or you can use it in combination with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useRoute"}]},{"type":"text","value":", which adds a bit of flexibility. "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useHead"}]},{"type":"text","value":" can be used both globally and on per page basis."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"app.vue"}]},{"type":"text","value":", you can set global Meta tags in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useHead"}]},{"type":"text","value":" composable:"}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\nconst route = useRoute()\n\nuseHead({\n title: 'My App',\n // or, instead:\n // titleTemplate: (title) => `My App - ${title}`,\n viewport: 'width=device-width, initial-scale=1, maximum-scale=1',\n charset: 'utf-8',\n meta: [\n {property: 'og:url', content: computed(() => `https://xdevs.pro${route.path}`)},\n // extract og:type from route.meta.ogType which is defined in definePageMeta({}) on any other page\n {property: 'og:type', content: computed(() => route.meta.ogType || 'website')}\n ],\n})\n</script>\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"script setup lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"route"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"useRoute"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"useHead"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" title: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'My App'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// or, instead:"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// titleTemplate: (title) => `My App - ${title}`,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" viewport: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'width=device-width, initial-scale=1, maximum-scale=1'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" charset: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'utf-8'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" meta: ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {property: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'og:url'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", content: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"computed"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"`https://xdevs.pro${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"route"}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":")},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// extract og:type from route.meta.ogType which is defined in definePageMeta({}) on any other page"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {property: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'og:type'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", content: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"computed"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" route.meta.ogType "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'website'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":")}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Any other page component, e.g., "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"blog/index.vue"}]}]},{"type":"element","tag":"code","props":{"code":"// You can override the global title \n// that was set in app.vue like this\nuseHead({ \n title: 'XDEVS Team Blog – our latest articles 📚', \n}) \n\n// it won't have direct access to your meta tags\ndefinePageMeta({ \n layout: 'blog', \n ogType: 'OgType',\n otherArgs: youWantToPass \n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// You can override the global title "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// that was set in app.vue like this"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"useHead"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"({ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" title: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'XDEVS Team Blog – our latest articles 📚'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}) "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// it won't have direct access to your meta tags"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"({ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" layout: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'blog'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ogType: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'OgType'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" otherArgs: youWantToPass "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"usehead-title-templates"},"children":[{"type":"text","value":"useHead Title Templates"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Finally, something we can use to set the page title dynamically. Unfortunately, it works only with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"title"}]},{"type":"text","value":" tag."}]},{"type":"element","tag":"code","props":{"code":"// in your app.vue, add the following.\nconst route = useRoute()\n\nuseHead({\n // route.meta.title is is defined in definePageMeta({}) in another page component\n titleTemplate: (titleChunk) => {\n return titleChunk || route.meta.title || 'Site Default Title'\n },\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// in your app.vue, add the following."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"route"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"useRoute"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"useHead"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// route.meta.title is is defined in definePageMeta({}) in another page component"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"titleTemplate"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"titleChunk"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" titleChunk "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" route.meta.title "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'Site Default Title'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you can set the title using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useHead"}]},{"type":"text","value":" on any other page of your website."}]},{"type":"element","tag":"code","props":{"code":"useHead({\n title: 'Some other page title.',\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"useHead"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" title: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'Some other page title.'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"or"}]},{"type":"element","tag":"code","props":{"code":"definePageMeta({\n title: 'Any other page title.',\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" title: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'Any other page title.'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In case no title is set, the default title will be used."}]},{"type":"element","tag":"h3","props":{"id":"definepagemeta"},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"text","value":" is extracted at build time via a macro, so it can't be set dynamically.\nIt extends "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"route.meta"}]},{"type":"text","value":" with any non-dynamic information you pass. It's important to notice that you can't set Meta tags using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"text","value":" without using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useHead"}]},{"type":"text","value":" composable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"page1.vue"}]}]},{"type":"element","tag":"code","props":{"code":"definePageMeta({\n someInformation: 'You may need elsewhere available at a build time.'\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" someInformation: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'You may need elsewhere available at a build time.'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"app.vue"}]}]},{"type":"element","tag":"code","props":{"code":"const route = useRoute()\n\nconsole.log(route.meta.someInformation)\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"route"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"useRoute"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(route.meta.someInformation)"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"meta-components"},"children":[{"type":"text","value":"Meta components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You may find the Meta component a more flexible and valuable solution to set Meta tags."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt provides "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Title>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Base>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Script>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Style>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Meta>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Link>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Body>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Html>"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Head>"}]},{"type":"text","value":" components so that you can interact directly with your metadata within your component's template."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They can be used with any dynamic data like a regular Nuxt component."}]},{"type":"element","tag":"code","props":{"code":"<template>\n <div>\n <Head>\n <Meta property=\"og:title\" content=\"XDEVS – Top Software Engineers for your needs ❤️🔥\"/>\n <Meta property=\"og:description\" content=\"Web / mobile app development and consulting across different cycles of your product life.\" />\n <Meta name=\"description\" :content=\"pageDescriptionRef\" />\n </Head>\n </div>\n</template>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"Head"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"Meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"property"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"og:title\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"XDEVS – Top Software Engineers for your needs ❤️🔥\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"Meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"property"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"og:description\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"Web / mobile app development and consulting across different cycles of your product life.\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"Meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"description\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":":content"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"pageDescriptionRef\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"Head"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"how-do-i-set-meta-tags-with-nuxt-content-v2"},"children":[{"type":"text","value":"How do I set META tags with Nuxt Content v2?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Managing Meta tags in Nuxt Content is made very easy."}]},{"type":"element","tag":"h3","props":{"id":"front-matter"},"children":[{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/markdown#front-matter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Front-matter"}]},{"type":"text","value":":"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/markdown#front-matter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Front-matter"}]},{"type":"text","value":" is a convention of Markdown-based CMS to provide meta-data to pages, like description or title. In Nuxt Content, the front-matter uses the YAML syntax with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"key: value"}]},{"type":"text","value":" pairs."}]}]},{"type":"element","tag":"code","props":{"code":"yourArticle.md\n\n---\ntitle: Managing SEO (Meta) tags in Nuxt 3 and Nuxt Content 2\ndescription: Your article description.\n---\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{}},"children":[{"type":"text","value":"yourArticle.md\n\n---\ntitle: Managing SEO (Meta) tags in Nuxt 3 and Nuxt Content 2\ndescription: Your article description.\n---"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"usecontenthead"},"children":[{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/markdown#front-matter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"useContentHead()"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is basically the same as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useHead()"}]},{"type":"text","value":" that we talked about earlier."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/markdown#front-matter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"useContentHead()"}]},{"type":"text","value":" is a composable providing a binding between your content data and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useHead()"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"code","props":{"code":"yourArticle.md\n\n---\ntitle: Managing SEO (Meta) tags in Nuxt 3 and Nuxt Content 2\ndescription: Your article description.\nimage:\n src: '/assets/image.jpg'\n alt: 'An image showcasing My Page.'\n width: 400\n height: 300\nhead:\n meta:\n - name: 'keywords'\n content: 'nuxt, vue, content'\n - name: 'robots'\n content: 'index, follow'\n - name: 'author'\n content: 'NuxtLabs'\n---\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{}},"children":[{"type":"text","value":"yourArticle.md\n\n---\ntitle: Managing SEO (Meta) tags in Nuxt 3 and Nuxt Content 2\ndescription: Your article description.\nimage:\n src: '/assets/image.jpg'\n alt: 'An image showcasing My Page.'\n width: 400\n height: 300\nhead:\n meta:\n - name: 'keywords'\n content: 'nuxt, vue, content'\n - name: 'robots'\n content: 'index, follow'\n - name: 'author'\n content: 'NuxtLabs'\n---"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Moreover, you can dynamically use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Nuxt Meta components"}]},{"type":"text","value":" to set Meta tags on the article page. To see a real-world example of setting Meta tags in the Nuxt 3 project, you can check our "},{"type":"element","tag":"a","props":{"href":"https://github.com/XDEVS-PRO/XDEVS-website","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"repo"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is definitely more than one way to set Meta tags in the Nuxt 3 framework. Is it bad or good? It's up to you. Having the possibility to make the same thing in multiple ways may be confusing for some people, including myself, but as Nuxt 3 is getting released, I believe we will get more clarification regarding adding Meta tags :)"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"adding-meta-tags-in-nuxt-3-and-nuxt-content-2","depth":2,"text":"Adding Meta tags in Nuxt 3 and Nuxt Content 2","children":[{"id":"nuxtconfigts","depth":3,"text":"Nuxt.config.ts"},{"id":"usehead-composable","depth":3,"text":"useHead composable"},{"id":"usehead-title-templates","depth":3,"text":"useHead Title Templates"},{"id":"definepagemeta","depth":3,"text":"definePageMeta"},{"id":"meta-components","depth":3,"text":"Meta components"}]},{"id":"how-do-i-set-meta-tags-with-nuxt-content-v2","depth":2,"text":"How do I set META tags with Nuxt Content v2?","children":[{"id":"front-matter","depth":3,"text":"Front-matter:"},{"id":"usecontenthead","depth":3,"text":"useContentHead()"},{"id":"conclusion","depth":3,"text":"Conclusion"}]}]}},"_type":"markdown","_id":"content:blog:Nuxt3-NuxtContent2-meta-tags.md","_source":"content","_file":"blog/Nuxt3-NuxtContent2-meta-tags.md","_extension":"md"}