Google indexes the document, not the design
Structure and markup refreshed for current answer engines; the original analysis is preserved.
Google quietly clarified this month that it may not index text placed in CSS content properties, because that text is not part of the DOM. It is a small note with a large principle behind it: the crawler reads the document your markup defines, not the picture your styling paints. Anything that carries meaning — words you want found, ranked, or quoted — has to live in the markup itself, not be conjured by the stylesheet. CSS is for presentation; content belongs in the document.
the short answer
Google clarified this month that it may not index text placed in CSS content properties, because that text isn’t part of the DOM. The crawler reads the document your markup defines, not the picture your CSS paints. The principle is broader than CSS — text in an image, a div styled as a heading, copy injected after a click can all be visible to a person, invisible to the crawler. Decoration belongs in CSS; meaning belongs in the markup.
key takeaways
- Google clarified this month that it may not index text placed in CSS content properties, because that text is not part of the DOM.
- The crawler reads the document your markup defines — the DOM — not the picture your styling paints. Content in the presentation layer never enters that document.
- The principle is broader than CSS: text in an image without alt, a div styled to look like a heading, or copy injected after an interaction can all be visible to a person and invisible to the crawler.
- CSS is for presentation; content belongs in the markup. Reaching for the stylesheet to add words that mean something is the exact move to avoid.
- Check the rendered HTML Google sees — via URL inspection — and confirm the words, headings, and links that matter exist there as real markup, not just on screen.
what the crawler actually reads
The browser merges both layers into the page you see, so the seam is invisible to a person. The crawler reads only the top layer — the document — which is why anything that lives only in the CSS can go unseen.
The idea, in four parts
The small clarification; document versus design; the same mistake in other clothes; and how to keep your meaning in the document. Open each part.
01 The small clarification
This month Google made a quiet change to its developer documentation: it clarified that Google Search currently may not index content placed inside CSS content properties, because that content is not part of the DOM. It is the kind of note that is easy to scroll past, but it is worth slowing down on. CSS has a content property, used most often alongside the ::before and ::after pseudo-elements, that lets the stylesheet inject text into a page — a label before a list item, an icon, a prefix, sometimes a line of actual copy. On the rendered page that injected text looks exactly like any other text; a person reading the page cannot tell it apart from words written into the HTML. But it was produced by the styling layer, not written into the markup, and so it never becomes part of the Document Object Model — the structured representation of the page that a browser assembles from your HTML and that Google’s crawler reads to understand what your page is. Google is simply confirming the consequence: words that exist only in the CSS content property may not be indexed, because as far as the document is concerned they are not there. Taken literally, this is a narrow point affecting the minority of sites that push meaningful text through CSS. But the reason it happens — the gap between what the page looks like and what the document contains — is general, and that is what makes a small documentation note worth a whole discussion.
02 Document versus design
To understand why this happens, it helps to pull apart two layers that screen-rendering fuses into one. The first is the document: the HTML markup that defines what your page actually is — the headings, the paragraphs, the links, the lists, the content and the structure that holds it. The second is the presentation: the CSS that defines how that document looks — the colours, the spacing, the typography, the layout, and, through the content property, a bit of injected decoration. When you load a page, the browser merges the two into the thing you see, and the merge is smooth enough that the boundary disappears for a human reader. But the crawler does not read the merged picture the way your eye does. It reads the DOM, the structured document that the markup produces, because that is where content and structure actually live. Anything that exists only in the presentation layer — anything the CSS paints on but the markup never declared — is simply not in that document, and what is not in the document is not available to be read, indexed, or ranked. This is not a limitation Google is failing to overcome; it is a deliberate and sensible separation of concerns that the web is built on. CSS exists to style content, not to be content. The content property was meant for decoration — a bullet, a quotation mark, an icon — not for words that carry meaning. When real meaning gets routed through it, you are asking the presentation layer to do the document’s job, and then being surprised that the document does not contain it. The crawler’s rule is consistent and easy to state: it indexes the document, not the design.
03 The same mistake, in other clothes
The CSS content case is worth dwelling on not because it is widespread — it is not — but because it is the cleanest illustration of a mistake that is widespread, just wearing other clothes. The underlying error is treating the rendered appearance as the content, when the two can quietly come apart. Once you see the pattern, you find it everywhere. Text baked into an image — a heading, a quote, a key statistic rendered as part of a graphic — looks like content to a person and is invisible to the crawler unless the same words exist in the markup or an alt attribute. A heading that is styled to look like a heading, big and bold and prominent, but is marked up as an ordinary div, reads as a heading to the eye and as undifferentiated text to the document, so the structural signal a real heading would send is lost. Copy that a script writes into the page in a way the crawler does not execute, or that only appears after a click or tap the crawler never performs, sits there plainly for a human and is absent from the version Google reads. In every one of these the shape is identical to the CSS content property: something means something to the person looking at the rendered page, but that meaning was never committed to the document the crawler parses. The specific mechanism differs — stylesheet, image, mis-used element, script, interaction — but the failure is the same failure, and so is the fix: make sure the meaning lives in the markup, not just in the render. The rendered page is for people; the document is for the crawler, and the two only agree if you make them.
04 How to keep your meaning in the document
The remedy is a habit and a rule. The habit is to check the document directly instead of trusting the rendered page. Look at the page the way the crawler does — inspect the actual HTML source, or better, the rendered DOM — and confirm that the words, headings, and links that matter are present there as genuine markup, rather than painted on by CSS, sealed inside an image with no text equivalent, or contingent on a script or interaction to appear at all. Google’s URL inspection tool is the authoritative check here: it shows you the rendered HTML Google actually sees, and if something important is missing from that view, it is missing full stop, however prominent it looks in your browser. Make that inspection a routine part of building and reviewing pages, not a forensic step you only reach for when rankings disappoint. The rule that prevents the problem in the first place is the clean separation the web was designed around: use HTML for content and structure — mark headings up as headings, text as text, links as links, and add structured data to state meaning explicitly — and use CSS strictly for how all of that looks. The tell that you are about to make this mistake is the moment you reach for the stylesheet to add words that carry meaning; that is precisely the move the month’s clarification cautions against. Decoration belongs in CSS. Meaning belongs in the markup. Building pages whose document carries everything that matters — so the crawler reads the same substance a person sees, rather than a hollowed-out version of it — is the structural discipline the AC Group has worked by for 27 years.
Why this is a content question, not a styling one
It is tempting to file this under front-end housekeeping — a detail for whoever writes the CSS. But it is really a content question wearing a technical costume. The thing at stake is not how the page is styled; it is whether the meaning a reader takes from the page actually exists in the document that represents it. A page can look complete and be hollow underneath, because the parts that carry the meaning — a heading, a key line, a label that tells you what something is — were painted on rather than written in. The reader never notices; the crawler never sees. That gap between a full-looking page and a thin underlying document is the real risk, and it is invisible precisely to the person best placed to catch it, because they are looking at the render, not the markup.
Framed that way, the clarification is one instance of a principle that keeps returning: the version of your page a machine reads is the version that counts, and it is often not the version a person is looking at. What the crawler parses — the document, not the design — is what becomes your presence in search. Building pages whose substance is fully committed to the markup, so the document a machine reads and the page a person sees carry the same meaning, is the discipline this small note points at and the AC Group has worked by for 27 years.
What to do with this
Audit your important pages against the document, not the render. For each, ask whether the things that carry meaning — the headings, the key copy, the labels, the links — exist as real markup, or only in the picture: painted by CSS, sealed in an image without a text equivalent, or dependent on a script or interaction to appear. The fastest way to check is to view the rendered HTML Google sees through the URL inspection tool; if something important is absent there, it is absent from search, no matter how prominent it is on screen.
Then hold the rule going forward: HTML carries content and structure — headings marked as headings, text as text, links as links, with structured data to make meaning explicit — and CSS carries only how that looks. Treat the urge to add meaningful words through the stylesheet as a warning sign, because that is the exact mistake this month’s note describes. Decoration can live in the design; meaning has to live in the document. Keeping that line clean — so the crawler reads the same substance a person sees rather than a hollowed-out version of it — is the structural discipline the AC Group has worked by for 27 years.
Document versus design, plainly: quick answers
What exactly did Google clarify this month?
Google updated its developer documentation to state that Google Search currently may not index content placed inside CSS content properties, because that content is not part of the DOM. To unpack that: CSS has a content property, used most often with the ::before and ::after pseudo-elements, that can inject text into how a page looks — a label, a prefix, an icon, a piece of decorative or even substantive copy — purely through the stylesheet. Visually it appears on the page like any other text. But it is generated by the styling layer rather than written into the HTML, so it does not become part of the Document Object Model, the structured representation of the page that the browser builds from your markup and that Google’s crawler reads to understand your content. The practical upshot is blunt: if you put words there, Google may simply not see them. It is a narrow, technical clarification, and on its own it affects only the relatively small number of sites that push real text through CSS. But the principle underneath it is broad and worth internalising, because the same logic governs a whole family of ways that content can look present to a person while being absent to a crawler. The clarification is the occasion for this note; the principle is the point.
Why doesn’t Google index CSS-generated text?
Because Google indexes the document, and CSS-generated text is not in the document — it is in the presentation layer that sits on top of it. It helps to separate two things that look like one thing on screen. There is the document: the HTML markup that defines what the page is — its headings, paragraphs, links, lists, the actual content and structure. And there is the presentation: the CSS that defines how that document looks — colours, spacing, fonts, layout, and, via the content property, some injected decoration. The browser combines them into what you see, which makes the seam invisible to a human. But the crawler is not looking at the rendered picture the way your eye does; it is reading the DOM, the structured document the markup produces. Content that exists only in the styling layer never enters that document, so it is not there to be read, indexed, or ranked. This is not Google being difficult or failing to keep up; it is a clean and deliberate division of responsibilities. CSS was designed to style content, not to be content. When text is the kind of thing that should be found and understood — anything carrying meaning — it belongs in the markup, where the document can hold it. Putting it in the stylesheet is using presentation to do the document’s job, and the document is what gets indexed.
I don’t put text in CSS — does this still matter to me?
Almost certainly, because the CSS content case is just the cleanest example of a much more common mistake: letting meaning live somewhere the crawler does not read it. The underlying error is treating the rendered appearance as if it were the content, when the two can diverge. The same trap appears in several familiar forms. Text baked into an image with no equivalent in the markup or alt attribute is visible to a person and invisible to the crawler. A heading styled to look like a heading with CSS, but marked up as a plain div, reads as structure to the eye and as nothing in particular to the document. Important copy injected by a script in a way the crawler does not execute, or revealed only after an interaction it never performs, is present on screen and absent from the page Google reads. In every case the pattern is identical to the CSS content one: something carries meaning for the human looking at the rendered page, but that meaning was never written into the document the crawler parses. So even if you never touch the CSS content property, the discipline it points to applies directly to you — audit whether the things that matter on your pages actually exist in the markup, or only in the picture. Checking that the document, not just the design, carries your meaning is exactly the kind of structural work the AC Group has done for 27 years.
How do I make sure my content is in the document?
Check the document directly rather than trusting the rendered page, and keep a clean line between what is content and what is style. The simplest test is to look at the page the way the crawler does: view the actual HTML source or the rendered DOM and confirm that the words, headings, and links that matter are present there as real markup — not painted in by CSS, not locked inside an image without a text equivalent, not dependent on a script or an interaction to appear. Google’s own URL inspection tool will show you the rendered HTML it sees, which is the authoritative view; if something important is missing from it, that thing is invisible no matter how prominent it looks in a browser. Beyond the spot check, hold the principle as a rule of construction: use HTML for content and structure — headings as headings, text as text, links as links, with structured data to make meaning explicit — and use CSS strictly for presentation. The moment you find yourself reaching for the stylesheet to add words that mean something, stop, because that is the exact move this clarification warns against. Decoration can live in CSS; meaning has to live in the markup. Building pages where the document itself carries everything that matters, rather than relying on the design to imply it, is the structural discipline the AC Group has worked by for 27 years.
A note on sources and timing
This is written in September 2020, just after Google clarified in its developer documentation that Search currently may not index content inside CSS content properties, because that content is not part of the DOM. The explanation of why — that the crawler reads the document the markup produces, while CSS-injected text lives only in the presentation layer — follows from how the web separates content from styling, and the related cases (text in images, mis-marked headings, script- or interaction-dependent copy) are long-standing instances of the same gap. The durable point outlasts this one note: the crawler indexes the document, not the design, so meaning has to live in the markup — the structural discipline the AC Group has worked by for 27 years.