How to use title tags without having the title popup when hovered over? - html

I have a question regarding title tags. I have been using them on every link on my site in the hope that it will be good for SEO. Because I have so many title tags in use it looks very crazy to actually visit. No matter where you point there's another title popup. Is there any way to prevent these hovers (the ones that show the content of the title tag) while still using title tags?
Thank you for your answers.

Quit overobsessing about "SEO".
The title tag is for information about the link (target). If you use it for keyword lists or something like that, then stop. If you simply duplicate the link text, there's no need. If you use it correctly, you shouldn't worry about the tooltip that browsers display.

You could use JavaScript to remove the title attribute (not tag).
But as the others said, the title attribute is intended to provide “advisory information about the element for which it is set”. So don’t spam the user with useless information just because you heard/read that search engines love that.

I fully agree wuth Joel (+1), imho now you achieve reverse effect: your site looks like one big fake to google without real content :)

The best "rule of thumb" I have heard and experienced in a positive way with SEO is to make a great site for your visitor and let the search engines take care of themselves. It sounds like you are making a site for Google and making the visitor miserable which is the exact opposite of successful SEO.
Remember, without the visitor it doesn't matter what your SE placement is.

<a onMouseOver="javascript: this.title='';" href="../path/to/image.jpg" title="some title here">link</a>
I agree with others though, you should not sacrifice usability, integrity of content and the site's design in order to achieve better SE ranking.

As Andy (and others) note, you may be confusing the Page Title tag with the Link title attribute.
To clarify, in terms of SEO:
Page Title tags on pages ARE very important for SEO
Link title attributes are very minor and not worth upsetting user experience with.

I have not tried this myself, and I am not sure how Google feels about it:
But what about putting all your title tags where you want them, for the SEO, then after the onload event is fired, simply null them all at once by finding all elements that have the title attribute and setting them to "". This way, the user is not beaten-to-death by title tags as they try to stumble their way through your page....?
In Prototype, I use the $$() function to get all items of a specific class and it works like a champ.

Related

Reasons to Use the Title Attribute in HTML Tags

NOTE: I don't mean <title></title, I mean <div title=""></div>. Just wanted to get that obviousness out of the way to people who scan questions without reading.
I have read a couple of articles on here that describe the purpose of the title tag, what it should be used for, and so on and so forth. Can someone please explain to me if these are appropriate reasons for title tags:
Use for blind people that have programs that read text (Would this be important for images that take the place of third-party links? Or is the alt attribute better?)
Lazy way to use a simple tooltip
I learned HTML when HTML5 was brand new a few years ago, and teachers that explained HTML5 didn't even bother touching on such archaic things as the title attribute.
Basically, is the purpose of the title attribute even useful in modern-day HTML5? Are the "examples" I listed above even relevant anymore?

<abbr> Tag: How to Accommodate Users without a mouse?

I'm currently working on a site's accessibility by adding <abbr> tags in appropriate places.
This works great for some users but I'm concerned about accommodating visual users who cannot mouse over the abbreviated text to view the tool-tip.
I've read through this article at A List Apart and they recommend linking to a glossary page. This seems like overkill for the site I'm working on as there will only be a few items I'm defining.
Are there other options?
You could use javascript to add auto append them to the bottom of the page as foot notes like wikipedia references.
A quick google search give me two options:
A javascript library called abbr-touch.js
Adding a <span> tag inside the <abbr> tag as in http://accessify.com/tools-and-wizards/developer-tools/acrobot/why-use.php
In many situation, abbr tag is an aberration.
If an user has to focus the text in order to understand its meaning, then it's not the good way to do, no matter if he's doing so with a mouse or with a keyboard.
You want to help and make things clear.
In my opinion, the best way is to "provide the first use of an abbreviation immediately before or after the expanded form" (http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G97)
I live in West Virginia (W. Va.)
Also remember that an abbreviation is, according to WCAG, "shortened form of a word, phrase, or name where the abbreviation has not become part of the language" (when you can read it as written).
I can send you my CV
So using an evident abbreviation like CIA, FBI, NSA, Mr., Dr., CV when the context is clear does not need any other thing, as you do not want a screenreader to read "Central Intelligence Agency", and it won't give any clue for people not knowing what the CIA is. If you really care to do so, a glossary is sufficient enough.
Sometimes, you might want to help assistive technologies to pronounce the abbreviation (for instance, differentiating "Dr." when it's "doctor" or "Drive") but then again abbr tag won't help. You should then use something like aria-label.

Simple tooltip - Title Attribute?

When I want to have a message show when a user mouse overs an object, and lately I just use the title attribute on my html tags since it's simple and automatically doesn't go off screen.
Question: Is using the title attribute is a bad thing to rely on for a tool-tip?
Ignoring the fact you can't customize it, I'm curious about functionality over using a custom made tool-tip (such as how the standard user interacts with it). A specific web-comic I read, for example, uses the title attribute to add a witty comment / factoid when you hover over it. Yet not many people seem to know about it.
As such it seems a title might be good for a comment, or even saying author of a picture, but is it good for a true simply tool-tip?
Considering for a 'real' tool-tip you need usually 1-2 extra elements, css (and depending how you set it up, possibly some inline style for placement), and possibly even java-script, is the title attribute bad to use since (again) it cannot be customized, is often a small off-topic detail about the element, and only appears after a set amount of time.
Note: If it helps (food for thought), my current situation that brought this question on, is I like when a site has something like [?] for you to hover over to find more details without shoving them into the page, thus keeping it simple.
Also, I learned html from w3schools, and they never mention the title attribute, so not really sure what they are intended / should be used for. (and yes, mentioning w3schools part was a (bad) attempt at getting sympathy)
And I find this question kind of weird to ask considering SO uses them quite a bit, but feel free to assume I know nothing about it as... well... I really don't)
The title attribute (#title), should not be used.
Every browser does their own thing with the #title, even though it looks the same.
For people who just use the keyboard, they cannot get the information in #title.
People accessing the site from a mobile device, cannot get the information.
Some, but not all assistive technology can get the information in the #title
some allows it to be read after enabling it. Which not many people (users) know about.
other technology simply ignores the link text and reads the #title only.
Ex of 4.2:
Delete your account
This will read:
Are you sure? Link
Further Reading: PG: Title attribute
First of all,hats off to your question. Good thinking. I guess we people [I'm speaking about amateur coders like me] needn't develop a big site or rather lack that expertise. We simple need to keep getting our things done in an optimized manner. Therefore, similarily, I have also encountered almost every script using title for tooltips. Guess,it's the simple way to tackle it. Moreover, as long as the tooltip is attractive, isn't slow, and caters our need: its all good.
The title attribute is simple, and simplistic. It is not reliable. No tooltip mechanism really is, but the tooltips generated by title attributes have rather poor usability: tiny font size, problems with line control, timed disappearance, no way (to normal users) to make it stay put so that you can actually read it even if you are a slow reader. Besides, there is normally no hint to the user about the availability of a tooltip.

HTML5 for marking up functionality - what semantic tags should I use?

When it comes to writing blog markup, I absolutely understand the use of article and section tags. But my masthead sections have two widgets. One has a search engine embedded and the other is marketing copy leading to an FAQ page.
What would be the correct HTML5 markup in this case? How do I mark up widget functionality?
my masthead sections have two widgets. One has a search engine embedded...
A search engine embedded? Do you mean a search field, i.e. a text field into which you can type search terms? For that, you want <input type="search">.
...and the other is marketing copy leading to an FAQ page.
Does this really qualify as a “widget”? If it’s marketing copy “leading” to an FAQ page, that just sounds like a link to me, which has been semantically represented in HTML since version 1 with the <a> element.
HTML is pretty simple, you really don’t want to over-think it. You don’t need specific tags for everything people could possibly give a name to. (What exactly is a “widget”? Isn’t it just a section of the page?) For most things, <section> is fine.
While HTML5 is a big improvement, there's one thing it doesn't fix: The subjectivity of what is considered proper semantics for every situation.
And, I doubt HTML will ever fix that.
If you're already using HTML5 containers for other more obvious parts of the page, I wouldn't sweat these too elements much. You could put the marketing stuff in an aside. Search could be considered a form of nav. But...I don't think bad karma will come your way if you just stick them in a couple of divs, either. ;)

Is there a way to make search bots ignore certain text? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 months ago.
Improve this question
I have my blog (you can see it if you want, from my profile), and it's fresh, as well as google robots parsing results are.
The results were alarming to me. Apparently the most common 2 words on my site are "rss" and "feed", because I use text for links like "Comments RSS", "Post Feed", etc. These 2 words will be present in every post, while other words will be more rare.
Is there a way to make these links disappear from Google's parsing? I don't want technical links getting indexed. I only want content, titles, descriptions to get indexed. I am looking for something other than replacing this text with images.
I found some old discussions on Google, back from 2007 (I think in 3 years many things could have changed, hopefully this too)
This question is not about robots.txt and how to make Google ignore pages. It is about making it ignore small parts of the page, or transforming the parts in such a way that it will be seen by humans and invisible to robots.
There is a simple way to tell google to not index parts of your documents, that is using googleon and googleoff:
<p>This is normal (X)HTML content that will be indexed by Google.</p>
<!--googleoff: index-->
<p>This (X)HTML content will NOT be indexed by Google.</p>
<!--googleon: index-->
In this example, the second paragraph will not be indexed by Google. Notice the “index” parameter, which may be set to any of the following:
index — content surrounded by “googleoff: index” will not be indexed
by Google
anchor — anchor text for any links within a “googleoff: anchor” area
will not be associated with the target page
snippet — content surrounded by “googleoff: snippet” will not be used
to create snippets for search results
all — content surrounded by “googleoff: all” are treated with all
source
Google ignores HTML tags which have data-nosnippet:
<p>
This text can be included in a snippet
<span data-nosnippet>and this part would not be shown</span>.
</p>
Source: Special tags that Google understands - Inline directives
I work on a site with top-3 google ranking for thousands of school names in the US, and we do a lot of work to protect our SEO. There are 3 main things you could do (which are all probably a waste of time, keep reading):
Move the stuff you want to downplay to the bottom of your HTML and use CSS and/or to place it where you want readers to see it. This won't hide it from crawlers, but they'll value it lower.
Replace those links with images (you say you don't want to do that, but don't explain why not)
Serve a different page to crawlers, with those links stripped. There's nothing black hat about this, as long as the content is fundamentally the same as a browser sees. Search engines will ding you if you serve up a page that's significantly different from what users see, but if you stripped RSS links from the version of the page crawlers index, you would not have a problem.
That said, crawlers are smart, and you're not the only site filled with permalink and rss links. They care about context, and look for terms and phrases in your headings and body text. They know how to determine that your blog is about technology and not RSS. I highly doubt those links have any negative effect on your SEO. What problem are you actually trying to solve?
If you want to build SEO, figure out what value you provide to readers and write about that. Say interesting things that will lead others to link to your blog, and crawlers will understand that you're an information source that people value. Think more about what your readers see and understand, and less about what you think a crawler sees.
Firstly think about the issue. If Google think "RSS" is the main keyword that may suggest the rest of your content is a bit shallow and needs expanding. Perhaps this should be the focus of your attention.If the rest of your content is rich I wouldn't worry about the issue as a search engine should know what the page is about from title and headings. Just make sure RSS etc is not in a heading or bold or strong tag.
Secondly as you rightly mention, you probably don't want use images as they are not assessable to screen readers without alt text and if they have alt text or supporting text then you add the keyword back in. However aria live may help you get around this issue, but I'm not an expert on accessibility.
Options:
Use JavaScript to write that bit of content (maybe ajax it in after load). Search engines like Google can execute JavaScript but I would guess it wont value any JS written content very highly.
Re-word the content or remove duplicates of it, one prominent RSS feed link may be better than several smaller ones dotted around the page.
Use the css content attribute with pseudo :before or :after to add your content. I'm not sure if bots will index words in content attributes in CSS and know that contents value in relation to each page but it seems unlikely. Putting words like RSS in the CSS basically says it's a style thing not an HTML thing, therefore even if engines to index it they wont add much/any value to it. For example, the HTML and CSS could be:
.add-text:after { content:'View my RSS feed'; }
Note the above will not work in older versions of IE, so you may need some IE version comments if you care about that.
"googleon" and "googleoff" are only supported by the Google Search Appliance (when you host your own search results, usually for your own internal website).
They are not supported by Google's web-search at all. So please refrain from doing that and I think that should not be marked as a correct answer as this might create ambiguity.
Now, to get Google to exclude part of a page, you will need to place that content in a separate file, such as excluded.html, and use an iframe to display that content in the host page.
The iframe tag grabs content from another file and inserts it into the host page. I think there is no other available method so far.
The only control that you have over the indexing robots, is the robots.txt file. See this documentation, linked by Google on their page explaining the usage of the file.
You basically can prohibit certain links and URL's but not necessarily keywords.
Other than black-hat server-side methods, there is nothing you can do. You may want to look at why you have those words so often and remove some of them from the site.
It used to be that you could use JS to "hide" things from googlebot, but you can't now that it parses JS. ( http://www.webmasterworld.com/google/4159807.htm )
Google crawler are smart but someone that program them are smartest. Human always sees what is sensible in the page, they will spend time on blog that have some nice content and most rare and unique.
It is all about common sense, how people visit your blog and how much time they spend. Google measure the search result in the same way. Your page ranking also increase as daily visits increase and site content get better and update every day.
This page has "Answer" words repeated multiple times. It doesn't mean that it will not get indexed. It is how much useful is to every one.
I hope it will give you some idea
you have to manually detect the "Google Bot" from request's user agent and feed them little different content than you normally serve to your user.