Internal Linking Architecture: PageRank Distribution in Component-Based Apps

<!-- Classic HTML link (server-rendered) -->
<a href="/products/widget">View Widget</a>

/* When Googlebot crawls this page:
   1. Parses HTML, finds <a href> tag
   2. Adds /products/widget to crawl queue
   3. Follows link, crawls destination page
   4. Passes PageRank from current page to /products/widget

   Result: PageRank flows ✅
*/

// React Router SPA
<Link to="/products/widget">View Widget</Link>

/* Rendered HTML (initial): */
<a href="/products/widget">View Widget</a> ✅

/* But if JavaScript hasn't loaded yet, clicking does nothing
   If Googlebot crawls before rendering completes:
   - HTML link exists (discovered)
   - Destination page may not render content without JavaScript
   - If content loads client-side only, may not be indexed
*/

/* Timeline for Googlebot:
   1. Initial crawl: Fetches HTML, sees <a href>
   2. JavaScript rendering queue: Waits (could be hours/days on large sites)
   3. Rendering: Executes JavaScript, builds page
   4. If rendering budget exhausted: Content may not fully render
*/

// Next.js with server-side rendering
export default function HomePage({ products }) {
  return (
    <div>
      {products.map(p => (
        <Link href={`/products/${p.slug}`}>
          {p.name}
        </Link>
      ))}
    </div>
  );
}

export async function getServerSideProps() {
  const products = await fetchProducts();
  return { props: { products } };
}

/* What Googlebot sees (initial HTML):
<div>
  <a href="/products/widget">Widget</a>
  <a href="/products/gadget">Gadget</a>
  <!-- All links discoverable immediately -->
</div>

Timeline:
1. Googlebot crawls page
2. HTML contains full list of products + links
3. Links discovered and added to crawl queue
4. PageRank flows immediately ✅
*/

<Link href="/blog/post-1">Read Article</Link>

/* When link enters viewport:
   1. Next.js fetches /blog/post-1 (JSON data for page)
   2. Downloads JavaScript chunks for that page
   3. Caches in browser
   4. User clicks → instant navigation (no request)
*/

/* Network tab when scrolling:
   GET /_next/data/.../blog/post-1.json
   GET /_next/static/chunks/blog-post-1.js

   User hasn't clicked yet, but resources already downloaded
*/

// Disable prefetch for rarely-clicked links
<Link href="/legal/privacy-policy" prefetch={false}>
  Privacy Policy
</Link>

// Or conditional prefetch
<Link
  href="/product-detail"
  prefetch={isHighValueLink ? undefined : false}
>
  Product
</Link>

/* Example: SaaS pricing page architecture */

Hub: /pricing (comprehensive pricing guide)
├─ Spoke: /pricing/small-business
├─ Spoke: /pricing/enterprise
├─ Spoke: /pricing/nonprofit
└─ Spoke: /pricing/comparison

/* Internal linking structure: */
- Hub links to all 4 spokes
- Each spoke links back to hub
- Related spokes link to each other:
  - /pricing/small-business → /pricing/enterprise (upgrade path)
  - /pricing/nonprofit → /pricing/comparison

/* PageRank distribution:
   External link to /pricing → Flows to hub
   Hub distributes PageRank equally to 4 spokes
   Spokes pass PageRank back to hub (amplification)
*/

/* Example: Blog category architecture */

/blog/react-hooks
  ↕ ↕ ↕
/blog/useeffect-guide ⇄ /blog/usestate-tutorial
  ↕ ↕ ↕
/blog/custom-hooks ⇄ /blog/react-performance

/* Every related article links to 3-5 other related articles
   No central hub, distributed PageRank flow
*/

/* Top level: Hub-and-spoke for main categories */
Hub: /web-performance
├─ Spoke: /web-performance/lazy-loading
├─ Spoke: /web-performance/image-optimization
└─ Spoke: /web-performance/code-splitting

/* Within each spoke: Mesh for related content */
/web-performance/lazy-loading
  ⇄ /web-performance/intersection-observer
  ⇄ /web-performance/loading-attribute
  ⇄ /web-performance/image-optimization (back to sibling spoke)

/* Result:
   - Hub establishes category authority
   - Spokes distribute PageRank to related articles
   - Mesh within spokes maximizes discoverability
*/

<!-- Old PageRank sculpting strategy -->
<a href="/product">Product</a> <!-- Pass PageRank -->
<a href="/login" rel="nofollow">Login</a> <!-- Block PageRank -->
<a href="/signup" rel="nofollow">Signup</a> <!-- Block PageRank -->

/* Intended effect (pre-2009):
   Page has 10 PageRank points
   3 links total, 1 dofollow, 2 nofollow

   Old algorithm:
   - /product receives 10 points (only dofollow link)
   - /login receives 0 points (nofollow)
   - /signup receives 0 points (nofollow)

   Result: Concentrated PageRank on important pages ✅
*/

<!-- Same HTML -->
<a href="/product">Product</a>
<a href="/login" rel="nofollow">Login</a>
<a href="/signup" rel="nofollow">Signup</a>

/* Actual effect (current algorithm):
   Page has 10 PageRank points
   3 links total

   Current algorithm divides equally first:
   - Each link gets 10 ÷ 3 = 3.33 points allocated

   Then applies nofollow:
   - /product receives 3.33 points
   - /login nofollow → 3.33 points EVAPORATE (lost)
   - /signup nofollow → 3.33 points EVAPORATE (lost)

   Result: Total PageRank passed = 3.33 (not 10!)
   You lost 6.67 points by using nofollow ❌
*/

<a href="/related-article" rel="nofollow">Related</a>

/* Google may:
   1. Follow the link (ignore nofollow hint)
   2. Index the destination page
   3. Pass PageRank anyway

   You have no control over this
*/

/* Scenario: New blog post published */

Option A: Add to blog index only
- /blog → /blog/new-post
- Crawl depth: 2 clicks from homepage
- Googlebot discovers: 1-7 days (next blog index crawl)

Option B: Add to blog index + homepage + related posts
- /homepage → /blog/new-post
- /blog → /blog/new-post
- /blog/related-1 → /blog/new-post
- /blog/related-2 → /blog/new-post
- Crawl depth: 1 click from homepage
- Googlebot discovers: Hours to 1 day (homepage crawled daily)

/* PageRank distribution:
   Option A: Receives PageRank from blog index (moderate)
   Option B: Receives PageRank from 4 sources (higher)
*/

<!-- Weak anchor text -->
<a href="/web-performance">Click here</a>
<a href="/web-performance">Read more</a>

/* Problem: "Click here" tells Google nothing about destination */

<!-- Strong anchor text -->
<a href="/web-performance">web performance optimization guide</a>
<a href="/web-performance">improve Core Web Vitals</a>

/* Benefit: Anchor text reinforces /web-performance ranks for those terms */

// Next.js App Router (Server Components)
// app/blog/page.tsx

export default async function BlogPage() {
  const posts = await getPosts();
  const featured = await getFeaturedPost();

  return (
    <>
      {/* Hub link from homepage (fast discovery) */}
      <Link href="/blog">Blog</Link>

      {/* Featured post (receives extra PageRank) */}
      <article>
        <Link href={`/blog/${featured.slug}`}>
          {featured.title}
        </Link>
      </article>

      {/* Recent posts (mesh linking) */}
      {posts.map(post => (
        <article key={post.id}>
          <Link href={`/blog/${post.slug}`}>
            {post.title}
          </Link>

          {/* Related posts (mesh topology) */}
          {post.related.map(related => (
            <Link href={`/blog/${related.slug}`} key={related.id}>
              {related.title}
            </Link>
          ))}
        </article>
      ))}
    </>
  );
}

/* SEO benefits:
   - All links in server-rendered HTML
   - Hub-and-spoke from /blog to posts
   - Mesh linking between related posts
   - Descriptive anchor text (post titles)
   - Fast discovery (linked from homepage)
   - PageRank flows through all articles
*/