Skip to main content

Avoid bad HTML

As you may know, you can easily put HTML tags in your editor fields, such as the caption field, or the message field on the home page, or even in the head-tags variable, etc. I always encourage my clients to feel free to use some minimal formatting they may want to include in these fields, because doing so is relatively easy and really shouldn't require hiring a professional to do so. I always tell them also, to be careful with the HTML they put in those fields, and DO hire a professional if they find the need to add more complex HTML - for example, beyond just bolding words, or emphasizing phrases, etc. However, I keep coming across stores where merchant-edited HTML nearly bring the store to its knees. Yes, that actually can be done! Why? Because web pages - therefore Yahoo Store pages - are made up of HTML tags, so if you throw a wrench in there, expect things to break....

Adding simple formatting is harmless. You can easily bold words, change the appearance of fonts, etc. It becomes a problem when the merchant believes that throwing a bunch of random HTML code in a variable will somehow come out correct - and if it seems visually Ok, then they assume they did it right. Here is a partial list of problems I see often:

Unclosed Tags
This is probably the most common mistake I see. They start bolding something with a < b > tag, and forget to close it. In this case, it will just end up bolding most everything on the page starting at the opening < b > tag. But, things can get worse. If you include a tag that actually affects layout, for example an opening < div > tag or < table > tag, that stray tag can potentially break your page's layout completely. And, taking it a step further, if you open a < style > or < script > tag, but don't close them, the page may stop rendering completely (i.e. come up blank.)

Closed tags without opening
This is sort of the opposite of the previous mistake. When you throw in a closing tag without first opening it, you will most likely completely break the layout of your page(s).

Mismatched tags
This is a combination of the previous two. Sometimes people throw in opening tags and closing tags at random, and in random order. If each of your opening tags have closing counterparts but in the wrong order, chances are most modern browsers will figure out what to do, but why make the browser's work miserable? Follow this easy rule of thumb: if you open a tag, such as < b >, when you are done with it, close it. That's really it.

Including main document tags such as < html >, < head > , or < body >
These are not only not necessary because the Yahoo Store templates already put these in the code, they can also break the pages, break JavaScript code, and in extreme cases these extra tags may even cause the search engines to mis-read your pages and not index them correctly.

So if you wanted to write a post-it note for yourself with the most important rules of adding html to your caption fields, write these:

  • If you open an HTML tag, always close it, and in reverse order.
  • Never use these tags in your store editor fields: < head >, < /head >, < body >, < /body >, < html > and < / html >

Comments

Popular posts from this blog

Multi-Add and Yahoo Floating Cart Blues

Although the Yahoo! Floating Cart is considered pretty much bug free by Yahoo (you can look at the official open issues list here http://help.yahoo.com/l/us/yahoo/smallbusiness/store/floatingcart/floatingcart-09.html ) , there are some pretty "interesting" issues still, so since I keep running into them, I decided to post them here along with the work-arounds. The following issues all occur with multi-add forms only. 1) If you have your quantity set up as anything other than a simple text box (for example a drop-down SELECT box), the floating cart will not take the quantity value. It will take vwquantity as a customer-selected option. The workaround: use a text box instead. Nothing else works currently. 2) If you have a script that checks if the shopper made a selection from a drop-down (basically, any kind of an "onsubmit" handler), the floating cart will still receive the item, even if you cancel the submit event. The workaround: put the event handler on the click...

Adding custom Yahoo Store fields - Catalog Manager vs. Store Editor

In a non-legacy Yahoo Store, there are two ways to add custom fields: through Catalog Manager under "Manage my Tables" and through the Store Editor, under "Types" (the Store Editor's "Types" are essentially the same as Catalog Manager's "Tables".) Whether you add custom fields from Catalog Manager or from the Store Editor does make a difference as each has its advantages as well as disadvantages. Catalog Manager To me the main advantages of using Catalog Manager to add custom fields are: 1) You can add multiple fields quicker 2) You can later change the field's name and even type 3) You can delete the field if you no longer need it. 4) All the fields that are available in Catalog Manager are included in the data.csv file if you download your catalog. 5) All the fields that are available in Catalog Manager are also included in the catalog.xml datafeed file, which is used by the comparison shopping engines, for example. (See the Search ...

CPR for a Yahoo Store on Google's Supplemental Index

Recently a client of mine came to me and said that most of his store pages disappeared from Google, and he did not do anything to make this happen. I was a bit skeptical, so I went to Google, did a search on his store, and sure enough, there were only two pages indexed, his home page and his site map (ind.html) page. The rest were in the supplemental results, which means that Google thought the rest of the pages were not much different than these two pages. When I looked at the supplemental results, the little excerpts under each link were exactly the same, and I also noticed that what Google showed under each result was actually text from the ALT tags of the header image. I looked at some of these pages in my client's store, and they were actually different. This was a bit puzzling, but then I thought perhaps Google saw that the header and left navigation was the same throughout the site (which is pretty normal), but that the text that made each page different was too far down ins...