Nuxt•2d ago

How do I set "site name" for a nuxt website?

On google search results the site name I get for my website is just my domain and then the domain is repeated again in the URL. Attached is SERP screenshot of TikTok Ads (I chose this example because TikTok Ads uses Nuxt and they are in the Nuxt showcase). In this example: - the site name is "TikTok For Business", - the URL is https://ads.tiktok.com/business/en/solutions/ads-manager, - the page title is "Advertise on TikTok with TikTok Ads Manager". Where in the Nuxt config or useHead or wherever can I set the site name that will be seen on Google search results, which in the example screenshot is "TikTok For Business"?

TikTok For Business

Reach diverse audiences around the world through TikTok For Business, an all-in-one marketing solutions platform.

2 Replies

kapa.ai•2d ago

Hi @MyetaM. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To set the "site name" for your Nuxt website so that it appears as you want in Google search results (like "TikTok For Business" in your example), you should use the Site Name structured data via JSON-LD in your page's <head>. However, based on the provided Nuxt documentation, there is no built-in Nuxt config or useHead/useSeoMeta property specifically for "site name" as interpreted by Google for SERPs. What you can do in Nuxt: 1. Set a consistent site name in your page titles and Open Graph meta tags: Use useHead or useSeoMeta to include your site name in the title and Open Graph tags. For example, in your app.vue or layout:

   <script setup lang="ts">
   useHead({
     titleTemplate: (titleChunk) => {
       return titleChunk ? `${titleChunk} - TikTok For Business` : 'TikTok For Business';
     }
   })
   </script>

   <script setup lang="ts">
   useHead({
     titleTemplate: (titleChunk) => {
       return titleChunk ? `${titleChunk} - TikTok For Business` : 'TikTok For Business';
     }
   })
   </script>

Or with template params for more flexibility:

   <script setup lang="ts">
   useHead({
     titleTemplate: (titleChunk) => {
       return titleChunk ? `${titleChunk} %separator %siteName` : '%siteName';
     },
     templateParams: {
       siteName: 'TikTok For Business',
       separator: '-'
     }
   })
   </script>

   <script setup lang="ts">
   useHead({
     titleTemplate: (titleChunk) => {
       return titleChunk ? `${titleChunk} %separator %siteName` : '%siteName';
     },
     templateParams: {
       siteName: 'TikTok For Business',
       separator: '-'
     }
   })
   </script>

SEO and Meta Features 2. Set Open Graph and Twitter meta tags:

   <script setup lang="ts">
   useSeoMeta({
     ogSiteName: 'TikTok For Business',
     ogTitle: 'Advertise on TikTok with TikTok Ads Manager',
     // ...other meta tags
   })
   </script>

   <script setup lang="ts">
   useSeoMeta({
     ogSiteName: 'TikTok For Business',
     ogTitle: 'Advertise on TikTok with TikTok Ads Manager',
     // ...other meta tags
   })
   </script>

useSeoMeta API 3. Add JSON-LD structured data for site name (manual step): While not directly covered in the Nuxt docs, you can add a script tag with JSON-LD using useHead:

   <script setup lang="ts">
   useHead({
     script: [
       {
         type: 'application/ld+json',
         innerHTML: JSON.stringify({
           "@context": "<https://schema.org",>
           "@type": "WebSite",
           "name": "TikTok For Business",
           "url": "<https://ads.tiktok.com/">
         }),
         // Prevents Vue from escaping innerHTML
         tagPosition: 'head'
       }
     ]
   })
   </script>

   <script setup lang="ts">
   useHead({
     script: [
       {
         type: 'application/ld+json',
         innerHTML: JSON.stringify({
           "@context": "<https://schema.org",>
           "@type": "WebSite",
           "name": "TikTok For Business",
           "url": "<https://ads.tiktok.com/">
         }),
         // Prevents Vue from escaping innerHTML
         tagPosition: 'head'
       }
     ]
   })
   </script>

useHead API Summary:
- There is no single "site name" config in Nuxt that Google will always use for SERPs. - Set your site name in the title template, Open Graph tags, and (optionally) in JSON-LD structured data using useHead or useSeoMeta. - Google may still choose what to display, but these steps give the correct signals. For more details, see the Nuxt docs on SEO and Meta and useSeoMeta. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@525812137256288266> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How do I set "site name" for a nuxt website?

Did you find this page helpful?