seo Question posted in
Some basic information to get you started with this can be found here.

Does styling with sx in MUI has a bad impact on SEO, even though that i'm working with a nextjs 12 app that use SSR for rendering pages

I have a NextJs v12.3.0 app that use sx in MUI as styling to many of my components. many of my pages are render as SSR.
now i want to know somethings.

  1. Does MUI render sx styles as inline css?
  2. If yes, has it a bad impact on SEO?
  3. What can I do to avoid this bad impact?
  4. do other libraries like styled-components or css modules solve this problem?

please help me to find the answer of my questions and solve my confusion about this in the major of performance of my website and also the SEO majorities of it.

i’ve just test many aspects of styling and see all of them are rendering my styles as inline in tags

Tags:

2

Answers


  1. 0

    1. For First Question , Not realy!
      with sx props , you can work with The theme , it’s look like MUI System with sx props ,change the theme for that specific component
      2- For second Question , MUI Using Utility Classes behind the scenes , you can track them with dev tools , MUI manage almost every thing with Utility Classes , But you must consider that , MUI using React and The React it self is not that SEO friendly!

    2. For Better SEO Compatibility , I recommend to use some framework like Tailwind because this framework it can be only dev-dependency , and the final result is only CSS , of course for more animation you need some other frameworks like motion , but however in animation MUI is not that good

    3. But if for something like first initializing the page , use SSR , SEO of your website will be fine

    Login or Signup to reply.
  2. 0

    1. No, MUI’s sx prop does render styles as inline CSS. It renders a random unique class name, which will change if you add or remove some property in the sx object. Actually, it is better than writing inline-css, because class names are better for SEO and performance. Check the image below where I write styling in a different way, and check its output: enter image description here

    2. No, it won’t affect SEO as long as you use MUI AppCacheProvider with NextJs. Check this documentation to implement AppCacheProvider.

    3. There is no bad impact if you config your NexJs app as per the MUI’s NextJs documentation.

    4. These libraries also generate class-based styles or scoped CSS and are excellent for SEO and performance. I think If you’re already using MUI and the sx prop, switching libraries isn’t necessary.

    💡I hope it helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search