Issue with "::first-letter (:first-letter)": (Google search result header does not show properly for pseudo-classes)

MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

What information was incorrect, unhelpful, or incomplete?

When we search for any pseudo-class on Google, It ignores some of the first keywords while showing MDN in the results list.

Specific section or headline?

For instance, the result should show something like ::before (:before) - CSS: Cascading Style Sheets - MDN Web Docs. But instead, it ignores “::before (:” part in the results.

What did you expect to see?

Some result header like ::before (:before) - CSS: Cascading Style Sheets - MDN Web Docs should show in the results. It seems to be some issue in SEO.

Did you test this? If so, how?

Checked on different search Engines by searching the same text “css before”. Search engines tested on:

1. Google: failed
2. Duckduckgo: passed
3. Dogpile: passed
4. Yandex: passed (shows before instead of ::before)

MDN Content page report details

• Folder: en-us/web/css/_doublecolon_first-letter
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/_doublecolon_first-letter/index.md
• Last commit: https://github.com/mdn/content/commit/26f50bdaeb1228f458d21dbdf7dc110387b20daa
• Document last modified: 2021-08-12T23:59:09.000Z

[ddbeck]

I’m guessing this is Google rewriting page titles. It appears that Google is stripping out the colons. I’d guess there’s some strategy here to strip needless separators from titles, which has swallowed actual content here.

Reading their docs, I’m not sure we can do anything about this. It sounds like the biggest thing we might be able to do would be to shorten the title so that there’s less incentive for Google to trim it, though I don’t know if that’s particularly desirable for readers.

I’ve tagged this as help wanted. If someone knows a bit more about SEO, I’d welcome some more concrete (and substantiated by evidence) suggestions for avoiding this.

[tannerdolby]

Spun up a small demo at https://tannerdolby.com/seo-demo, once its been indexed by Google, having a look at SEO results in the browser should display the <title>: ... content now that we are using a character entity to represent colon like <title>&lt;title&gt;&colon;</title> where the colon shouldn’t get recognized as a separator. If anyone can manage to get the page displayed in SEO results, do share a screenshot so we all can see.

If we can’t find a way to use an HTML entity to represent the : in <title>'s, then the issue will persist. Where the last resort would be removing the colon as a separator in titles where it would be <title> The Document Title Element instead of <title>: The Document Title Element which I do think looks more readable with the colon but if it continues to cause problems for Chrome could be an option.