Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Problems with inline styling in HTML try to move to CSS

Posted on 2014-03-10
9
Medium Priority
?
773 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 53

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 1000 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 1000 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 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39919387
0
 

Author Closing Comment

by:cybersi
ID: 39920901
thanks guys
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

715 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