I would like to know the best practices concerning the usage of a drop-down menu in my website along with search engine optimization. Currently, the content of the menu uses almost 50% of the HTML code, but doesn't describe at all the real content of the page.
Should I move my menu at the end of the HTML code and replace it visually at the top using CSS? What is the best thing to do?
My website is http://www.meow.fr, you can check the HTML code there.
JavaScript and Drop Down Menus
It is best to keep things simple. Search engines still do not read JavaScript very well. If your site navigation is based on JavaScript, it will be difficult to get all of your pages indexed. If the decorative drops down type menus are important to you, always provide a back up of plain text links.
In strict terms, your dropdown DOES reflect the real content of your page because it's on that page. You could try moving it lower down with CSS but the SEO effects of this are likely to be negligible. Only testing & waiting & seeing can really tell.
A bigger problem for your page might be mixing English and French content. Ranking may suffer because of this.
Two more important things for that page:
1 - Your page title and H1 aren't anything anyone will search for ("Back in Dali"). A descriptive title such as "Trip to Dali" or "Photos from Dali" would be better.
2 - Add alt texts to your images (not too long) to boost relevant keyword-rich content.
Related
I am making a website which has a blog, however I do not know how to make it so that only a snippet of text shows (say the start of the article) so that users can click on "read more" to open that particular article.
Obviously I could do this by putting the first few lines in HTML, with a "..."
and linking it to a page with the full article, using tags etc.
But, is this the correct way?
I don't know what I should be searching for so therefore I am not finding much information, just lots of wordpress stuff and I am using bootstrap and Less.
I haven't put my code as this is just a general question, I do not have a piece of code I am needing help with, just would like to know how this is done and/or a link to a good explanation as I am pretty new to this.
Thanks!
You should take a snippet of your page and use it for this purpose,it will help you in seo if you can use that in meta tag too to better index your page and hence better search result will be displayed .
one might assume that this would be quite a common question, but I couldn't find any helpful answers yet, so I'll ask. I have to add that I find the whole structure of mediawiki and also their help pages very confusing.
I'm not expecting an exact answer, I'll also be grateful for resources that will help me understand just how mediawiki is structured.
OK, so:
I want to set up a Wiki for personal uses, and I'm trying to get the sidebar customized to my needs, especially I want to have the section headings (that would be level 2 to, say, 4 headings) of the page that is currently viewed displayed in the sidebar (as anchors, I guess).
In other words, have the table of contents not on the top of the body / content part, but on the left hand side in the sidebar.
I have somewhat edited MediaWiki:Sidebar and could get rid of some stuff that I don't really need, but I just can't find a way to get a table of contents there.
Do I need an extension or is this possible with MWs standard functions?
I've seen this, but I would prefer not to edit the html or js myself and rather just edit MediaWiki:Sidebar if that is possible at all.
Thanks for any answers.
There isn't a build in way to do that. I don't know any extension, which actually provides such a feature. But there is a JavaScript, written by a MediaWiki developer, which does, I assume, what you're looking for:
https://github.com/prtksxna/persistent-toc
It will show all ToC levels at the left side, if the first visible area of the page goes out of the viewport (and the top ToC box isn't visible anymore). It would maybe not a big deal to limit the ToC to level 2-4. You could install this script via your MediaWiki:Common.js, your user specific js (like I did for WMF [projects][1] or you create a new extension, which adds the script and the css to your page.
[1]: https://meta.wikimedia.org/wiki/User:Florianschmidtwelzow/global.js projects
I've got a large collection of pages on my site, each with unique content, but also with often redundant sidebar surrounding that content. I'm worried that this sidebar content is dragging down my site in Google, Bind, etc by diluting the results. What can I do to effectively hide this content from web spiders, but not my users?
Thanks!
It's just my gesture, but Google is smart enough to find out where is a navigation element and where are the content.
However, there might be various reasons why your website loosing positions. I would start from reading this help tipic, also keep in mind that Google search results are dynamic and once you reached first position does not guaranty that you would stay there, someone might just providing more unique content that match current subject and he would be pushed up.
If you want to make sure that search engines are aware about your document structure, and point them out what is what use microdata markup.
For example you can wrap a navigation in following format:
<ul itemscope itemtype="http://schema.org/SiteNavigationElement">
<li>
Home
</li>
...
</ul>
There after, your navigation items would appear in:
Google Webmaster Tools > Optimization > Structured Data
Also, by hiding your content with AJAX/JavaScript is more likely to harm your visitors who have disabled JavaScript or due to possible error in your library and in fact Google can understand and index asynchronous requests.
One thing you can do is not include it in the page mark-up and to load it in after page load using AJAX.
The sidebar won't affect your SEO efforts as it isn't duplicate content. Site navigation is expected to be on every page (and it is obviously very common). Duplicate content, from a search engine point of view, is when the page's primary content is identical or nearly identical, to another page's content.
A better solution would be to move your content to the top of the page and your navigation code down the bottom. Reposition stuff with CSS.
Otherwise, Ajax or put text into images.
I have no idea, but does it make difference if we have heavy amount of content in our html document ?
It should not make different, right? Actually, I am trying to load a single page with all text-content in . So, when I click some link, the javascript will write the content for that link rather than reloading another page.
Actually, the web site is to be built for small company. And data will be just image + text for each document. Is my approach good idea?
Pre-thanks to all contributors.
Is it good to have a lot of content in tag in html document?
You shouldn't have any actual content in the head section, and there shouldn't be too much in the way of meta data you could put there.
Actually, I am trying to load a single page with all text-content in .
This is generally a poor idea. You end up with one very heavy document that takes a while to load, and the visitor might not care about most of it.
So, when I click some link, the javascript will write the content for that link rather than reloading another page.
Storing the content in JavaScript just makes life difficult. It is complicated to produce, and is unfriendly to search engines, people who want to bookmark or send links to friends, and people who just don't have JS available.
Actually, the web site is to be built for small company. And data will be just image + text for each document. Is my approach good idea?
Probably not. Discrete documents with normal links between them are almost always better for everyone involved.
We are designing a web site and have run into some UI challenges that would be neatly solved with a tabbed interface. Users will interact with different elements of the site (there are some basic view/edit/copy/paste functions available) and having only one object in one tab visible at a time simplifies things quite a bit.
We are, of course, completely comfortable with tabbed interfaces but what about novice users? I've searched the web for guidance and I haven't found anything definitive. Do you have experience presenting a tabbed interface to novice users and did they have trouble with it? Or, have we reached the point where everyone is comfortable with tabs and we can use them without reservation?
Usability is important-- more so for this project than most. If naive users are confused by a tabbed interface it just won't work and we'll have to find another way.
In his excellent book "Don't Make Me Think" (Sensible.com), Steve Krug discusses the benefits of using a tabbed interface:
They're self evident
They're hard to miss
They're slick
They suggest a physical space
He goes on to describe the keys to successful tabs as demonstrated by Amazon.com:
They were drawn correctly
They were color coded
There was a tab selected when you enter the site.
Obviously, he provides details to each of these bullet items in the book (I won't plagerize him here). The book is definitely worth a look if you want guidelines for creating web sites for novices and experts alike.
Tabs are becoming common place enough that I wouldn't worry about using them, as long as you implement them correctly. Make sure that you make the active tab visually distinct from the other tabs.
Also, try to create the tabs using progressive enhancement so that the content is still there with JavaScript disabled. There are two main ways of doing this:
Load every tab but the first using
AJAX. The tabs themselves should be
links to the content that the AJAX
fetches.
Keep all of your information on the
page, but hide it using JavaScript.
When you cycle through the tabs,
they are populated from the hidden
parts of the page.
A design resource you might find helpful is the YUI Design Pattern Library and their section on tabs.
I think as long as the tabs are visible as such it's understandable by the user. I have seen websites where they present a vertical bar with links that act like tabs but it's not immediately visible to the user and found that very confusing.
I would have to disagree with those are in favor of tabs. In a design test we did for a fairly high-traffic website (over 1mil uniques at the time), we found that tabs have not been used. Tabs were clearly marked, located to the right of the main content area. Based on that experience I would suggest either finding an alternative or, as staticscan suggested run usability tests to figure out which ones work.
Don't think you can decide a-priori what is usable and what isn't. Do usability testing
"It takes only five users to uncover 80 percent of high-level usability problems" Jakob Nielsen
Google usability testing and start learning. It's not hard.
I tend to agree with lothar and ricebowl - people seem pretty familiar with it these days. The most important thing with any GUI element is clarity - the user must innately know what will happen when they press something (they know that clicking an inactive tab will make it active); and in navigation - it must be very clear exactly which tab they are currently on. As lothar said, if it's not immediately visible to the user, it's very confusing. If you address those issues, then it should be fine.
Just wanted to note SmashingMagazine has a new article showcasing tabs: Showcase of Tabs
I think people are used to the metaphor (from binders, or card-indexes and so forth) of tabs. Especially those that use the web for any length of time. I think that, if IE's adopted a metaphor, it implies a common familiarity with that metaphor.
So, no, I'd suggest that they're not confusing and suggest that you go for it. Just, maybe, post a welcome/first-time introduction (or a prominent 'help' link to such an intro) to the use of the tabs.
I've been a developer for an intranet app that used a tabbed interface, generated with HTML and controlled by JavaScript. This was way before IE7 and Firefox. In fact, it was a bit of a novelty on websites in general, too.
Fortunately, a previous developer had discovered that if you made it look like a dialog box - even down to using a grey background, then people usually understood the metaphor. We also loaded all the content for all the tabs in the initial page-load, and had the Save/Cancel buttons outside the tabbed structure. Because of this, most people immediately understood that they could move between tabs (we used JavaScript to hide and show the DIVs) and a Save would save changes to all of them.
If you want to deviate from such an obvious metaphor, then you need to do some usability studies.
A well implemented Tab interface should not confuse users.
In line with what others have said one of the most ipmortant things to consider with Tabs, or any other navigation interface is for it to be obvious where they currently are in the navigation scheme.
Another important point is not to break the browser! Many AJAX or javascript implemtations break the back button. This is a minor annoyance to some and a major inconvieniece to others. Make sure to consider your target audience here.
Personaly I prefer the oldschool method of not preloading all of the tabs but having each tab as its own page and using a templating methodology to manage the navigation interface, be it tabbled or otherwise. This maintains the browser history and works fine with or without javascipt.
Tabs, etc are just tools. How we decide to lay them out and use them is what determines their effectiveness.
What I try to keep in mind is:
1) Keep it close. The things we use the most should be on the front or up close to the top as much as possible and bury the rest based on how often they are used/adjusted.
2) Easy enough for Mom to use. All interfaces are confusing if they are not laid out in a clear and logical manner.
3) Organize how it's used, not how you think it makes sense.* I often use tabs to break up steps in a process, or to break up areas such as basic / advanced options. I group them based on similarity or usage depending on what works better
4) Keep them few Either way I try to stay below the 7-10 range tops as the human brain has a hard time jumping beyond 7-10 digits, so I assume the same for pieces of information. Vertical Accordians might be something you want to look into as well.
I have also embedded tabs within tabs before. Works well but only one layer deep most of the time.