What is the difference between SEO and AEO?

SEO focuses on ranking links in a list. AEO, or Answer Engine Optimization, focuses on being the single correct answer provided by a voice assistant or chatbot. Our tool optimizes for the latter.

Does this replace my current SEO tools?

No. This works alongside them. While your traditional tools handle keywords and backlinks, websiteaiscore.com handles semantic structure and machine readability.

How do I fix the errors found in the audit?

Every error comes with a specific recommendation. We provide the exact code snippets or content structural changes needed to resolve the issue and improve your score.

Reverse Engineering Perplexity: The "View Sources" UI Guide

Reverse Engineering Perplexity: Analyzing the "View Sources" UI and the Death of the Blue Link

Definition

The "View Sources" UI is the frontend interface component used by Generative Answer Engines (Perplexity, SearchGPT, Gemini) to display the citations for a synthesized answer. Unlike Google's traditional SERP—a vertical list of 10 "Blue Links" with 160-character descriptions—the AI UI manifests as a horizontal, scrollable carousel of "Source Cards." Understanding the rendering logic of these cards—specifically how the engine retrieves, caches, and truncates Favicons, Open Graph (OG) Titles, and Domain Names—is the foundational mechanism of CTR Optimization in the AEO era.

Part 1: The Paradigm Shift—From "List" to "Carousel"

For twenty-five years, the psychology of Search Engine Optimization (SEO) was built on a linear assumption: Verticality implies Hierarchy.

In a Google SERP (Search Engine Results Page), result #1 is spatially above result #2. Users are trained to scan down. The "Blue Link" offered a generous amount of real estate:

Title Tag: ~60 characters.
Meta Description: ~160 characters (two full lines of text).
URL Slug: Often visible, providing context (/blog/technical-seo).

This gave marketers roughly 220 characters of "Ad Copy" to persuade the user to click.

The Perplexity Interface destroys this real estate. When Perplexity or SearchGPT answers a question, the "Search Results" are demoted to footnotes. The primary visual element is the "Sources Carousel" located above the answer (in Perplexity) or as a sidebar (in SearchGPT).

This UI shift introduces three new constraints:

Horizontal Equality: Cards are displayed side-by-side. Card #1 and Card #2 often share the same visual weight, reducing the "Winner Take All" bias of vertical lists.
Visual Dependency: The removal of the Meta Description means the user cannot read a summary of your page. They must judge your credibility entirely on your Favicon and your Domain Name.
Aggressive Truncation: The card format is narrow. Titles are often chopped after 35-40 characters, rendering traditional long-tail SEO titles useless.

If you are winning the Share of Model war (i.e., the AI is using your content to generate the answer), but you are failing the UI Rendering Test, you are essentially performing "Ghost Work." You provide the value, but you get zero traffic credit.

Part 2: Deconstructing the "Source Card" Anatomy

To optimize for this new interface, we must reverse-engineer the specific assets the AI retrieves to build the card. Based on our analysis of Perplexity’s frontend and OpenAI’s SearchGPT prototypes, the Source Card is composed of three atomic elements.

1. The Trust Anchor: The Favicon

In the world of AI, the Favicon is no longer just a browser tab decoration; it is your Brand Logo.

The Issue: Perplexity displays these icons at roughly 16x16 or 32x32 pixels, often against a dark mode background.
The Failure Mode: Many sites use old .ico files that lack transparency. On Perplexity’s dark interface, a white-square favicon looks jagged and amateurish. Worse, if the bot cannot find a valid favicon, it assigns a generic "Gray Globe" icon.
Psychological Impact: In a split-second decision, users equate the "Gray Globe" with "Spam Farm" or "Low Authority." Users equate a crisp, custom logo with "Verified Source."

2. The Hook: The Open Graph Title (Not the HTML Title)

This is a critical nuance. While Google relies heavily on the <title> tag, modern Answer Engines often prefer the og:title (Open Graph Title) tag.

Why? The Open Graph protocol (originally for Facebook/LinkedIn) was designed for cards, whereas the HTML Title is designed for browser tabs.
The Truncation Trap: A traditional SEO title looks like this:
- "How to Optimize JSON-LD for Search Engines | The Ultimate Guide 2025" (72 characters).
The Perplexity Render:
- "How to Optimize JSON-LD for..." The hook ("Search Engines") and the authority signal ("Ultimate Guide") are cut off.

3. The Verification: The Domain Name

The Source Card prominently displays the root domain (e.g., websiteaiscore.com).

Subdomain Risk: If you host your content on help.support.hubspot.com, the card often truncates this to help.support....
The Fix: This reinforces the need for a strong Entity Home structure. Consolidating content onto the root domain ensures your brand name is always visible.

Part 3: The Ranking Logic of the Carousel

Why does one source get the #1 card slot while another gets #4? Unlike Google’s PageRank, which is heavily weighted by backlinks, the Citation Rank in an Answer Engine appears to be weighted by Token Contribution.

The "Token Weight" Hypothesis

When an LLM (Large Language Model) generates an answer, it ingests text chunks from multiple sources into its Context Window. It then attends to specific tokens to generate the response.

Card #1: Usually the source that contributed the most factual tokens to the final answer.
Card #2-4: Sources that provided corroborating evidence or supplementary details.

Implication for Content Strategy: To rank #1 in the carousel, your content cannot just be "relevant." It must be dense. Fluff-filled introductions are discarded. The model prioritizes dense Information Gain. This is why strict data formatting, like the Markdown Tables strategy we discussed, is so effective—it provides high-density tokens that the AI loves to cite.

Part 4: Technical Implementation – The "Head" Stack

You need to inject a specific set of tags into your <head> to control how Perplexity and SearchGPT render your card. This is your "UI Control Plane."

The Code Configuration

HTML

<head>

<title>Reverse Engineering Perplexity UI: The Complete Guide for 2025 | Website AI Score</title>

</head>

Critical Audit: The "Blocked Asset" Trap

There is a fatal error that many developers make: Blocking the Assets. You might have a perfect robots.txt strategy for your HTML pages, but is your /assets/ folder blocked?

If you block GPTBot or PerplexityBot from accessing your .png or .svg files (to save bandwidth), the AI cannot fetch your favicon. It will render the "Gray Globe" of death.

The Fix: Ensure your CDN and robots.txt explicitly ALLOW access to image paths for AI User Agents.

We detailed the dangers of unintentionally blocking bots in our Empty Shell / Client-Side Rendering Audit. The same logic applies here: if the bot can't load the resource (whether it's JS or a PNG), the resource doesn't exist.

Part 5: Platform Comparison (Perplexity vs. SearchGPT vs. Gemini)

Not all Source Cards are created equal. You must optimize for the lowest common denominator.

1. Perplexity.ai

Format: Minimalist Card.
Key Assets: Favicon + Domain + Title.
Thumbnail: Rarely shown in "Pro" mode, sometimes shown in "Discover."
Strategy: High-contrast Favicon is vital. Titles must be under 40 chars.

2. OpenAI SearchGPT (Prototype)

Format: Visual Tile (similar to Google Discover).
Key Assets: og:image + Title.
Thumbnail: Massive. It pulls the Featured Image.
Strategy: Your og:image cannot be a stock photo. It must have text overlay (like a YouTube thumbnail) because the title might be small.

3. Google Gemini (SGE)

Format: "Chip" or Carousel.
Key Assets: Domain Name.
Strategy: Strong entity authority. Gemini often groups citations by brand name rather than article title.

Part 6: The "Favicon Blindness" Case Study

Let’s look at a hypothetical scenario to understand the ROI of this optimization.

The Query: "Best Enterprise firewall pricing" The AI Answer: Lists 3 options: Cisco, Palo Alto, and "Fortinet."

The Source Carousel:

Card 1 (Cisco):
- Icon: The distinct Cisco bridge logo (Instantly recognizable).
- Title: "2025 Pricing Guide..."
Card 2 (Palo Alto):
- Icon: Neon distinctive logo.
- Title: "Enterprise Specs..."
Card 3 (Your Site - "TechReview.io"):
- Icon: Gray Globe (Because you blocked the .ico file).
- Title: "A Comprehensive Analysis of the Top..." (Truncated).

The User Behavior: The user scans the cards. Their brain seeks patterns. They see two "Brands" and one "Generic Link." Even if your content (Card 3) was the primary source for the text answer, the user clicks Card 1 or Card 2 for verification.

Result: You did the work. Cisco got the traffic.

This is Favicon Blindness. The user simply ignores the generic card. Fixing this requires zero new content—just a 3KB PNG file and a line of HTML code.

Part 7: Advanced Tactics – "Title Front-Loading"

Since we know Perplexity truncates titles aggressively, we must rewrite our og:title tags using the Front-Loading technique.

The "Old SEO" Style (Keyword Stuffing at the end):

Original: "Why We Switched from React to Vue: A Complete Engineering Case Study for SaaS"
Perplexity View: "Why We Switched from React to Vue: A Comp..."
Verdict: Okay, but loses the "SaaS" context.

The "AEO" Style (Front-Loaded):

Optimized: "React vs Vue: SaaS Engineering Case Study"
Perplexity View: "React vs Vue: SaaS Engineering Case Study"
Verdict: Perfect. The user sees the comparison and the industry context instantly.

Action Item: Audit your Top 20 pages. Manually check their og:title. Does the first 35 characters convey the entire hook? If not, rewrite them. This does not affect your Google Ranking (since Google uses the <title> tag), but it drastically improves your AI CTR.

Part 8: Key Takeaways for the Engineering Team

Favicons are Mission Critical: Assign a ticket to your design team today. Create a high-contrast, transparent PNG favicon (192x192). Verify it renders on dark mode.
Split Your Titles: Use <title> for Google (long-tail) and og:title for AI (short, punchy, front-loaded).
Unblock the Assets: Run a curl test masquerading as GPTBot against your favicon URL. If it returns 403, your Empty Shell Audit failed. Fix your WAF.
Consolidate Subdomains: If possible, move help docs and blogs to the root domain. brand.com/blog looks more authoritative in a card than blog.brand.com.
Visual Audit: Regularly query your own brand on Perplexity. Take a screenshot of your Source Card. Ask yourself: "Would I click this?"

References & Further Reading

Open Graph Protocol: The Standard. Documentation on how og:title and og:image are intended to be used and rendered by social parsers.
- Link: https://ogp.me/
Perplexity AI: Interface Guide. Official FAQ on how sources are selected and displayed in the UI.
- Link: https://www.perplexity.ai/hub/faq/what-are-sources
Google Developers: Favicon Best Practices. Technical requirements for search result icons, which many AI crawlers also respect.
- Link: https://developers.google.com/search/docs/appearance/favicon-in-search