How does mathjax equations affect seo? Would inserting images of my equations instead be better?

Question

From an SEO perspective, would it be better to just upload an image of an equation rather than using mathjax to display that equation. The reason I ask is because I rendered an equation on my site using mathjax, and found that a huge amount of code with a lot of inline css is produced to represent that equation:

<p style="text-align:center;"><span class="MathJax_Preview"></span><div class="MathJax_Display" role="textbox" aria-readonly="true" style="text-align: center;"><span class="MathJax" id="MathJax-Element-1-Frame" style=""><nobr><span class="math" id="MathJax-Span-1"><span style="display: inline-block; position: relative; width: 95px; height: 0px; font-size: 116%;"><span style="position: absolute; clip: rect(19.7px 20880px 68.8px -7.9px); top: -51px; left: 0px;"><span class="mrow" id="MathJax-Span-2"><span class="mi" id="MathJax-Span-3" style="font-family: MathJax_Math; font-style: italic;">V<span style="display: inline-block; overflow: hidden; height: 1px; width: 3.9px;"></span></span><span class="mo" id="MathJax-Span-4" style="font-family: MathJax_Main; padding-left: 5.8px;">=</span><span class="mfrac" id="MathJax-Span-5" style="padding-left: 8.3px; padding-right: 2.5px;"><span style="display: inline-block; position: relative; width: 13.5px; height: 0px;"><span style="position: absolute; clip: rect(33.9px 20880px 54px -8.4px); top: -65.1px; left: 50%; margin-left: -5.5px;"><span class="mn" id="MathJax-Span-6" style="font-family: MathJax_Main;">4</span><span style="display: inline-block; width: 0px; height: 51px;"></span></span><span style="position: absolute; clip: rect(34.1px 20880px 54.5px -8.1px); top: -36.7px; left: 50%; margin-left: -5.5px;"><span class="mn" id="MathJax-Span-7" style="font-family: MathJax_Main;">3</span><span style="display: inline-block; width: 0px; height: 51px;"></span></span><span style="position: absolute; clip: rect(17.7px 20880px 25px -9px); top: -26.6px; left: 0px;"><span style="border-left-width: 13.5px; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 1.3px; vertical-align: 0px;"></span><span style="display: inline-block; width: 0px; height: 22px;"></span></span></span></span><span class="mi" id="MathJax-Span-8" style="font-family: MathJax_Math; font-style: italic; padding-left: 3.5px;">π<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.1px;"></span></span><span class="msubsup" id="MathJax-Span-9"><span style="display: inline-block; position: relative; width: 18.6px; height: 0px;"><span style="position: absolute; clip: rect(38.8px 20880px 54.2px -8.6px); top: -51px; left: 0px;"><span class="mi" id="MathJax-Span-10" style="font-family: MathJax_Math; font-style: italic;">r</span><span style="display: inline-block; width: 0px; height: 51px;"></span></span><span style="position: absolute; top: -59.6px; left: 9px;"><span class="texatom" id="MathJax-Span-11"><span class="mrow" id="MathJax-Span-12"><span class="mn" id="MathJax-Span-13" style="font-size: 70.7%; font-family: MathJax_Main;">3</span></span></span><span style="display: inline-block; width: 0px; height: 51px;"></span></span></span></span></span><span style="display: inline-block; width: 0px; height: 51px;"></span></span></span><span style="border-left-width: 0px; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 45px; vertical-align: -15.8px;"></span></span></nobr></span></div><script type="math/tex;  mode=display" id="MathJax-Element-1">V = \frac{4}{3}\pi r^{3}</script></p>

Here is an image of the amount of code that is (it's basically one page on a word file with font calibri size 11):

I think the above is bad seo, and that I'm better off just including an image of the equation, but I couldn't find too many sources on the matter (just one: http://www.frihost.com/forums/vt-127057.html) and am wondering what you guys think.

Answer 1

Well that's definitely ugly code, to be sure. :)

However, I don't think it would be a problem.

The current line of thinking is that Google doesn't pay attention to inline CSS - unless it has a few key CSS properties like display:none;. In the past, black hat-types would often use these selectors to stuff a page full of keywords, but then not display it to a user - so that the search engine crawlers would see them, but live people wouldn't. Supposedly, Google currently ignores CSS without those red flags - so I don't see a reason why it would penalize you for it.

Some people might raise a question of whether it will decrease your text-to-code ratio - and perhaps it could. But according to Matt Cutts, that's no longer a factor in rankings. So I don't think it will hurt you. Think of it this way: if text-to-code was important, Google would penalize you for having a longer CSS file if you weren't using inline CSS (and we know that doesn't happen - Google's gotten a lot smarter than that about code semantics over the past 10 years.)

So if you wanted to leave it as-is, you should be good to go without any negative effects.

However...you might be able to improve your rankings by going to images. Here's why:

Does anyone type a line-by-line equation into a Google search bar when looking for it? My guess would be rarely. Given the Greek characters and other odd instances found in equations, they're not exactly searchable things.

But if you were displaying a well-know equation on your site that had a name - say, "Euler's identity" - then you might be better-served creating an image with the alt text "Euler's identity," rather than using Mathjax. That way, at least Google knows to serve you up when someone types in the equation's name (since the person theoretically won't be typing the actual equation into the search field.)