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 6 years ago.
Improve this question
Does the title attribute in a link do the job of the real text in the link for SEO?
i.e
Web Design
is it the same as:
click here
when trying to get a good page rank for keywords like "web design"? is it like alt attribute in an image tag? or is it useless in SEO?
is it the same as:
click here
what's the difference between all the above?
Thank you in advance!
Alt is not a valid attribute for <a> elements.
Use alt to describe images
Use title to describe where the link is going.
The textvalue (click here) is the most important part
The title attribute gets more and more ignored.
Google looks far more on the link text than the title attribute.
For google the title tag is like a meta tag which is not important compared to content.
Image alt tags are however still very important (especially for image search)
The main feature of those tags is to provide usability for your users, not to feed informatino to search engines.
title attribute hasn't the same value as link text on SEO.
between
Web Design
and
click here
stick with the first option. But it is duplicate data, and has no real aggregate value on the case.
The main title purpose, it to give a tooltip about the link's page title. Putting the linked page title is the correct application (think on user first).
The alt attribute is for allow non-textual content to be represented. Consider the examples on WHATWG: http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#alt
EDIT
1
<span>2</span>
3
...
27
The title tag should be used to provide ADDITIONAL information for an element such as a link. If your title tag duplicates the actual link text then it will have no SEO benefit (there are arguments that the duplication could have a slight negative effect too). If, however, you can provide additional, meaningful information on the link such as further details about the content linked (especially if it links to a filetype that Google wouldn't be able to access/index) then they're definitely worth having.
Even as the tooltip in the browser, having a tooltip with the same text as the link text makes no sense, so as a rule of thumb only use it when you have something additional to add, not duplicate.
HTH
The text in the title attribute is not seen by crawlers. It won't cause keyword stuffing and it won't replace the anchor text for a given URL. It will, however, provide additional info if this is needed.
Use it to help your visitors not your SEO efforts.
alt is only valid for images — it's alternate text that serves for screen readers and people with images turned off to understand what an image represents.
title applies to most (if not all) elements, and can be used to provide tooltips for more information about parts of your pages.
I don't think either attribute plays any major roles in SEO. As Joe Hopfgartner says, the actual text of your links is much more significant in terms of semantics, which is why using "click here" as link text is discouraged these days.
Use this pseudo-code:
Text
For instance, this:
Example
renders like this:
Example
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I'm curious whether the CSS visually-hidden technique, most commonly used on font icons, for alternative image text is preferable to using the alt attribute. The argument against the alt attribute being that a screen reader announces "Graphic" any time it sees and <img> which is less natural. For example:
<p>ABC <img src="right-arrow.png" src="converts to"> XYZ</p>
Reads as "ABC graphic converts to XYZ"
<p>
ABC
<span class="visually-hidden">converts to</span>
<img src="right-arrow.png" src="" aria-hidden="true">
XYZ
</p>
Reads as "ABC converts to XYZ"
I can agree it's less natural when screen reader reads "Graphic" every time we focus on some image. From the other hand, straightforward explanation of type of content may be extremely important for people with impairments. Navigating through site is hard enough, so if we can narrow the field of interpretation, it's advised to do it.
What I mean is surfing the Internet with screen reader is not a perfect experience. But for the moment we have to stick to it and by making some things more schematic, we actually make it a little more clearer.
Also we can look to WCAG docs about this issue where there's a few advised techniques to choose from.
Situation A: If a short description can serve the same purpose and present the same information as the non-text content:
G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content using one of the following techniques:
Short text alternative techniques for Situation A:
ARIA6: Using aria-label to provide labels for objects
ARIA10: Using aria-labelledby to provide a text alternative for non-text content
G196: Using a text alternative on one item within a group of images that describes all items in the group
H2: Combining adjacent image and text links for the same resource
H35: Providing text alternatives on applet elements
H37: Using alt attributes on img elements
H53: Using the body of the object element
H86: Providing text alternatives for ASCII art, emoticons, and leetspeak
So basically we could choose also from aria-attributes (and we can sometimes, but only if alt is not enough) BUT there is also one more strong argument for using alt attributes - SEO
Using alt text on your images can make for a better user experience, but it may also help earn you both explicit and implicit SEO benefits. Along with implementing image title and file naming best practices, including alt text may also contribute to image SEO.
While search engine image recognition technology has vastly improved over the years, search crawlers still can't "see" the images on a website page like we can, so it's not wise to leave the interpretation solely in their hands. If they don't understand, or get it wrong, it's possible you could either rank for unintended keywords or miss out on ranking altogether.
quote from here
Both techniques are counterproductive and useless.
In your example :
ABC → XYZ
This means nothing to me. I'm not blind, I have no screenreader. And I still don't understand what is this curious arrow.
Of course having an img tag (with an alt) may help me to understand the meaning of this arrow by hovering with a mouse. But, how can I guess that this arrow is in fact an img tag and that I have to hover with my mouse? How can I do without using a mouse?
Let's try another method :
ABC converts to XYZ
We don't use img tag, we don't use visually hidden text. Everybody with or without screenreader will understand.
There are a lot more people targeted by accessibility than blind people and you should always try to satisfy everybody.
Considering accessibility, is it good to use:
without any content, instead of:
About
Update: Here's a live demo, supposing that an appropriate font is available. I actually use RichStyle font.
a[href="about.html"]:before {
/* 1F6C8 🛈 CIRCLED INFORMATION SOURCE = information */
content: "\1F6C8";
}
Here is some good information regarding use of the title attribute with the anchor tag.
w3.org - supplementing link text with the title attribute
The objective of this technique is to demonstrate how to use a title attribute on an anchor element to provide additional text describing a link. The title attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the title attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the title attribute.
Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text (CSS) or H30: Providing link text that describes the purpose of a link for anchor elements.
"Good" is a not very well defined term.
Is it accessible to screen readers - yes. According to the WAI-ARIA name calculation algorithm, title will be used to calculate the name. It is step H and is referred to as the tooltip.
http://www.w3.org/TR/accname-aam-1.1/#mapping_additional_nd_te
However, that is not the whole picture, because there also needs to be a visible name for the link that is accessible by sighted keyboard-only users. Title attributes are only displayed in HTML when you mouse over an item.
Therefore, this technique will only be accessible if there is some other visible indication of what the link is and this visible indicator adheres to all the other accessibility requirements.
The WCAG says in his normative section (2.4.4) : "The purpose of each link can be determined from the link text alone" (http://www.w3.org/TR/WCAG20/#navigation-mechanisms).
WCAG also says that you can "supplement" the link text with the title attribute, so it excludes the title attribute from the definition of "link text".
Conclusion: you must provide a link text like in your second example:
About
Although this is not explicitly defined in this normative section of the WCAG, the "link text" is defined in the techniques as being the content of the inner text of a link including images alternative.
See the two following and complementary techniques for more informations:
http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H30.html
http://www.w3.org/TR/WCAG20-TECHS/H33.html
EDIT: one comment illustrated that my answer lacked of some examples
Please note that WCAG2.0 and WAI-ARIA are two complementary and distinct guidelines and that you can provide additional informations which can be exposed to accessibility API if it's necessary. But in no case, you should consider that exposing an information to the accessibility API is sufficient enough for those not using Assistive technologies.
So the following example is wrong as aria-label can't be accessed within an user agent without the use of assistive technologies
The following is also wrong:
<a href="about.html" title="About">
<img width="100" height="100" src="about.png" alt="" /></a>
Although your link exposes an "accessible name" to the Accessibility API (WAI-ARIA), it does not provide a "link text" as specified by the WCAG normative guideline (and apparently means that a significant image is used as decorative).
So if your link only contains an image, this image should be present in the HTML code, and be correctly entitled with the alt attribute
EDIT 2: You can read the following blog post to illustrate the problem with the sole use of the title attribute https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/
Its not bad or good. Because if you want to do button with image and no text with the a tag you will do something like.
Just make sure you put a style for your a so users will be able to click on it.
For SEO purposes it is good. You can aim at keywords with title attribute. so, It is good to use. it gives user an idea about what he is going to do by clicking after it. I use it often.
I understand that for a website to be "accessible", images should in general have the alt tag. The alt tag should provide alternate text for the image, in particular when the image contains content that is relevant for the user.
When one uses the alt tag like :<img alt= "alttext" ...> the alttext does not display when the mouse hovers over the image. If one adds the title tag, then one can have the alttext displayed.
My question is: Is the use of the title tag appropriate for this?
I have found a bit of conflicting information on this:
This site seems to discourage the use.
This site seems to say that the use is fine.
alt attribute is displayed when the image cannot be loaded, and used for accesibility when that feature is set in the browser. It also helps for Search Engine Positioning (SEO) (thanks #Chris for noting this)
alt HTML reference
title is just Advisory information and it's disadvantaged for accesibility purposes. Source: W3.org
title HTML reference
For example, this is an extension for chrome (offered by google) that show alt text, not title..
If your aim is to have some text appear when you hover over an image, then yes, the title attribute is appropriate. Ensure that any key information in the title text is duplicated elsewhere on the page.
If your aim is to provide additional information about the image to all your readers, then you will need to consider an alternative way for keyboard and touch based users to read that content. It may be simpler just to display the content next to the image for all users.
Unless your image is focusable, relying on a tooltip is not a solution.
Having to use the mouse to discover the subject of an image is not accessible to keyboard only users.
What you need to do is :
providing an alt text for screenreader users (people who can't see it)
provide contextual description next to the image if you need to give all of your visitors more elements (like copyright owner, artwork title, ...).
Note that you have to set an alt text, it still can be empty if the alternative is not relevant (decorative images, or redundant information).
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 years ago.
Improve this question
When it comes to linked images and SEO, should the title attribute be used on the <img> tag, the parent <a> tag or both?
Common practice seems to be to add the title attribute to the <a> tag. But is this best for SEO? Would there be any harm in adding it to both tags? If not, is there harm in the title text being identical on both?
P.S. I am aware that you should almost always use the alt attribute on <img> tags regardless of the title attribute.
w3schools defines the title attribute as follows:
The title attribute specifies extra information about an element.
The information is most often shown as a tooltip text when the mouse moves over the element.
As for semantic markup it's enough to add the title attribute to the a tag. Adding it to the image within isn't necessary, except you want to have different content for the title attribute to describe directly the image.
As far as SEO is concerned: if the img tag already has the alt attribute, you don't need the title attribute.
A Usefull blogentry about that:
http://www.wpromote.com/blog/seo/image-alt-vs-title-using-alt-title-attributes-in-image-tags/
Excerpt:
While the ALT attribute provides alternative text when images cannot
be displayed, the TITLE text offers supplementary information about
the element in which it is contained. According to this post on the
Google Webmaster Blog, Google tends to focus on the information in the ALT text. So there you have it! If you’re only going to use one attribute… ALT it is!
That's a good question.
The title attribute isn't used by Google and Bing (in search engine ranking algorithm). Titles attributes are useful for accessibility (blind people and vocal navigation for example).
Nevertheless, the useful (very useful in SEO strategy) is the "alt" attribute. This one is used by Google and other search engines. "alt" has to be used on img balise.
In the <alt> attribute you describe, what you can see on the image.
In the <title> attribute of the image, you describe the general topic, the image is about.
In the <title> attribute of the <a>, you describe the general topic, the <a> is about.
If there is nothing else in your <a> than the image, there is no need to add a <title> attribute to the image (talking about the Google Robot), else it is.
Conclusion: Do never use identical titles, that is absolutely useless for Search Engines, and will
brings your Code Quality in there ranking down
not generate new keywords
EDIT1: I am not agreeing that much, with the other answers, since the title attributeis at least used in the Google Image Crawling and for checking the Code Quality, which can both decrease your CPC (=Cost per Clicks) when using adwords
How to write good alt text for images to help screen reader and blind user to understand what is picture about ? and if we are using Alt text then what should be in a Title="text" if we are using both in special cases like menu images etc
I'm a screen reader user and will use Stack Overflow as an example of both the good and bad.
Alt tags should be brief and descriptive. For example, Stack Overflow's alt tags for the vote up and vote down options are nice since they don't take long to read and get to the point quickly. Examples of bad alt tags are the make this question a favorite and accept this answer. Neither of the tags are descriptive, the favorite tag is just "*" and the accept the answer tag is "check" The only way for me to tell what they are is to read the source or have someone sighted let me know what they are for.
As far as title attributes go I don't really have much advice. My screen reader doesn't read them by default so I don't normally use them. An example of something that could be useful is additional information. For example the reason my accepted answer rate is so low is because I have no way of telling whether I have accepted an answer on a question. It would be nice if the title attribute on the accept this answer graphic would say something like "click to accept this answer" if the answer wasn't accepted and "Click to remove this answer as the accepted answer" if it is the accepted answer.
You should not make the visually impaired user understand what the image is all about. For the blind, the image effectively doesn't exist, all that there is is the text.
The alt text should work as a single sentence/paragraph that can be replaced for the image, convey the same content and still make sense in the context of the adjacent content.
If the image is something that is part of the GUI, then the alt text should convey an action (a verb), line upvote, answer this or log out.
You should visit your site with links and try to understand your site. If there is for example a pie chart, its alt text should be a small summary of the percentages. If you just have a pretty flower next to a blog post, don't give it an innane alt text like flower image companion of blogpost #324 or even worse flower.jpg.
If the image is important to the navigation or to get information, try to give it an alt text that makes the site work without the image. If the image is only presentational, give it an empty alt text.
title, as far as I know, should only displayed when hovered, so they should give extra information to the image, so useless duplication of information should be avoided. For screen readers, this is a bit trickier, as support and configuration can be very different between users.
Some empirical data shows title as useless:
Most users of screen reading software do not change their default settings to access the TITLE attribute information on links.
Most screen reading software can access TITLE attribute content on form controls by default.
Some screen reading software cannot access TITLE attribute information.
Users of screen magnifiers can read TITLE attribute text at lower magnification levels.
Users of screen magnifiers cannot read TITLE attribute text, that contains more than 1 or 2 words, at higher magnification levels.
Here's good piece of advice, better put than I could
Use this to provide additional information that is not essential. Most visual browsers display title text as a tool tip when the element is hovered over, however it is up to the browser manufacturer to decide how the title text is rendered. Some will display the text in the status bar instead. Early versions of Safari did this, for instance.
One good use of the title attribute is to add descriptive text to links, especially if the link text itself doesn’t clearly describe the link’s destination. This way you can help visitors know where the link will take them, possible saving them from loading a page only to find out it wasn’t anything they’re interested in. Another potential use is to provide additional information for an image, like maybe a date or other information that is likely not essential.
Remember that the longdesc attribute is supposed to be a link to further information, not text as some people missuse it.
I think the best practise is to put same content in alt and title attributes.
Regarding 'what to write' - just simple, in few words what is on the picture.
Check this article where alt attributes are described pretty well: http://www.cs.tut.fi/~jkorpela/html/alt.html