Google posted on Twitter “we suggest not including significant content material or symbols utilizing ::earlier than or ::after CSS pseudo-elements.” Google stated such content material “may not be used for indexing your pages.” Notice, this isn’t a change to how Google Search works, it’s simply now talked about within the documentation.
Google added that it “clarified within the developer’s information that Google Search at present could not index content material inside CSS content material properties as that is not a part of the DOM.”
Google added that you could nonetheless use the factor for ornamental functions.
A CSS pseudo-element is a key phrase added to a selector that allows you to model a particular a part of the chosen factor(s). A CSS pseudo-element is used to model specified elements of a component. It may be used to model the primary letter, or line, of a component and insert content material earlier than, or after, the content material of a component. You possibly can see examples of how that is achieved on W3 Faculties.
Google stated they particularly up to date their assist documentation to say this.
Right here is that tweet:
We added an replace to our docs at https://t.co/P5NEdHpk0Y – we suggest not including significant content material or symbols utilizing ::earlier than or ::after CSS pseudo-elements, because it may not be used for indexing your pages. Ornamental parts are superb.
— Google Search Central (@googlesearchc) September 22, 2023
Notice, this isn’t a brand new change however an replace to the documentation:
Appropriate. We additionally talked about this for rendering beforehand, however it was by no means documented in writing. We bumped into some websites which can be utilizing this, and it is onerous to elucidate what to repair with out having a reference :).
— Hey John, Your profile caught my eye. Ouch. (@JohnMu) September 22, 2023
Yeah, this isn’t a change, it is simply an replace to the documentation on how issues are. I may additionally think about it altering over time, both as browsers evolve to make it selectable/findable, or individually.
— Hey John, Your profile caught my eye. Ouch. (@JohnMu) September 22, 2023
🚨 Don’t use ::earlier than and ::after for necessary, semantic, or actionable content material.
That is additionally necessary for accessibility. Customers who depend on display readers may additionally miss that content material as a result of these pseudo-elements. https://t.co/myWPohfSGw
— Andrea Volpini (@cyberandy) September 22, 2023
Notice: I’m posting tales at present, Sunday, as a result of tomorrow is Yom Kippur and I’m not posting something on Yom Kippur.
Discussion board dialogue at X.