Brainstorming: Updating titles of CSS reference pages

(Eric Shepherd) #1

We previously discussed changing the <title>s of HTML element reference pages (to “<element>: The Element Name element”). This makes better use of the title space available to us according to SEO guidelines (which recommend titles between 50-60 characters when possible), and generally makes the titles more useful.

It’s time to try to do the same for CSS reference pages. Currently, our CSS reference pages titles are simply the name of the property, pseudo-class, or whatever, such as “width” or “@font-face”.

This should be changed. This will be a little harder than for HTML, since the CSS terms are not abbreviations like HTML’s are. That said, we should be able to do something with it, but it will take more discussion, I suspect.

Some suggestions to consider — and I welcome more ideas:

  • width property: Setting element width - CSS
  • border-block-start-color: CSS border color settings property
  • height: CSS property
  • height property - CSS
  • @font-face: CSS at-rule for use of web fonts
  • @font-face at-rule: Using web fonts using CSS
  • height property: Setting element height using CSS

Some of these (like height: CSS property) are too short still by the book, although they’re a little better.

I personally think I like the ones down at the end, that take on the form width property: Setting element width using CSS.

I’d love to hear some other thoughts on this, since I’m currently working up proposals for changes to these pages at this time.



I’m a bit uncomfortable with changing titles just for an SEO rule, unless we also think the new titles are better.

If we think the new titles are better anyway, great, let’s do it anyway. But if “we must have longer titles” and it’s a question of choosing the best longer title, I’m not sure that’s a good idea.

In this case, tbh, I think the existing concise titles are pretty good.

(Eric Shepherd) #3

That’s a good point. We don’t want to inflate the titles just to make them longer. If we can’t make them useful, then that undoes the benefits offered by the longer title.

That being said, I think that at least some added information beyond simply the name of the property or whatever would be helpful in the titles. The title “width” is not nearly as helpful as “width property” or “width property - CSS” or something like that, as it vastly clarifies what you’re looking at.

The question is mostly a matter of how much information and in what format. Unless people genuinely feel that including those details is not useful (which seems unlikely, but it’s hard to predict what people think).

(Chris Mills) #4

I find the notion of “longer titles just for SEO” a bit worrying too. I think we need to weigh up improved SEO and helpfulness of titles for beginners (this is a clear additional benefit to my mind) with annoyance caused to pro level developers - who are arguably still the primary target audience for these ref docs.

In terms of the composition of these titles, I think I like "CSS ", so for example “CSS: height property: set height of elements”. This has a logical cadence, although I do worry that including the description in the title might be overkill given that the SEO summary is just below.

So I’d probably prefer just “CSS: height property” — would this be drastically worse for SEO purposes than if a short description is included as well?

I think perhaps doing some creative styling on the title would help reduce frustration for pro level developers. Could we have a system whereby when you write the title in the format “CSS: height property: set height of elements”, Kuma would automatically render this as something like

<h1><span>CSS</span> <span>height property</span> <span>set height of elements</span></h1>

And then we could use CSS to render “CSS” somewhere up in the corner of the page header, so it looks like some kind of branding rather than the title, then have “height property” looking like the actual title, and “set height of elements” looking like some kind of strapline?


CSS (looks like some kind of topic marker/doc category tucked up in the corner)

height property (actual title)

                      set height of elements (floating in the middle kinda like a blockquote)

seo summary follows...

(Kadir Topal) #5

I think we’re all on the same page, making changes that improve SEO, but are harmful for actual users of the site is not something we should go after. There are so many opportunities where we can improve usability and SEO though, that’s what this is about, figuring out whether that’s the case for CSS page titles.

(Jean-Yves) #6

Hi all!

I also would like to see more information here.

Sheppy, you did the SEO HTML title change this Quarter. What are the results? Was it a success?

Before moving forward to CSS, I think we should analyse the result of this change on HTML, that was intended to be an experiment to validate the idea.

(Stephanie Hobson) #7

If this is going from an experiment to a feature we need to redesign the article page headings to accommodate it.

Our page designs work best with short titles. In this example the word “element” gets an entire line to itself. I would argue that it does not provide any value to the user. The split title is also harder to read.

This design assumes short titles and then handles the exceptions. If this change is becoming standard we need a design that assumes long titles.

I don’t think we should make any further changes without a clear positive result from earlier experiments.



Is a better SEO even needed? MDN is already in the top three results of pretty much any search for web tech, and is widely known among web developers and designers.

Personally, I decide what to click based on the domain, not on the page title, and I click on a result in under one second, which leaves barely enough time to read through the title. Once I’ve had good experience with one reference site, I’ll keep using it when looking up other properties. In my opinion it would be best to keep the page title short, but definitely include “MDN web docs” at the end (or however you want to call the site).

But I don’t know how other people search; maybe I am the only one doing this.

(Saf2k8) #9

Excellent idea, keeping up to date generally, is important. :point_left:

(Sphinx Knight) #10

I concur: let’s add “localization” and “word’s length distribution across locales” (hi de) to this equation.