The "View Sources" UI is the frontend component generative answer engines (Perplexity, SearchGPT, Gemini) use to display 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 how the engine retrieves, caches, and truncates Favicons, Open Graph 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 SEO was built on a linear assumption: verticality implies hierarchy. In a Google SERP, result #1 sits spatially above result #2, and users are trained to scan down. The blue link offered generous real estate: a ~60-character title tag, a ~160-character meta description (two full lines), and often a visible URL slug for context. That gave marketers roughly 220 characters of "ad copy" to persuade a 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 shift introduces three new constraints.
The three constraints: horizontal equality (cards sit side by side, sharing visual weight, reducing the winner-take-all bias of vertical lists), visual dependency (no meta description means the user judges credibility entirely on your favicon and domain name), and aggressive truncation (the narrow card chops titles after 35-40 characters, making long-tail SEO titles useless). If you're winning the Share of Model war but failing the UI rendering test, you're performing "Ghost Work": you provide the value, but you get zero traffic credit.
Part 2: Deconstructing the "Source Card" Anatomy
Based on analysis of Perplexity's frontend and 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 a browser-tab decoration; it's your brand logo. Perplexity displays these icons at roughly 16x16 or 32x32 pixels, often against a dark-mode background. Many sites still use old .ico files that lack transparency, so on a dark interface a white-square favicon looks jagged. Worse, if the bot can't find a valid favicon it assigns a generic gray globe. In a split-second decision, users equate the gray globe with "spam farm" and a crisp custom logo with "verified source."
2. The Hook: The Open Graph Title (Not the HTML Title)
A critical nuance: while Google relies heavily on the <title> tag, modern answer engines often prefer the og:title. The Open Graph protocol was designed for cards; the HTML title was designed for browser tabs. A traditional 72-character SEO title like "How to Optimize JSON-LD for Search Engines | The Ultimate Guide 2025" renders in Perplexity as "How to Optimize JSON-LD for...", cutting off both the hook ("Search Engines") and the authority signal ("Ultimate Guide").
3. The Verification: The Domain Name
The Source Card prominently displays the root domain (e.g. websiteaiscore.com). If you host content on help.support.hubspot.com, the card truncates this to help.support.... This reinforces the need for a strong Entity Home structure: consolidating content onto the root domain keeps your brand name 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, heavily weighted by backlinks, the Citation Rank in an answer engine appears weighted by token contribution. When an LLM generates an answer, it ingests text chunks from multiple sources into its context window, then attends to specific tokens to build the response. Card #1 is usually the source that contributed the most factual tokens to the final answer; cards #2-4 provided corroborating or supplementary detail.
The implication for content strategy: to rank #1 in the carousel, your content can't just be relevant, it must be dense. Fluff-filled introductions are discarded, and the model prioritizes high Information Gain. This is why strict data formatting like the Markdown tables strategy is so effective: it provides high-density tokens the AI loves to cite.
Part 4: Technical Implementation, The "Head" Stack
Inject a specific set of tags into your <head> to control how Perplexity and SearchGPT render your card. This is your UI control plane.
Critical Audit: The "Blocked Asset" Trap
A fatal error many developers make is blocking the assets. You might have a perfect robots.txt for your HTML pages, but is your /assets/ folder blocked? If you block GPTBot or PerplexityBot from your .png or .svg files to save bandwidth, the AI cannot fetch your favicon and renders the gray globe. Ensure your CDN and robots.txt explicitly allow image paths for AI user agents. We detailed the same logic in the empty-shell / client-side rendering audit: if the bot can't load the resource, whether JS or a PNG, the resource doesn't exist.
Part 5: Platform Comparison
Not all Source Cards are created equal. Optimize for the lowest common denominator.
Minimalist card: favicon + domain + title. Thumbnails rarely show in "Pro" mode. Strategy: high-contrast favicon is vital and titles must stay under 40 characters.
Visual tile (like Google Discover): og:image + title, with a large thumbnail pulled from the featured image. Strategy: your og:image can't be a stock photo. Add a text overlay like a YouTube thumbnail, since the title may render small.
"Chip" or carousel keyed on the domain name. Strategy: strong entity authority. Gemini often groups citations by brand name rather than article title.
Part 6: The "Favicon Blindness" Case Study
The query: "Best enterprise firewall pricing." The AI answer lists three options: Cisco, Palo Alto, and Fortinet. Now look at the source carousel.
The user scans the cards and their brain seeks patterns: two "brands" and one "generic link." Even if your content was the primary source for the text answer, the user clicks Card 1 or Card 2 for verification. You did the work; Cisco got the traffic. This is Favicon Blindness, and fixing it requires zero new content, just a 3KB PNG and a line of HTML.
Part 7: Advanced Tactics, "Title Front-Loading"
Since Perplexity truncates titles aggressively, rewrite your og:title tags using front-loading. The old SEO style stuffed keywords at the end: "Why We Switched from React to Vue: A Complete Engineering Case Study for SaaS" renders as "Why We Switched from React to Vue: A Comp...", losing the SaaS context. The AEO style front-loads: "React vs Vue: SaaS Engineering Case Study" renders in full, showing the comparison and the industry context instantly.
Audit your top 20 pages. Do the first 35 characters of the og:title convey the entire hook? If not, rewrite them. This doesn't affect your Google ranking (Google uses the <title> tag) but drastically improves your AI CTR.
See your Source Card the way Perplexity renders it.
Free audit. Checks your favicon, og:title truncation, and blocked-asset traps so your citation card looks like a brand, not a gray globe.
Audit your Source Card →Part 8: Key Takeaways for the Engineering Team
- Favicons are mission critical. Assign a ticket today: create a high-contrast, transparent 192x192 PNG favicon and 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. brand.com/blog looks more authoritative in a card than blog.brand.com.
- Visual audit. Regularly query your own brand on Perplexity, screenshot your Source Card, and ask: "Would I click this?"
References & Further Reading
- Open Graph Protocol: The Standard. Documentation on how og:title and og:image are rendered by social and card parsers. https://ogp.me/
- Perplexity AI: Interface Guide. Official FAQ on how sources are selected and displayed in the UI. 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. https://developers.google.com/search/docs/appearance/favicon-in-search
