Solved

Problems with inline styling in HTML try to move to CSS

Posted on 2014-03-10
9
721 Views
Last Modified: 2014-03-11
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
0
Comment
Question by:cybersi
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 10

Expert Comment

by:aboo_s
ID: 39918109
how about this:
<span class='st_sharethis_large'>ShareThis</span>
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39918678
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
 

Author Comment

by:cybersi
ID: 39919016
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
 
LVL 58

Expert Comment

by:Gary
ID: 39919039
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 total points
ID: 39919063
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
 

Author Comment

by:cybersi
ID: 39919350
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 39919366
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39919387
0
 

Author Closing Comment

by:cybersi
ID: 39920901
thanks guys
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now