CSS changes you make on the page can make or break your SEO
It may appear that changing a website’s CSS is no big deal and has little bearing on SEO. However, the CSS changes you make have a significant impact on whether your SEO rankings go up or down.
Here’s a tweet from John Mueller regarding CSS:
https://twitter.com/JohnMu/status/1494432194718273537?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1494432194718273537%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2FJohnMu2Fstatus2F1494432194718273537widget%3DTweet
According to John Mueller, simple modifications, such as changing the color, may not have an impact on SEO. However, major changes in the Cascading Style Sheets (CSS) can have an impact.
Previously, John Mueller had confirmed that website themes do impact SEO. So it doesn’t come as a surprise that making CSS changes can have an effect.
“It’s easy to consider website themes as just a splash of color on top of a finished structure. But there’s so much more involved. The website theme that you select will affect your SEO. A good theme can make it easier for search engines to understand the content”, said John Mueller.
CSS mistakes that negatively affect SEO
When it comes to CSS and SEO, there are a few things to be aware of:
Blocking CSS Files In Robots.txt
Site owners make the mistake of blocking CSS files in robots.txt as they believe this will help get their content indexed easily. However, this is a bad practice and can cause some serious issues in rendering.
“Yes it can cause issues, and you should avoid doing that. Being able to see a page completely helps us to better understand the page and confirm that it’s mobile-friendly”, said John Mueller.
Using CSS to hide internal links
Using a “display: none” tag in CSS for internal links, can be considered as hidden links.
“Display: none” is a CSS display property that completely hides an HTML element on a web page without changing the overall layout. However, the HTML element is still present in the source code of the page. One use case of this is site owners using the “display: none” property to hide the footer links. There are certain consequences when using this setup.
“I think that’s something that theoretically we don’t like. I don’t think it’s a great practice. If you think it’s an important link then kind of like make it visible to people”, said John Mueller.
Key Takeaway
It is important to be mindful of SEO when making changes to the CSS or theme of your website. Make sure you aren’t using fonts or colors that may affect the Mobile-friendliness of your website. Also, keep an eye on the Core Web Vital metrics when designing your page.
Popular Searches
