1. Login

HTML ID and Class Names in SEO

HTML class names does not have any influence on SEO, but other coding practices does have some limited influence.

1581 views
d

By. Jacob

Edited: 2020-07-26 15:35

A question I have seen pop up is whether Google uses HTML class names for ranking purposes; in other words, does it matter if our HTML class names are randomly generated or can we use keywords in our HTML and CSS class names?

The short answer is a clear no. Obviously this has no meaningful significance for SEO purposes; but there might still be other software that relies on HTML class names, in particular JavaScript—and if we are going to use a HTML minifier, we should carefully make sure that it will not replace ID and class names that are used by client-sided scripts—if we are not careful, these scripts might simply stop working.

Most often, we do not have full control over the CMS that we are using. Each CMS does things in its own ways. It gets even worse when dealing with JavaScript and CSS provided by Plugins. It is theoretically possible to scan all these files, and then replace everything with corresponding minified versions — but in general, this is not going to yield much of a difference, especially not when assets are compressed with GZIP or Brotli compression (brotli being the better one).

How can coding effect SEO

There are still some things that might influence rankings, but those will generally have truly minuscule significance in regards to our rankings.

Therefor, for SEO purposes, we may be better off by focusing on the content of our sites rather than how the sites are coded behind the scenes.

There are still things you can do, behind the scenes, that might indirectly effect rankings; such as, improving accessibility by following web accessibility guidelines. Often times a well coded HTML page is all it takes, but sometimes you also need to use aria accessibility attributes. Aria attributes helps to indicate to the user, what GUI controls are used for; this is important if using non-standard elements for UI controls, such as when using div instead of a button element to create a button.

We really should not use non-standard elements unless we have a valid reason to do so; such as, when the standardized element can not work for the specific purpose. But, most elements can now be styled with CSS, so these exceptions are rare nowadays.

Coding practices that might have influence on rankings

When it comes to the front-end coding of our website'(s), we will typically have a lot of leverage to do both good and bad — without it ever effecting our search engine rankings; this is, however, not a license to make up our own elements. Web standards should still be followed.

While HTML5 permits using h1+section exclusively, and multiple h1's are not directly harmful, we may still want to use h1-h6 to maintain backwards compatibility with older software; and of course we also should not make the entire page h1, as that might seem very spammy.

How you use certain elements will, however, still have some effect on SEO. Obviously you should always aim to use elements according to the standards; this means use h1-h6 for headings inside of section elements. Read more about that in this article: .

How about UTF-8 characters?

By UTF-8 characters is often assumed certain emoji icons, and similar, which can not be written with a iso-8859-1 character set; however, if you page is delivered with UTF-8, then all of your characters will be encoded as UTF-8.

When it comes to special characters, these will not typically do either good or bad in regards to SEO. But, they are interesting, because sometimes search engines might permit their use in the title element, which I think allows for lots of, mostly harmless, fun with visitors.

Sometimes these characters have caused problems, this mostly happens if a given character is not supported by a the installed fonts on the users system. For instance, some characters have been known to crash Facebook Messenger when sent; I think these bugs are now fixed, but if a character is not supported, the user will just see a pair of square boxes in place of it—which might not be what you intended.

As nerds, we might be able to get some fun from using emoji's when naming our IDs and classes in HTML/CSS, I have tested this, and covered that in this article, if you are interested: UTF-8 Characters in CSS as Classes and IDs

Share with your friends:

Tell us what you think:

  1. Drop in traffic after helpful content update
    Drop in traffic doing recent helpful content updates; time will tell if I will recover.
  2. What is up with those *-k.html backlinks?
    Let us investigate what is up with those mass spammed *-k.html backlinks that many of us are seeing in our link reports.
  3. How You Should Use Multiple H1s in HTML
    An in-dept look at the use of headings (h1-h6) and sections in HTML pages.
  4. How to improve your website's pagination
    Pagination can be a confusing thing to get right both practically and programmatically. I have put a lot of thought into this subject, and here I am giving you a few of the ideas I have been working with.
  5. Video not indexed: Video outside the viewport
    The Video outside the viewport is properly not worth spending time on solving; it is probably intended to solve a specific issue, and every single little video probably does not need to get indexed anyway.

More in: SEO