I'm doing some SEO for a website I haven't built and it has this navigation bar:
<div align="right" id="menu">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center" class="menuitem1" onmouseover="this.className='menuitem1a'" onmouseout="this.className='menuitem1'" onclick="window.location='index.php'" >
<div style="margin-top:80px">Profile</div>
</div></td>
<td><div align="center" class="menuitem2" onmouseover="this.className='menuitem2a'" onmouseout="this.className='menuitem2'" onclick="window.location='customers.php'">
<div style="margin-top:80px">Customers</div>
</div></td>
<td><div align="center" class="menuitem3c">
<div style="margin-top:80px">Services</div>
</div></td>
<td><div align="center" class="menuitem4" onmouseover="this.className='menuitem4a'" onmouseout="this.className='menuitem4'" onclick="window.location='products.php'">
<div style="margin-top:80px">Products</div>
</div></td>
<td><div align="center" class="menuitem5" onmouseover="this.className='menuitem5a'" onmouseout="this.className='menuitem5'" onclick="window.location='contact.php'">
<div style="margin-top:80px">Contact</div>
</div></td>
</tr>
</table>
</div>
First thing I noticed, it has no anchors!
Second when I made a sitemap of the website only index page was there.
EDIT:It also spits errors on evaluation!
Does this nave a negative impact from SEO perspective?
Thanks in advance!
Yes it does. Since the JS is usually ignored by the crawler, it can't get to the rest of the pages because the navigation will not work for it. You need to change those DIVs to anchors and style them appropriately to retain the old style.
Also, this method isn't very accessible either since it's not obvious from the page content which of the elements are links. Never mind semantics
Google supposedly can follow JS nowadays, but yea, that's atrocious markup. Also really bad for accessibility. And just plain hard to maintain. Plus, it has way more markup than needed, and google never complains if you lighten your page sizes.
As for validation, that probably doesn't have that much impact on SEO (if it did, half of Google's index would be empty).
My guess is that's Adobe Dreamweaver markup circa 2000 or it's coming out of a typically bad CMS.
#JohnP already answers the question - this is really bad markup.
A simpler approach would be
<ul id="menu">
<li>Profile</li>
<li>Customers</li>
....
</ul>
and doing the styling via CSS. (You may need to add the menuitem1, menuitem2 classes to the <li> elements if they are differently styled.)
Related
I need to put 3 links in the same line aligned like left, center, and right without using CSS.
Its something like this, I hope this helps
If you really want to do all of this without using any CSS, you can use tables.
<table>
<tr>
<td>First link</td>
<td>Second link</td>
<td>Third link</td>
</tr>
</table>
Otherwise you don't really have much of an option if you want the spacing and all you got on your image example. I would also not recommend using tables all that much, because pretty much everything should be responsive for mobile devices these days, and tables are really hard to fit in to a 320px of screen width.
This is extremely bad practice. A list of links is not tabular data. HTML is not a layout tool. This is how things were done in 1996. The web is better (in some ways) now and we do not do things this way now.
It is possible to hack a layout with a table and obsolete presentational attributes. The data is not tabular, however, so this is bad food for screen readers and search engines.
It is also not HTML 5. What you want to achieve is not possible with HTML 5. This is HTML 4.01 Transitional which, when it was released two decades ago, was only ever intended as a stop-gap while people converted over to using CSS for presentation.
<table width="100%">
<tr>
<td width="33%">A link</td>
<td width="34%" align=center>A link</td>
<td width="33%" align=right>A link</td>
</tr>
</table>
assuming you can add inline styling ,you can use this
<div>
<a href="" >firstlink</a>
<a href="" style ="text-align: center;
width: 90%;
display: inline-block;
margin: auto;">secondlink</a>
<a href="" >thirdlink</a>
</div>
else you can use one by answered by community wiki
I am trying to enhance our old html site (webstore) with schema and am having some difficulties getting started. We have over 1,500 individual html product pages that I would like to start adding Schema to, so getting this correct to begin with is a must.
The biggest issue thus far is how to add the product image code as our site layout is table based with the main product image inserted as a background element. Most of the research examples I have found so far show different implementations, is this possible?
Here is a code example:
<TR>
<TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=10 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=18 ALT=""></TD>
</TR>
</TABLE>
</td>
<td valign="top">
<table width="599" border="0" cellpadding="0" cellspacing="0" background="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" style="background-repeat: no-repeat;">
<tr>
<td width="259" valign="top"><span class="style2 "><IMG SRC="images/spacer.gif" alt="" WIDTH=259 HEIGHT=150 border="0"><br></span>
<table width="238" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><span class="style109 style31">The HOBBIT<br> BILBO'S STING SWORD</span><span class="style117"><br> <span class="style33">UC2892 United Cutlery</span></span></td>
</tr>
From this code, I would like to highlight images/LOTR/BKG_Hobbit-Sting-UC2892.jpg as the product image via Schema.org.
I first tried adding the info to the <HEAD> section, but it does not check out correctly on Google's structured data testing tool:
<div itemscope itemtype="schema.org/Product">; <meta itemprop="image" content="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg"></meta>
Also, testing in Bing Markup tester gives me the result:
We are not seeing any markup on this page. Please ensure the markup has been implemented correctly.
Is it not okay to add the Schema data via <div> to the head area?
Also, should the image link be a complete URL www.example.com/images/LOTR/BKG_Hobbit-Sting-UC2892.jpg?
As your table markup doesn’t seem to be very maintainable, and as the (obsolete) background attribute can’t be used for Microdata, the best way in your case would probably be to duplicate the content and mark it up with meta/link elements.
You can add this markup in the head or in the body, but you can’t use div in the head, so it’s easier to do it in the body.
So in the body, you could simply add this:
<div itemscope itemtype="http://schema.org/Product">
<link itemprop="image" href="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" />
</div>
You have to use link instead of meta if the value is a URL. And this allows you to specify any kind of URL, absolute or relative (just like in the a element).
(Also note that neither meta nor link have a closing tag, so it’s <meta> or <meta />, but not <meta></meta>.)
That said, Microdata works best if you mark up your existing content, without duplicating it. If you would have to duplicate it, it might work better for your to use JSON-LD instead of Microdata.
Our CRM allows us to send automatic emails to our customers using their software. Things like purchase receipts and so forth. While they offer HTML editing of the emails, it's heavily restricted and we may not use any CSS.
As far as what their style guide does allow, it appears to be all HTML and some inline styling, for example:
<span style="color:#ffffff">white</span>
<div style="color:#ffffff">
<img src="dickbutt.gif" style="width:30px;height:20px">
...are all OK according to the guide. However, no other CSS or CSS references are allowed, including:
<link rel="stylesheet" href="/stylesheet.css" type="text/css">
or
<style type="text/css">
#import "/stylesheet.css";
</style>
or
<style type="text/css">
body { color:green; }
</style>
To add insult to injury, and I should have included this above, everything above the <body> tag (and including the body tag itself) is stripped out upon saving the file in their in-software HTML editor. They have some kind of auto-code modification scripts that reference the "approved" code in their style guide, and strips what's left. So what am I left with? Not much at all. Basically from between opening <table> to the closing </table>. They even strip out </body> and </html>.
With the remaining code, I'm unable to use #media at all or allow any <td> stacking. So, are their any alternate ways of linking to a style sheet you know about? ...a method that will allow stacking without access to CSS? I'm basically looking for a way to make these emails responsive under the restrictions outlined above.
I uploaded the style guide to JSfiddle: https://jsfiddle.net/Lxfqus7f
Yes, yes 100 times yes. Everyone who has ever designed an email template has had the same complaints. Email design is Web design circa 1999. First off just forget CSS references just inline everything you can and do not bother with #media tags, forget they even exist.
Table Design
Think of a <table> as a spreadsheet, a <tr> as a table row, and a <td> as a table cell. Instead of "stacking" TDs try nesting tables. A new table can go inside a TD and in a sort of Matryoshka doll style fashion you can make any layout you want.
<table>
<tr>
<td>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td>5</td>
</tr>
</table>
The above works fine.
Responsive emails
The words responsive and email do not normally go together. What email clients render is severely limited but there are ways to work around it. Like setting your Master Table's width to 100% and having two TDs on each side. Like this:
<table width="100%" cellspacing="0" cellpadding="0">
<tr height="500px" valign="top">
<td width="*" bgcolor="#00FFFF"> </td>
<td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td>
<td width="*" bgcolor="#00FFFF"> </td>
</tr>
</table>
Here are both examples in a JSfiddle.
http://jsfiddle.net/e8r9ky4x/
Looks like your style guide includes the use of some inline styles:
<p>Our studio is <span style="color:purple">purple.</span></p>
Define sections of text that require different HTML <div>
<div style="color:#FC8301">
<h3>This title.</h3>
<p>This is sentence.</p>
</div>
Since you're automatically generating emails anyway, why not just let this one slide and declare your styles in variables and use them where appropriate?
Are they stripping out all style tags? Could you just put a style hidden at the begginning of a TD?
<td><style>/*rules are for quitters!*/</style>Stuff</td>
Using a style tag in the body may not be the best of things to use and may even induce vomiting in many web developers, but it IS a possibility to utilize in Email.
I would strongly recommend not to use it this way outside of cases like you have listed, and would recommend HEAVY testing across all clients as it can sometimes cause buggy results.
I would look to make your inline styling do most of the heavy lifting and just use the style tags in body for items that cannot be done any other way.
Below is some good resources on Responsive HTML email made to work on GMAIL APP (which strips the style tag almost completely) and should help give you a baseline on best way to create your emails.
Hybrid coding approach - http://labs.actionrocket.co/the-hybrid-coding-approach
Hybrid coding redux - http://labs.actionrocket.co/the-hybrid-coding-approach-2
Is Hybrid right option - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question
I am having an issue with an HTML email and how it is rendered in Outlook 2007 and 2010.
There are 2 parts in this code snippet that is causing me issues.
<ul style="margin-left:-30px">
<li style="list-style-image:url(images/blue_bullet.png); padding-bottom:7px;">Bullet 1</li>
<li style="list-style-image:url(images/blue_bullet.png); padding-bottom:7px;">Bullet 2</li>
<li style="list-style-image:url(images/blue_bullet.png); padding-bottom:7px;">Bullet 3</li>
</ul>
I have reviewed this link http://www.campaignmonitor.com/css/
It says that padding isn't compatible in div and p', but it doesn't mention the lack of support for li. What is the best way to add some space between the li's?
Also with the List Style Image this also isn't rendered, in hotmail it is just rendered as a normal disc which is ok by me but outlook it is nothing. Can i use list-style-type:square; but make it bigger and blue somehow?
This is the safest most consistent way to do lists in html email. More code I know, but it will render perfectly on all major clients.
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30" valign="top">•
</td>
<td valign="top" height="30">List Item 1
</td>
</tr>
<tr>
<td width="30" valign="top">•
</td>
<td valign="top" height="30">List Item 2
</td>
</tr>
<tr>
<td width="30" valign="top">•
</td>
<td valign="top" height="30">List Item 3
</td>
</tr>
</table>
The • are in separate table cells so that if you have a multi-line list item, the bullet and 'padding' remain in the correct position. If you want a different bullet type, just find a character in the ascii table to use in place of the •. You could also use an image...
If you're making emails and you want them to work on all email clients, use tables and set widths - if you want to make it responsive that's a whole other ballgame and will only work with most email clients.
John has given the correct and most accurate answer for this example - but if you are making html emails then make sure you leave any web design mentality at home as it's more of a hindrance to presume that most things will work the same. Email's another world man. Good luck!
:)
It is my second post here in stackoverflow and got happy with the results of my first question. Anyway, I already have a working tinymce toolbar with a re-designed appearance. In achieving this I have used jQuery to add classes to the toolbar elements.
But in some way isn't it better if upon initializing the toolbars the classes are also added..
let's say:
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,"
currently: (the one that i have now)
initiate tinymce
find elements add class while there are elements
Result:
<td class="first"> (*save elements here) </td>
<td class="last"> (*newdocument elements here) </td>
<td class="separator"> (*separator element here) </td>
<td class="first"> (*bold elements here) </td>
<td class="center"> (*italic elements here) </td>
<td class="center"> (*underline elements here) </td>
<td class="last"> (*strikethrough elements here) </td>
what I want to achieve:
- initiate tinymce and add classes (*the result would be the same)
wouldn't it be faster this way?
I have been tracing the codes of tinymce but with my inexperience in coding makes it more harder for me... Anyone out there who knows the answer to my problem.. Please help me.. thank you and more power... :)
Looks like you should use the configuraton setting editor_css.