Solved

Problems with inline styling in HTML try to move to CSS

Posted on 2014-03-10
9
762 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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 
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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
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…
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…

622 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