title: Alternate page with proper canonical tag and duplicate URL part errors in Google search console report
body: <p>I have a static blog site created with Nuxt and hosted on Netlify. For content, I am using markdown files and the new <a href="https://nuxtjs.org/blog/creating-blog-with-nuxt-content" rel="nofollow noreferrer">Content module</a> in Nuxt. I used Nuxt and static content, along with <a href="https://vue-meta.nuxtjs.org/" rel="nofollow noreferrer">vue-meta</a> for SEO purposes, but after a couple months, my coverage report shows multiple errors, and I can't get any pages returned in Google, even when searching on the site name or a specific string of text used on the site.</p>
  <p>Here's my setup:</p>
  <ol>
  <li>My markdown content is stored in <code>/content/posts</code></li>
  <li>In my <code>blog/index.vue</code> file, this is what I have for my meta tags and data fetching:</li>
  </ol>
  <pre><code>&lt;script&gt;
  export default {
    name: 'Posts',
    head() {
      return {
        title: 'Blog Posts',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Example Site blog index'
          },
          {
            hid: 'link',
            name: 'link',
            content: 'https://example.com/blog'
          }
        ]
      }
    },
    async asyncData({ $content, params }) {
      const posts = await $content('posts', params.slug)
        .only(['title', 'description', 'publishDate', 'slug'])
        .sortBy('publishDate', 'desc')
        .fetch()
  
      return {
        posts
      }
    },
  };
  &lt;/script&gt;
  </code></pre>
  <ol start="3">
  <li>In my <code>/blog/_slug/index.vue</code> page, I'm doing almost the same thing.</li>
  </ol>
  <pre><code>export default {
    name: 'Post',
    computed: {
      pageConfig() {
        return {
          identifier: this.post.slug
        }
      }
    },
    head() {
      return {
        title: this.post.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.post.description
          },
          {
            property: &quot;og:site_name&quot;,
            hid: &quot;og:site_name&quot;,
            vmid: &quot;og:site_name&quot;,
            content: &quot;My Site Name&quot;
          },
          {
            property: &quot;og:title&quot;,
            hid: &quot;og-title&quot;,
            vmid: &quot;og-title&quot;,
            content: this.post.title
          },
          {
            property: &quot;og:description&quot;,
            hid: &quot;og-description&quot;,
            vmid: &quot;og-description&quot;,
            content: this.post.description
          },
          {
            property: &quot;og:type&quot;,
            hid: &quot;og-type&quot;,
            vmid: &quot;og-type&quot;,
            content: &quot;article&quot;
          },
          {
            property: &quot;og:url&quot;,
            hid: &quot;og-url&quot;,
            vmid: &quot;og-url&quot;,
            content: 'https://example.com/blog/' + this.post.slug
          },
          {
            hid: &quot;link&quot;,
            name: &quot;link&quot;,
            content: 'https://example.com/blog/' + this.post.slug
          },
        ],
        link: [
          {
            rel: 'canonical',
            href: 'https://example.com/blog/' + this.post.slug
          }
        ]
      }
    },
    async asyncData({ $content, params }) {
      const post = await $content('posts', params.slug).fetch()
  
      return  {
        post
      }
    },
  }
  </code></pre>
  <ol start="4">
  <li>I'm using this to generate my sitemap in <code>nuxt.config.js</code></li>
  </ol>
  <pre><code>  sitemap: {
      path: '/sitemap.xml',
      hostname: process.env.BASE_URL,
      gzip: true,
      routes: async () =&gt; {
        let routes = []
        const { $content } = require('@nuxt/content')
        let posts = await $content('posts').fetch()
        for (const post of posts) {
          routes.push(`blog/${post.slug}`)
        }
        return routes
      },
    }
  </code></pre>
  <p>and this generates a sitemap at <code>/sitemap.xml</code> with the following structure</p>
  <pre><code>&lt;urlset xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot; xmlns:news=&quot;http://www.google.com/schemas/sitemap-news/0.9&quot; xmlns:xhtml=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:mobile=&quot;http://www.google.com/schemas/sitemap-mobile/1.0&quot; xmlns:image=&quot;http://www.google.com/schemas/sitemap-image/1.1&quot; xmlns:video=&quot;http://www.google.com/schemas/sitemap-video/1.1&quot;&gt;
  &lt;url&gt;
    &lt;loc&gt;https://example.com/blog/blog-post-1&lt;/loc&gt;
  &lt;/url&gt;
  &lt;url&gt;
    &lt;loc&gt;https://example.com/blog/blog-post-2&lt;/loc&gt;
  &lt;/url&gt;
  &lt;url&gt;
    &lt;loc&gt;https://example.com/blog/blog-post-3&lt;/loc&gt;
  &lt;/url&gt;
  
  
  &lt;/urlset&gt;
  </code></pre>
  <ol start="5">
  <li>I submitted my sitemap to Google.</li>
  </ol>
  <p>When I look at my Coverage report in Google Search Console, I have two main problems:</p>
  <ol>
  <li>A large number of posts listed under <code>Not Found (404)</code> with a URL of <code>https://example.com/blog/blog/my-blog-post</code> (two <code>/blog</code>s in the URL). I've noticed this happens sometimes when I click on a post right after deploying to Netlify. I've looked around the code, and I can't find where I might be adding an extra <code>/blog</code> in the URL.</li>
  <li>An equally large number under <code>Alternate page with proper canonical tag</code>. Before I put the canonical tag in my <code>/_slug/index/vue</code> header, I got errors about missing a canonical tag, and now that I put that in, I get this error instead.</li>
  </ol>
  <p>What do I need to do to fix these errors and get my content correctly indexed?</p>