If a customer sees a well-crafted product page, but ChatGPT sees an empty `alt`, a missing price in HTML, and an unnamed button, the issue is not design. The issue is that crucial information exists only visually. In practice, check: H1, description, price, availability, alt text, Product schema, links, buttons, robots.txt, and whether the content works without logging in.
Copy-paste template:
> If [element affects customer decision], record it as [text, HTML or schema.org], because [AI doesn’t need to understand images or layout]. In practice, check [H1, description, price, availability, alt, JSON-LD, robots.txt].
A customer looks at a dress and sees a picture, a price of 189 PLN, sizes, delivery tomorrow, and a red "Add to Cart" button. AI can only see:
<img src="/123.jpg" alt="" /> <button></button> <div class="price"></div>
This is the whole "aha moment." Humans buy with their eyes. AI first reads the document.
Key takeaways
- AI does not evaluate a page like a human. It first looks for text, HTML, headings, links, structured data, and access rules for bots.
- An empty
alt=""is fine for decoration, but bad for product images, before/after effects, certificates, or price tags. - Price, availability, delivery time, and product limitations should be visible as text and, for products, in
Productschema. - If content appears only after JavaScript, a popup, country selection, or logging in, some bots may see less than the customer.
- The quickest test takes 3 minutes: copy just the text from the product card to a notepad and check if the offer is still clear without the layout.
Why This Matters in 2026
Customers increasingly ask AI just like they previously asked Google: "What gift for 100 PLN for a teacher?", "Which SPF cream for sensitive skin?", "Where to buy barefoot shoes for a child?". The answer is not always a list of links. Sometimes, it is a ready recommendation.
OpenAI differentiates several types of access to pages. OAI-SearchBot is used to search and show pages in ChatGPT's search features. ChatGPT-User can visit a page when the user asks ChatGPT to check a specific URL. GPTBot is used to crawl content that may help in training models. The objectives vary, but the fundamental condition is the same: the page must be retrievable and understandable.
Google describes three stages of Googlebot’s work in its documentation on JavaScript SEO: crawling, rendering, and indexing. Google can render JavaScript, but the company itself notes that there are limitations and other search engines may ignore JavaScript. For a store owner, the conclusion is simple: the most important data cannot exist solely in animations, images, popups, or components that load over time.
Design still sells to humans. Images, contrast, layout, microcopy, and trust matter. The error begins when design is the only place where information exists.
Humans See the Store, AI Reads the Structure
Customers do not analyze HTML. They see a page as a whole: an image, price, promotional banner, reviews, button color, trust badge, and delivery options.
AI usually starts from a rougher layer: HTML, text, headings, links, metadata, structured data, robots.txt, sitemap.xml, and sometimes rendered DOM. If an element is only in an image, only in CSS background, or appears only after a click, the model may omit it.
Example of a footwear store:
| Element | Human Sees | AI Might See |
| ------------ | ------------------------------------- | ----------------------------------------- |
| Image | Black leather ankle boots with zipper | alt="" or IMG_8842.webp |
| Price | 329 PLN, promotion from 399 PLN | no price in HTML, price fetched by script |
| Availability | "Shipping in 24 hours" | text hidden after click |
| CTA | Large "Add to Cart" button | <button class="btn-primary"></button> |
| Reviews | 4.8/5 from 126 reviews | lacks review schema or just icons |
Example of a local service:
| Element | Human Sees | AI Might See |
| -------- | ---------------------------------- | ------------------------------------------------------- |
| Offer | "60-minute sports massage" | graphic with the price list without text |
| Location | map and address in the footer | address only in a map iframe |
| Booking | button "Schedule a Visit" | link with no description: <a href="/r">click here</a> |
| Trust | picture of the office and diplomas | images without alt text |
| Price | 180 PLN | price only on the PNG image |
In short: a classic page sells visually, while an AI-ready page also sells through structure.
Left Side: The Human. Right Side: The AI
Imagine a product card for a dress.
On the left, humans see:
- a model in a red dress;
- price of 189 PLN;
- sizes XS, S, M, L;
- information "delivery tomorrow";
- reviews and 30-day returns;
- an "Add to Cart" button.
On the right, AI might get:
<h1>Dress</h1> <img src="/media/products/88371.webp" alt="" /> <div class="price"></div> <button class="primary"></button> <div id="reviews"></div>
This code does not answer basic questions: what kind of dress, what material it is made of, who it suits, how much it costs, whether it’s available, what the button does, and whether anyone has rated it.
A better version doesn’t have to look worse:
<h1>Red Midi Wrap Dress Made from Viscose</h1> <img src="/media/products/red-wrap-dress.webp" alt="Red midi wrap dress made from viscose, front view" /> <p> Lightweight dress for weddings and summer parties. It features a wrap neckline, waist tie, and midi length. Available sizes: XS, S, M, L. </p> <p>Price: 189 PLN. Availability: ships in 24 hours.</p> <button type="button" aria-label="Add red wrap dress to cart"> Add to cart </button>
The difference is not about "adding text for AI." The difference is that essential information is explicit.
Step by Step: How to Check What AI Sees
- Open the page without looking at the layoutBad"The page looks good, so AI will understand it."Better"I will copy the text from the product card and check if I still know what I'm buying without images."
Open the product card, select the text, and paste it into a notepad. If all that remains is "Dress 123," "Price," "Add," and "Description," the page is too uninformative.
For e-commerce, check one card of a bestseller. For a beauty salon, check a service, like "hydrogen cleansing." If you can’t see the price, duration, and contraindications after removing the text, AI might have trouble too.
- Check if the image really conveys something
Bad:
<img src="product-final-2.webp" alt="" />
Better:
<img src="children-barefoot-shoes-blue.webp" alt="Blue barefoot shoes for children, flexible sole, side view" />
MDN describes `alt` as text that can replace an image when the image is not visible. An empty `alt=""` is correct for decoration but not for product images, certificates, before/after effects, or graphics with price lists.
For a cosmetics store, an alt of "cream" is too weak. A better option is "SPF 50 cream for sensitive skin, 50 ml tube." For a physiotherapist, an alt of "office" is also weak. A better option is "Physiotherapy office with a treatment table and manual therapy equipment."
- See if the price and availability are in HTMLBadthe price appears only after a script, which a bot may not trigger.Betterprice and availability are visible in HTML and in structured data.
Google’s documentation on Product structured data shows that price, availability, and offer data can be conveyed through `Product` and `Offer`. AI doesn’t have to follow exactly the same rules as Google, but a clear structure reduces the risk of guessing.
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Product", "name": "Red Midi Wrap Dress", "image": "https://example.com/dress.webp", "description": "Viscose dress for weddings and summer parties.", "offers": { "@type": "Offer", "price": "189.00", "priceCurrency": "PLN", "availability": "https://schema.org/InStock" } } </script>Schema.org is not a magical SEO booster. It is a label on the product. Without the label, the model may know the name but doesn’t know if the product is for sale, for how much, and in what condition.
- Remove text hidden in imagesBadbanner "Free shipping over 199 PLN" is an image.Betterthe banner looks the same, but the text is real HTML text.
Promotion banners are usually a problem for stores: discounts, promo codes, delivery times, return conditions. Humans read them. AI may receive only the file `promo-may.webp`.
In services, the issue is price lists in JPG or PDF. If a beauty salon has its price list as an image, AI may not see that a hybrid manicure costs 120 PLN and lasts 75 minutes. A normal HTML table is better, even if it is later styled for design.
- Name buttons and links clearly
Bad:
<a href="/contact">Click here</a> <button></button>
Better:
<a href="/contact">Schedule an SEO consultation for an online store</a> <button aria-label="Add SPF 50 cream to cart">Add to cart</button>
AI doesn’t have to guess that an empty cart icon means purchasing a specific product. A clear label also helps those using screen readers. This is one fix that improves accessibility and AI readiness.
- Check the version without JavaScriptBadproduct lists appear only after launching the app.Betterbasic content is available in the initial HTML or after server-side rendering.
Practical test: turn off JavaScript in your browser or use "View Source." If you don’t see the product name, price, and description, ask your developer for server-side rendering, static rendering, or at least JSON-LD generated on the server.
- Do Not Block Access Before AI Reads the PageBadA newsletter popup covers the entire page, and content appears only after closing the window.Betterpopup does not block the main content’s download, and the most important data are in HTML underneath.
The same goes for age gates, country selection, cookie consent, and logins. If a store requires a click before showing products, some bots will see only the consent window. A human will click "close." A bot may end the analysis.
For supplements or alcohol, it is not always possible to remove the gate. In this case, the compromise is: the legal block remains, but public categories, FAQs, terms of delivery, and company details are visible.
Ready-to-Use Patterns
Product description template:
[Product name] is a [product type] for [specific user/situation]. Main features: [material/composition], [size/capacity], [usage/delivery time]. Price: [amount] [currency]. Availability: [stock status or term]. Do not choose this product if [fair limitation].
Example:
The Red Midi Wrap Dress is a lightweight dress for those looking for an outfit for a wedding, communion, or summer party. Main features: viscose, wrap neckline, waist tie, sizes XS-L. Price: 189 PLN. Availability: ships in 24 hours. Do not choose it if you’re looking for a thicker dress for winter.
Service description template:
[Service name] is for [whom], when [problem/situation]. The visit lasts [time], costs [price], and includes [3 specific elements]. Contraindications or limitations: [list]. Booking: [clear action].
Example:
A 60-minute sports massage is for people after training, with muscle tension or overload from sitting work. The visit lasts 60 minutes, costs 180 PLN, and includes an interview, manual therapy, and home recommendations. It is not for people with recent injuries, fever, or inflammation. Booking: choose a date in the online calendar.
Implementation Checklist
- One important subpage has exactly one clear H1.
- The product or service name tells what it is, not just what it’s called.
- The price is visible as text, not just as an image or script.
- The product availability is visible as text.
- Delivery time or realization time is visible as text.
- The main product image has a descriptive `alt`.
- Decorative images have `alt=""` to avoid noise.
- The text from promotional banners is real HTML text.
- The price list is not solely an image or PDF.
- Buttons have a visible name or `aria-label`.
- Links do not just say "click here."
- The product has `Product` schema with `name`, `image`, `description`, and `offers`.
- Reviews have readable content, not just stars as icons.
- The page works sensibly without logging in.
- The most important content is not solely hidden behind a popup.
- Robots.txt does not block bots you want to let in.
- Sitemap.xml includes important categories and products.
- The page does not require JavaScript to show the name, price, and description.
- Every important subpage has a short FAQ with real customer questions.
- Company data: name, address, contact, and NIP are available as text.
7-Day Mini Plan
select 5 subpages: homepage, category, bestseller, service, and contact.
copy just the text from each page into notepad and mark deficiencies: price, availability, for whom, limitations, contact.
improve H1, product descriptions, and service descriptions based on the templates from this article.
complete alt texts for product images, before/after effects, price lists, and office photos.
add or improve `Product` schema on product cards and test them in the Rich Results Test.
check robots.txt, sitemap.xml, and popups blocking content.
run the audit at [auditai.cc](https://auditai.cc) and compare the result with the list of improvements.
Common Mistakes
<img src="/products/blue-final.webp" alt="product" />
This is almost as weak as an empty `alt`. AI still doesn’t know if it’s about shoes, cream, a chair, or a dress.
<img src="/products/blue-barefoot-shoes.webp" alt="Blue barefoot shoes for children, sizes 24-30" />
<div id="product-price"></div>
If the price is fetched later, some bots may not see it.
<p>Price: 329 PLN. Availability: in stock, ships in 24 hours.</p>
<button class="cart-icon"></button>
For a human, the cart icon is clear. For AI and screen readers, it may be an empty button.
<button aria-label="Add blue barefoot shoes to cart">Add to cart</button>
<img src="/price-list-may-2026.jpg" alt="price list" />
A better variant is a table:
<table>
<tr>
<th>Service</th>
<th>Time</th>
<th>Price</th>
</tr>
<tr>
<td>Hybrid Manicure</td>
<td>75 minutes</td>
<td>120 PLN</td>
</tr>
</table>How to Measure Effects
Do not measure this only by traffic from AI. At first, traffic from ChatGPT or Perplexity may be small. Measure signals that show that the page has become more readable.
The first signal: the audit shows fewer errors in semantics, structured data, and accessibility for crawlers.
The second signal: the number of correct products, rich results, or lack of schema.org errors rises in Google Search Console.
The third signal: customers ask fewer questions about delivery, sizes, duration of service, or price.
The fourth signal: in server logs, you see entries from the bots you want to let in, like OAI-SearchBot, depending on your robots.txt policy.
The fifth signal: when you paste a URL into ChatGPT and ask for a summary of the page, the response contains correct names, prices, limitations, and company data. This is a manual readability test, not a guarantee for ranking.
Who This Advice Is Not Good For
Do not start with AI readiness if the store has fundamental issues: the cart doesn’t work, payment fails, the page loads after several seconds, or products lack descriptions. First, fix sales.
Do not use AI as an excuse to write long, meaningless descriptions. If a product needs 5 sentences, write 5 sentences. If it needs a size chart, create a table.
If you sell regulated products such as medicines, supplements, alcohol, or medical services, do not add promises for AI. Include facts, limitations, contraindications, and sources.
FAQ
Does ChatGPT really only see HTML?
Are good product photos less important?
Do I need to know HTML to fix this?
Is empty `alt=""` always a mistake?
Does AI readiness replace SEO?
Summary
ChatGPT does not need to see your store like a customer. The customer sees the design, images, and emotions. AI primarily needs text, HTML, structure, and clear data.
If the price, availability, description, alt text, and schema.org are empty or hidden, the model has too little material to describe the offer well. Check one important subpage manually and then run an audit at auditai.cc to see which elements block visibility in AI.
