Solved

Problems with inline styling in HTML try to move to CSS

Posted on 2014-03-10
9
753 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

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

Expert Comment

by:Scott Fell, EE MVE
ID: 39919387
0
 

Author Closing Comment

by:cybersi
ID: 39920901
thanks guys
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

751 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