Tier 14 — Advanced & Immersive: AR/VR, voice search, 3D schema

Originally published at thatdevpro.com. This article is part of the 14-tier Engine Optimization stack from ThatDevPro, an SDVOSB-certified veteran-owned web + AI engineering studio. You are reading the Dev.to republish; the canonical source is on ThatDevPro.com. Source repo for the AI-citation surfaces: github.com/Janady13/aio-surfaces.

Tier Explanation: Forward-looking tier preparing your site for emerging technologies: AI agents, spatial computing, augmented/virtual reality, metaverse, Web3, and blockchain. As of 2026, most of these remain experimental for mainstream businesses, but selective adoption signals innovation, future-readiness, and brand authority. This tier is opt-in and platform-dependent — not every business needs every item. Implement based on audience and industry fit. All actions execute on website pages, schema, embedded experiences, and supporting infrastructure. Tiers 1–12 must be in place first (Tier 13 is retired/empty).

Related Frameworks

This tier implements the following framework documents in the /Framework/ library. Consult them for canonical reference, audit rubrics, and detailed implementation patterns.

• framework-agenticaisearch.md — Autonomous agent and task-execution optimization
• framework-multimodalsearch.md — Multimodal queries and AR/VR content
• framework-visualsearch.md — Google Lens, visual recognition
• framework-voicesearch.md — Voice and conversational interfaces
• framework-aicitations.md — Forward-looking AI engine support

A. AI Agents & Conversational Interfaces (1)

1. AGO — Agentic Commerce Optimization

• Add structured product data and API endpoints designed for AI agent consumption
• Build "For AI Agents" documentation page explaining how autonomous agents can interact with your site
• Implement function-calling-friendly schemas that AI agents can invoke programmatically
• Provide OpenAPI/Swagger specifications for any public APIs
• Use Action schema (e.g., OrderAction, BuyAction, ReserveAction) on product/service pages
• Build agent authentication endpoints supporting OAuth 2.0 for delegated user actions
• Test agent interactions with ChatGPT Operator, Claude Computer Use, and emerging agentic browsers
• Document agent rate limits, allowed actions, and error handling

Code Example — Action schema for agentic commerce:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Service",
  "name": "14-Tier Engine Optimization Audit",
  "provider": {"@id": "https://thatdeveloperguy.com/#organization"},
  "offers": {
    "@type": "Offer",
    "price": "997",
    "priceCurrency": "USD"
  },
  "potentialAction": [
    {
      "@type": "BuyAction",
      "target": {
        "@type": "EntryPoint",
        "urlTemplate": "https://thatdeveloperguy.com/api/checkout/audit?email={email}",
        "actionPlatform": ["http://schema.org/DesktopWebPlatform", "http://schema.org/MobileWebPlatform"],
        "httpMethod": "POST",
        "contentType": "application/json"
      },
      "result": {"@type": "Order"}
    },
    {
      "@type": "ReserveAction",
      "target": {
        "@type": "EntryPoint",
        "urlTemplate": "https://thatdeveloperguy.com/api/booking/discovery-call?email={email}&datetime={datetime}",
        "httpMethod": "POST"
      }
    }
  ]
}
</script>

<section class="for-ai-agents">
  <h1>For AI Agents</h1>
  <p>Agentic systems can interact with our service catalog via structured endpoints.</p>

  <h2>Available Actions</h2>
  <ul>
    <li><code>POST /api/checkout/audit</code> — Initiate audit purchase</li>
    <li><code>POST /api/booking/discovery-call</code> — Reserve a discovery call</li>
    <li><code>GET /api/services</code> — List all available services</li>
  </ul>

  <p><a href="/openapi.json">OpenAPI specification</a></p>
  <p><a href="/agents/auth-flow">OAuth 2.0 authentication for agents</a></p>
</section>

• Validation: Action schema validates, OpenAPI spec published, AI agents successfully complete test transactions

B. Augmented & Virtual Reality (3)

2. ARO — Augmented Reality Optimization

• Embed AR experiences on product pages: try-on, 3D placement, scale visualization
• Use <model-viewer> for cross-platform 3D model display with AR fallback
• Add model-3d and IfcProduct schema for 3D content
• Provide multiple format options: USDZ (iOS), GLB (Android/web), GLTF (industry standard)
• Optimize 3D models for web: compress textures, decimate meshes, target under 10MB
• Add fallback 2D images for users without AR-capable devices
• Track AR engagement: views, time spent, conversion rate vs non-AR pages
• Use AR for high-consideration purchases where physical visualization helps

Code Example — AR product viewer with model-viewer:

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>

<model-viewer
  src="/models/product.glb"
  ios-src="/models/product.usdz"
  alt="3D model of our product"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  poster="/models/product-poster.jpg"
  shadow-intensity="1"
  auto-rotate
  loading="lazy"
  style="width: 100%; height: 500px;">

  <button slot="ar-button" class="ar-button">
    👁️ View in Your Space
  </button>
</model-viewer>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Product Name",
  "image": "/products/product.jpg",
  "subjectOf": {
    "@type": "3DModel",
    "encoding": [
      {"@type": "MediaObject", "encodingFormat": "model/gltf-binary", "contentUrl": "/models/product.glb"},
      {"@type": "MediaObject", "encodingFormat": "model/vnd.usdz+zip", "contentUrl": "/models/product.usdz"}
    ]
  }
}
</script>

• Validation: AR viewer loads in under 5 seconds, works on iOS Quick Look + Android Scene Viewer + WebXR, conversion lift tracked

3. VRO — Virtual Reality Optimization

• Embed VR experiences and 360° tours where genuinely useful (real estate, hospitality, manufacturing, education)
• Use WebXR-compatible 360° viewers (Pannellum, Marzipano, A-Frame)
• Add VirtualLocation schema for VR-accessible spaces
• Provide non-VR fallback for users without headsets
• Optimize 360° media for streaming: progressive loading, lower resolution defaults
• Build dedicated /vr/ or /360-tour/ section with curated VR experiences
• Track VR engagement: load rate, time spent, headset usage vs desktop viewing
• Use VR primarily for businesses where spatial visualization adds genuine value (avoid VR-for-VR's-sake)

Code Example — 360° tour with A-Frame:

<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>

<a-scene embedded style="height: 500px;">
  <a-sky src="/360/our-office.jpg" rotation="0 -90 0"></a-sky>

  <a-camera>
    <a-cursor color="white"></a-cursor>
  </a-camera>
</a-scene>

<noscript>
  <p>Your browser doesn't support 360° tours. <a href="/360/our-office.jpg">View as standard image</a>.</p>
</noscript>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Place",
  "name": "ThatDeveloperGuy Office",
  "potentialAction": {
    "@type": "ViewAction",
    "target": "https://thatdeveloperguy.com/vr/office-tour/"
  }
}
</script>

• Validation: 360° tour loads on mobile and desktop, WebXR works on supported headsets, fallback works on legacy browsers

4. SPC — Spatial Computing Optimization

• Optimize for Apple Vision Pro, Meta Quest, and emerging spatial computing platforms
• Use spatial-aware metadata for 3D content placement and scale
• Implement progressive enhancement: 2D for traditional browsers, 3D for capable devices, spatial for headsets
• Use OcclusionCulling and LevelOfDetail techniques in 3D content
• Add spatial audio for 3D content where applicable
• Build dedicated experiences for spatial computing rather than ports of 2D experiences
• Test on actual Vision Pro and Quest hardware — emulators miss UX issues
• Track spatial computing user agents in analytics for usage measurement

Code Example — Spatial-aware progressive enhancement:

<script>
// Detect spatial computing capability
const isSpatial = window.matchMedia('(min-resolution: 4dppx)').matches &&
                  navigator.userAgent.includes('VisionOS');

if (isSpatial) {
  // Load full spatial experience
  document.body.classList.add('spatial-mode');
  loadScript('/js/spatial-experience.js');
} else if ('xr' in navigator) {
  // WebXR-capable but not spatial
  document.body.classList.add('webxr-mode');
  loadScript('/js/webxr-fallback.js');
} else {
  // Standard 2D experience
  document.body.classList.add('standard-mode');
}
</script>

<style>
/* Spatial-specific layout */
body.spatial-mode {
  font-size: 1.2em; /* Larger text for distance viewing */
}
body.spatial-mode .product-image {
  /* Use 3D models instead of flat images */
}
</style>

• Validation: Tested on real Vision Pro / Quest devices, spatial UX optimized, fallback experience verified

C. Metaverse & Immersive Marketing (1)

5. MVO — Metaverse Marketing Optimization (renamed from MMO to avoid Tier 3 conflict)

• Establish presence in metaverse platforms relevant to your audience (Roblox, Fortnite, Decentraland, Spatial)
• Build virtual showroom or experience space if industry fit exists
• Create landing pages on owned domain for metaverse events with Event schema
• Use VirtualLocation schema for metaverse-based events and experiences
• Pursue metaverse-native advertising and brand placements where audience exists
• Build branded virtual assets (clothing, items, environments) for community building
• Track metaverse engagement: visits, time spent, social interactions, conversion to real-world action
• Avoid metaverse for metaverse's sake — only invest where audience genuinely engages there

Code Example — Metaverse event landing page:

<article class="metaverse-event" itemscope itemtype="https://schema.org/Event">
  <h1 itemprop="name">Virtual AI Search Summit 2026</h1>

  <div itemprop="location" itemscope itemtype="https://schema.org/VirtualLocation">
    <meta itemprop="url" content="https://spatial.io/s/AI-Summit-2026">
    <p>Hosted in Spatial — accessible from any device, no headset required</p>
  </div>

  <time itemprop="startDate" datetime="2026-06-15T18:00">June 15, 2026 at 6:00 PM UTC</time>

  <p itemprop="description">
    Join 500+ marketers in our virtual auditorium for keynotes, networking, and Q&A
    with industry leaders. Free for Pro subscribers.
  </p>

  <div class="entry-options">
    <a href="https://spatial.io/s/AI-Summit-2026" rel="noopener">Enter via Browser</a>
    <a href="oculusstore://app.spatial.io" rel="noopener">Enter via Quest</a>
    <a href="visionos://spatial.io/AI-Summit-2026" rel="noopener">Enter via Vision Pro</a>
  </div>
</article>

• Validation: Metaverse presence established where audience exists, virtual events tracked, metaverse-driven conversions measured

D. Web3 & Blockchain (3)

6. W3O — Web3 Optimization

• Add wallet connect functionality where Web3 features genuinely benefit users
• Display blockchain verification badges and transaction transparency
• Use BlockchainProtocol schema for Web3-native content
• Implement gasless transactions where user experience matters
• Build dedicated /web3/ section explaining Web3 features in plain language
• Avoid Web3 buzzword stuffing — only adopt where it solves real user problems
• Test wallet integrations across major wallets (MetaMask, Coinbase, Phantom, Rainbow)
• Track Web3 vs traditional auth conversion rates to measure adoption

Code Example — Wallet connect with progressive enhancement:

<section class="web3-auth">
  <h2>Sign In</h2>

  <button onclick="signInWithEmail()" class="btn-primary">Sign In with Email</button>

  <details>
    <summary>Web3 Sign In (Optional)</summary>
    <button onclick="connectMetaMask()" class="btn-web3">
      <img src="/icons/metamask.svg" alt="" width="24" height="24">
      Connect MetaMask
    </button>
    <button onclick="connectCoinbase()" class="btn-web3">
      <img src="/icons/coinbase.svg" alt="" width="24" height="24">
      Connect Coinbase Wallet
    </button>
    <p><small>Web3 sign-in is optional. We use it only for verified ownership of your Tier-3 NFT credential.</small></p>
  </details>
</section>

<script>
async function connectMetaMask() {
  if (typeof window.ethereum === 'undefined') {
    alert('Please install MetaMask first.');
    return;
  }

  try {
    const accounts = await window.ethereum.request({method: 'eth_requestAccounts'});
    const address = accounts[0];

    // Sign message to verify ownership
    const message = `Sign in to ThatDeveloperGuy: ${Date.now()}`;
    const signature = await window.ethereum.request({
      method: 'personal_sign',
      params: [message, address]
    });

    // Send to backend for verification
    await fetch('/api/web3/auth', {
      method: 'POST',
      body: JSON.stringify({address, message, signature})
    });
  } catch (err) {
    console.error('Web3 auth failed:', err);
  }
}
</script>

• Validation: Wallet connect works across major wallets, Web3 features have genuine use cases, adoption tracked vs traditional auth

7. NFO — NFT Optimization (renamed from NFT SEO)

• Create dedicated NFT collection landing pages with metadata, schema, and rarity data
• Add verifiable ownership proofs via blockchain explorer links
• Use CollectibleItem schema for individual NFTs and CreativeWorkSeries for collections
• Provide IPFS gateway URLs alongside Arweave alternatives for decentralized hosting
• Display real-time floor price, volume, and ownership stats from OpenSea API
• Build collection lore/story pages — narrative drives NFT value beyond pure speculation
• Cross-reference NFT collections with creator entity on chain
• Track on-chain provenance from minting through every transfer

Code Example — NFT collection page with schema:

<article class="nft-collection" itemscope itemtype="https://schema.org/CreativeWorkSeries">
  <h1 itemprop="name">14-Tier Framework Genesis Pass</h1>

  <p itemprop="description">
    Limited edition (1,400 supply) NFT pass granting lifetime access to all framework updates,
    private community, and quarterly office hours.
  </p>

  <dl class="collection-stats">
    <dt>Total Supply</dt><dd>1,400</dd>
    <dt>Floor Price</dt><dd id="floor-price">2.5 ETH</dd>
    <dt>Total Volume</dt><dd id="total-volume">847 ETH</dd>
    <dt>Owners</dt><dd id="owner-count">623</dd>
  </dl>

  <div class="blockchain-links">
    <a href="https://opensea.io/collection/14tier-genesis" rel="noopener">View on OpenSea</a>
    <a href="https://etherscan.io/address/0x..." rel="noopener">Contract on Etherscan</a>
  </div>
</article>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CreativeWorkSeries",
  "name": "14-Tier Framework Genesis Pass",
  "creator": {"@id": "https://thatdeveloperguy.com/#organization"},
  "datePublished": "2026-01-15",
  "url": "https://thatdeveloperguy.com/nft/genesis-pass/",
  "sameAs": [
    "https://opensea.io/collection/14tier-genesis",
    "https://etherscan.io/address/0x..."
  ]
}
</script>

• Validation: NFT collection metadata correct on-chain, schema validates, collection stats updated in real-time

8. BLO — Blockchain Optimization (renamed from Blockchain SEO)

• Display blockchain verification badges where relevant (verified credentials, on-chain reviews, immutable records)
• Add transaction explorer links for transparency and trust
• Use MerkleProof and verification schemas for cryptographic claims
• Pursue eligibility for blockchain-based reputation systems
• Build content optimized for "blockchain + [your industry]" search queries
• Implement ENS or alternative naming systems for Web3 brand presence
• Add IPFS-pinned versions of critical content for censorship resistance
• Track Web3-native referral traffic and engagement separately

Code Example — Verifiable on-chain credential display:

<section class="verified-credential">
  <h2>Verified Service-Disabled Veteran-Owned Small Business</h2>
  <p>Certification verified on-chain via SBA registry.</p>

  <dl class="verification-meta">
    <dt>SDVOSB Certification</dt>
    <dd>Verified ✓</dd>
    <dt>Issued By</dt>
    <dd>U.S. Small Business Administration</dd>
    <dt>Verification Hash</dt>
    <dd><code>0x7a6f...3c4e</code></dd>
    <dt>Block Number</dt>
    <dd>18,234,567</dd>
  </dl>

  <a href="https://etherscan.io/tx/0x7a6f...3c4e" rel="noopener" class="btn-verify">
    Verify On-Chain
  </a>
</section>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "EducationalOccupationalCredential",
  "name": "Service-Disabled Veteran-Owned Small Business",
  "credentialCategory": "certification",
  "recognizedBy": {
    "@type": "GovernmentOrganization",
    "name": "U.S. Small Business Administration"
  },
  "url": "https://etherscan.io/tx/0x7a6f...3c4e"
}
</script>

• Validation: On-chain credentials verify via blockchain explorer, schema validates, "blockchain + topic" queries surface owned content

Summary

• Total items: 8
• Sub-clusters: 4 (AI Agents & Conversational Interfaces, Augmented & Virtual Reality, Metaverse & Immersive Marketing, Web3 & Blockchain)
• Format: Each item includes 7–8 implementation steps, a code example, and a validation criterion
• Net change from original: 0 dropped, 0 added, 1 acronym conflict resolved (MMO → MVO since MMO is Multimodal in Tier 3), NFT/Blockchain renamed for consistent codes
• Position in stack: Future-readiness tier — depends on Tiers 1–12 (skipping retired Tier 13). Opt-in based on industry fit. Most businesses should implement Tiers 1–12 fully before considering Tier 14 investments.

Important Note on This Tier

Unlike Tiers 1–12 which apply universally, Tier 14 is selective adoption. Implement these only when:

• Your audience demonstrably uses these technologies
• Your industry has genuine spatial/3D/Web3 use cases (real estate, gaming, art, certain B2C verticals)
• You've fully implemented Tiers 1–12 first
• You have budget for ongoing maintenance — these technologies evolve rapidly

Most professional service businesses (including ThatDeveloperGuy's typical client base) benefit minimally from Tier 14 adoption beyond AGO (Agentic Commerce) — which IS rapidly becoming mainstream as AI agents proliferate.

About this series

This is one of 14 articles in ThatDevPro's Engine Optimization stack — a productized SEO + AEO + AIO + GEO service. Each tier is a self-contained framework with concrete checklists, validation steps, and code patterns.

Canonical source for this article: https://www.thatdevpro.com/insights/seo-tier-14-advanced-and-immersive/

The 14-tier series:

1. Tier 1 — Foundation
2. Tier 2 — Search Visibility
3. Tier 3 — AI Domination
4. Tier 4 — Entity and Authority
5. Tier 5 — Local Domination
6. Tier 6 — Content and Multimedia
7. Tier 7 — Social and Community
8. Tier 8 — Data, Analytics, Conversion
9. Tier 9 — Monitoring and Intelligence
10. Tier 10 — Workflow and Operations
11. Tier 11 — Marketplace and Retail
12. Tier 12 — International
13. Tier 14 — Advanced and Immersive

Tier 13 is retired.

Need this implemented on your site? ThatDevPro ships the full 14-tier stack as a productized service. SDVOSB-certified veteran-owned. Cassville, Missouri. See the Engine Optimization service.

Open-source tooling powering this series:

• aio-surfaces — Python toolkit (MIT) for generating llms.txt + aeo.json + entity.json + brand.json
• llms.txt generator — live Hugging Face Space