Internal Linking Strategy for Vue Sites

Google uses links to discover pages and understand relevance. Internal links also help visitors reach related content. Build links around those tasks rather than promises about PageRank amounts or indexing speed.

Why Internal Links Matter

Internal links connect useful pages and explain their relationships through anchor text and surrounding content. A sitemap can provide additional discovery URLs, but it does not replace navigation for visitors.

Crawl Depth

Crawl depth describes the number of link steps from a chosen starting page. A shallow route to important content can make navigation easier. Google does not publish a universal three-click limit or a daily-versus-weekly crawl schedule by depth.

Home
└── Features hub
    ├── Color guide
    └── Font guide

This illustrative hierarchy describes navigation, not measured crawl or indexing rates.

PageRank Distribution

Google uses links as ranking signals, but a raw internal link count does not determine a page's ranking. Do not infer current production weighting from a patent or assign a fixed amount of ranking power to an individual link.

Topical Authority

Link related resources where their connection helps the reader. Descriptive anchors and relevant surrounding text help Google understand the destination. A topic cluster does not establish a guaranteed authority score.

Hub and Spoke Architecture

A hub introduces a topic and links to its child pages. Child pages can link back and reference useful siblings. This is one organizational pattern, rather than a universally strongest ranking strategy.

This complete FeatureHub.vue component accepts preloaded page data. Install Vue Router and declare the linked routes first. If you use SSR or generation, provide the data before rendering to include the links in initial HTML:

<script setup lang="ts">
import { RouterLink } from 'vue-router'

const props = defineProps<{
  features: Array<{ path: string, title: string, description: string }>
}>()
</script>

<template>
  <main>
    <h1>Features</h1>
    <ul>
      <li v-for="feature in props.features" :key="feature.path">
        <RouterLink :to="feature.path">
          {{ feature.title }}
        </RouterLink>
        <p>{{ feature.description }}</p>
      </li>
    </ul>
  </main>
</template>

The data loader belongs to your app. Browser-only loading can add links later; verify rendered HTML instead of assuming those links exist in the initial response.

Implementing with RouterLink

RouterLink normally renders an anchor and also supports client navigation. Its custom mode requires you to supply the link markup. A regular <a href> is also suitable for discovery.

Anchor Text Matters

Google recommends descriptive, natural anchor text. Name the destination and give the reader enough context:

<p>Read the <a href="/guides/vue-titles">Vue title guide</a> for title templates.</p>

Avoid ambiguous anchors such as “this link” when a specific label would explain the next page. Do not stuff every keyword into the link text.

Breadcrumb Navigation

Visible breadcrumbs can show where a page sits in a hierarchy. BreadcrumbList markup can make a page eligible for Google's breadcrumb presentation; Google does not guarantee display.

This complete component describes one illustrative page. Install the Unhead plugin and Vue Router before rendering it. Its fixed JSON-LD contains trusted author-supplied values:

<script setup lang="ts">
import { useHead } from '@unhead/vue'
import { RouterLink } from 'vue-router'

useHead({
  script: [{
    type: 'application/ld+json',
    innerHTML: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'BreadcrumbList',
      'itemListElement': [
        { '@type': 'ListItem', 'position': 1, 'name': 'Home', 'item': 'https://example.com/' },
        { '@type': 'ListItem', 'position': 2, 'name': 'Features', 'item': 'https://example.com/features' },
        { '@type': 'ListItem', 'position': 3, 'name': 'Color guide' }
      ]
    })
  }]
})
</script>

<template>
  <nav aria-label="Breadcrumb">
    <ol>
      <li>
        <RouterLink to="/">
          Home
        </RouterLink>
      </li>
      <li>
        <RouterLink to="/features">
          Features
        </RouterLink>
      </li>
      <li aria-current="page">
        Color guide
      </li>
    </ol>
  </nav>
</template>

Validate the generated JSON-LD and confirm that the visible hierarchy matches the page. Eligibility and parser success do not prove a search feature will appear.

Contextual Links in Content

Place a link beside the explanation that makes its destination useful. Do not assume a body link always outweighs a navigation or footer link.

Related Articles Component

Save this complete component as RelatedArticles.vue. It expects an installed router and preloaded related-page data:

<script setup lang="ts">
import { RouterLink } from 'vue-router'

const { relatedPages = [] } = defineProps<{
  relatedPages?: Array<{ path: string, title: string }>
}>()
</script>

<template>
  <aside v-if="relatedPages.length">
    <h2>Related Articles</h2>
    <ul>
      <li v-for="page in relatedPages" :key="page.path">
        <RouterLink :to="page.path">
          {{ page.title }}
        </RouterLink>
      </li>
    </ul>
  </aside>
</template>

Pass the current page's related records to it. If you load them in the browser, handle failed requests and route changes. Do not pass untrusted HTML directly to v-html to add links.

Markdown Content Links

A Markdown renderer can turn [Vue title guide](/guides/vue-titles) into an anchor. Inspect its HTML output, including any sanitization and URL rewriting. The Markdown source alone does not prove a crawlable link exists on the served page.

Navigation and Footer Links

Site Navigation

Choose links that help visitors reach important sections. A navigation component can render a data list using the same RouterLink pattern as the hub. Do not impose a universal five-to-seven-link ceiling or claim each extra link causes a measurable ranking loss.

Navigation vs Footer Weight

Use the main navigation for primary tasks and the footer for useful supporting destinations. Neither location has a documented fixed PageRank weight. Check whether the links are present and usable on the actual pages.

Internal Links and AI Search

AI products use different crawling, search, and retrieval systems. Do not assume every provider shares a JavaScript limitation or follows a specific link order.

For Google's AI features, ordinary SEO practices still apply. Clear links help readers and discovery, but do not guarantee an AI citation.

Auditing Your Link Graph

Compare discovered links with a published-page inventory from your router, generator, CMS, or data layer. A directory of .vue files is not automatically a route inventory in plain Vue Router.

A crawler report reflects its seed URLs, rendering mode, permissions, and configured scope. It cannot discover an unknown orphan merely by following the same internal links that fail to reach it. For example, Screaming Frog's orphan-page workflow combines crawl results with additional URL sources.

Checking Crawl Depth in Search Console

The Page indexing report's “Discovered, currently not indexed” status does not prove excessive crawl depth. Inspect the URL, rendering, links, and site condition. Use a crawler's link graph to measure depth from a chosen starting page, and keep that measurement separate from Google's indexing state.

Identifying Orphan Pages

This complete pure utility finds pages that the supplied link graph cannot reach from chosen starting pages. Inputs must already use the same URL policy. It does not fetch pages or infer redirects:

export function findOrphans(
  pages: string[],
  links: Array<{ source: string, target: string }>,
  seeds: string[]
): string[] {
  const known = new Set(pages)
  const pending = seeds.filter(page => known.has(page))
  const reachable = new Set<string>()

  for (let index = 0; index < pending.length; index++) {
    const page = pending[index]
    if (reachable.has(page))
      continue
    reachable.add(page)
    for (const link of links) {
      if (link.source === page && known.has(link.target) && !reachable.has(link.target))
        pending.push(link.target)
    }
  }

  return pages.filter(page => !reachable.has(page))
}

Choose starting pages explicitly, such as the normalized home URL. A self-link or a disconnected group of interlinked pages does not establish a path from that start. A reported orphan can still have external discovery sources; the result concerns this supplied internal graph only.

Common Mistakes

Orphan Pages

A generated route pattern does not create an incoming link. Add a useful hub or contextual link for each important published page, then compare the graph with the actual page inventory.

JavaScript Navigation Without Links

A button's click handler does not supply an anchor href. Use RouterLink or a regular anchor when the action is navigation that should provide a discovery path. Keep buttons for actions that need button semantics.

Excessive nofollow on Internal Links

Do not use nofollow as an internal crawl-control mechanism. Google's link qualification guidance treats qualifying attributes as hints, rather than a promise about PageRank transfer. Apply qualifications where the relationship calls for them.

Linking to Noindexed Pages

A useful login, account, or support page can deserve a navigation link even when you exclude it from Search. Noindex controls indexing, not whether the link serves the user. Check that your indexable content also has appropriate discovery links.

Broken Links After URL Changes

Update links when URLs change. If an appropriate replacement exists, configure a server or host redirect and verify it. A Vite development proxy does not configure production redirects, and Cloudflare Pages _routes.json controls function invocation rather than defining redirect targets.

Use the redirect guide for the server boundary. Check actual destination statuses and avoid unsupported claims that every old URL must redirect.

Checklist