Beamtic's logo
  1. Create user
Home

Share via:

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.

54 views

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

Comments

  1. Subdomains may be more flexible than directories when deciding for a location for a new web application, the main reason is that you can more easily setup extra servers as needed.
  2. One of the best things you can do to increase engagement with your articles or blog posts is that you can pick an image to represent your article. Learn more about how I do this in this article.
  3. The idea that there is some kind of magis minimum word count for pages, before they will rank, is mostly wack, and here is why!
  4. Why using multiple h1s is still not going to harm your SEO.

More in: SEO