Joseph Anady

Posted on May 23 • Originally published at thatdevpro.com

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

#seo #ar #vr #voicesearch

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:

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

DEV Community