Problems with inline styling in HTML try to move to CSS

Hi All

I am trying to clean up my web site for seo.  When I run reports it says I have inline styling.  I removed the content with <span> tags and it brought down the error value.

If there a way I can put the following into css and have the same effect?

<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_email_large' displayText='Email'></span>
<span class='st_fblike_large' displayText='Facebook Like'></span>
<span class='st_twitterfollow_large' displayText='Twitter Follow' st_username='company'></span>

Would really appreciate any help you guys can give as web development is not my strong point.


thanks

Simon
cybersiAsked:
Who is Participating?
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
When you use sharethis, you enter code into your  html

<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_pinterest_large' displayText='Pinterest'></span>
<span class='st_email_large' displayText='Email'></span>

Open in new window

Then add js
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "abc123", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

Open in new window


When you view source, you will see just what I have just pasted and what your code looks like above.  However, if you view the code in your console as rendered html (same as a spider will) each chicklet will look like this
<span class="st_twitter_large" st_via="" style="display:block; height: 35px; float:left;" displaytext="" st_processed="yes"><span style="text-decoration:none;color:#000000;display:inline-block;cursor:pointer;" class="stButton"><span class="stLarge" style="background-image: url(http://w.sharethis.com/images/twitter_32.png);"></span><img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px; display: none;"></span></span>

Open in new window

That is a function of the js.  When you are going to rely on 3rd party widgets like this, you don't have a choice.  While it is nice to shoot for all html and css, javascript and jquery are a way of life and help your site look good in multiple browsers.  There is no google brownie points taken off for using share this wisely.  

Inline css that is statically added to your code is not generally a good practice and you should use external css when possible.  Widgets can be the exception and especially if they play nice with your page.  Not all do.

You can go through all the google webmaster videos from the webspam team, you will not find anything that says inline css is going to hurt you seo https://www.youtube.com/user/GoogleWebmasterHelp 

If you want to completely eliminate rendered inline css and the only place is your share this, your only option is to make your own social sharing icons.  You can use fontawsome http://fortawesome.github.io/Font-Awesome/icons/ or http://zurb.com/playground/social-webicons and just searching social icons will lead you to many choices.

From there, it will be a matter of making your own code for each social service https://developers.facebook.com/docs/plugins/share-button and that can be a topic for future questions.
0
 
aboo_sCommented:
how about this:
<span class='st_sharethis_large'>ShareThis</span>
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Your just using the sharethis tool http://www.sharethis.com/

It is not worth worrying about.  This will not make or break your seo.  Typically it is not good practice to use inline styles for a number of reason.  Here you are using a 3rd party widget and that is just the way it works.

If you are concerned about your seo, write new compelling content several times a week and after 6months, then 12 months, notice if your traffic has changed a bit.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
cybersiAuthor Commented:
Would really like to get it into CSS if possible guys. I want all my code to be 100% clean with no  inline styles which means the span tag has to go.
0
 
GaryCommented:
This...
<span class='st_sharethis_large' displayText='ShareThis'></span>

...is not inline styling - it is the normal way of writing HTML with classes that you use in CSS to style
The error must be pointing to something completely different.
Inline styles are not the end of the world, it's preferable to not use them as you are just repeating the same data but if you have to use them then you have to.

You cannot control how an external plugin designs its code.
0
 
cybersiAuthor Commented:
Hi Scott & Gary
Thanks for coming back to me didn't want to be pain. I have been using a site to check my seo on my site and it kept telling me that the code was bad for seo. I have made my own icons now with js  code from fb etc. Should I put all the js code in one file from fB and twitter etc all or will that not work? The same site is telling me I should consolidate my scripts and minified them. Sorry to be a pain were a small family business and trying to help out as best I can with the little knowledge I have. Site I have been using is http://seositecheckup.com/ it reports things back like the above and how fast my page is etc etc not sure if u chaps have come across it before but when it gave all the errors does make u worry. We have a lot of competitors and money is short been doing a lot I'm my spare time. I have learnt a lot and enjoyed it but  just want the best for my family.
0
 
GaryCommented:
Inline styling has nothing to do with SEO - really do believe us!
I have used that site and continue to use it, but do not take everything it says as gospel.
They give you general (bold and italic on purpose) rules of design, not the absolute definitive must follow guide else Google will never show you in its search engine ever and for eternity.
(remember the ultimate goal of that site is to get you to hire them)

The same site is telling me I should consolidate my scripts and minified them
Absolutely (with some exceptions).

SEO is all about great unique content, everything else is secondary, tertiary,quaternary, quinary, senary, septenary, octonary, nonary, and denary (I had to Google beyond tertiary!)
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
0
 
cybersiAuthor Commented:
thanks guys
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.