alt and title attributes in images and seo
TRANSCRIPT
![Page 1: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/1.jpg)
Exploring web attributes related
to image accessibility and their
impact on search engine indexing Reinaldo Ferraz – CEWEB.br
![Page 2: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/2.jpg)
Objective
• Facilitate the participation of Brazilian community in global Web development
enviroment
Mission
• Promote activities that encourage the use of open technologies and
standardized on the Web.
Web Technologies Study Center
![Page 3: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/3.jpg)
• Accessible images on the web
• ALT and TITLE attributes
• Search Engine Optimization
• The experiment
• Exploring the ALT attribute
• Exploring the TITLE attribute
• Conclusion
Summary
![Page 4: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/4.jpg)
• Images on the web needs alternative text, for screen readers users
Accessible images on the web
Picture of keyboard keys W, 3 and C
![Page 5: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/5.jpg)
• ALT attribute is used to show alternative content in images
• <img src=“pic.jpg" alt=“Picture of keyboard keys W, 3 and C">
• TITLE attribute is used to provide complementary information
• <img src=“pic.jpg" title=“Credits: John Lord">
ALT and TITLE attributes
![Page 6: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/6.jpg)
ALT and TITLE attributes
<img src="ULjpB0be_400x40.jpg" alt="Ceweb.br " title=“Web Technologies Study Center">
![Page 7: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/7.jpg)
• The technique of developing websites in a way that they are search-
engine friendly is called Search Engine Optimization (SEO).
• This technique consists of a group of technical strategies used to
increase the number of visitors to a website by obtaining a high-
ranking position in the search engine results page
• Search engine optimization is based on making small modifications
to parts of websites (including image descriptions).
Search Engine Optimization
![Page 8: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/8.jpg)
• Alternative texts are important for Web Accessibility but how this
texts are indexed by search engines on the Web?
• Three images were published in a post in my personal blog.
• Images were published without ALT/TITLE attribute declared. The
page was updated later with the attributes filled.
• The tests were made using Google, Bing, DuckDuckGo and Yahoo
search engine and the SEO verification tools Site Analyser,
WooHank and SEO Works
• The SEO verification tools were chosen at random and there was no
intention of promoting or recommending their use.
The experiment
![Page 9: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/9.jpg)
During the first phase of testing, three images were published on the blog http://www.reinaldoferraz.com.br, without ALT or TITLE attributes. <img src="http://www.reinaldoferraz.com.br/wp-content/uploads/2014/02/tr47ujhtt767.png"> <img src="http://www.reinaldoferraz.com.br/wp-content/uploads/2014/02/aswe98jdk93.png"> <img src="http://www.reinaldoferraz.com.br/wp-content/uploads/2014/02/yjjl9675yp.png">
Exploring ALT attribute
![Page 10: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/10.jpg)
The content was indexed by search engines.
Exploring ALT attribute
![Page 11: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/11.jpg)
The page was scanned by three automatic SEO checker tools.
Exploring ALT attribute
![Page 12: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/12.jpg)
Exploring ALT attribute
![Page 13: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/13.jpg)
Exploring ALT attribute
![Page 14: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/14.jpg)
Second part: The images had their ALT attributes properly declared (in portuguese). <img src="http://www.reinaldoferraz.com.br/wp-content/uploads/2014/02/tr47ujhtt767.png" alt="Foto de um pão francês em um prato branco" > <img src="http://www.reinaldoferraz.com.br/wp-content/uploads/2014/02/aswe98jdk93.png" alt="Foto de uma ampulheta" > <img src="http://www.reinaldoferraz.com.br/wp-content/uploads/2014/02/yjjl9675yp.png" alt="Foto de uma placa com o mapa do zoológico de São Paulo" >
Exploring ALT attribute
![Page 15: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/15.jpg)
The tests were repeated using the same tools as in the previous phase.
Exploring ALT attribute
![Page 16: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/16.jpg)
Repeating the tests using the same SEO tools
Exploring ALT attribute
![Page 17: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/17.jpg)
Exploring ALT attribute
![Page 18: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/18.jpg)
Exploring ALT attribute
![Page 19: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/19.jpg)
Exploring ALT attribute
![Page 20: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/20.jpg)
Exploring ALT attribute
![Page 21: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/21.jpg)
Exploring ALT attribute
![Page 22: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/22.jpg)
Exploring ALT attribute
![Page 23: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/23.jpg)
The second experiment verified how the content of the TITLE attribute affected search results and if it is important to web accessibility.
Exploring TITLE attribute
![Page 24: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/24.jpg)
Exploring TITLE attribute
![Page 25: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/25.jpg)
• TITLE attribute is not indexed by search engine
• TITLE attribute has no weight for SEO verification tools
• TITLE attribute tooltip is only available via mouseover
• TITLE attribute is not implemented in the same way in three different
screen readers:
• JAWS does not read TITLE by default. It is necessary to set
the screenreader to read ALT or TITLE attributes of the page
• NVDA reads the attribute but does not identify which is ALT or
TITLE content
• VoiceOver reads TITLE attribute after a few seconds of
silence after read the ALT attribute
Exploring TITLE attributes
![Page 26: ALT and TITLE attributes in images and SEO](https://reader031.vdocuments.mx/reader031/viewer/2022022202/587aaace1a28abed218b54a3/html5/thumbnails/26.jpg)
• The ALT attribute plays an important role in describing images on a
web page.
• ALT attribute content is indexed by Google Search Engine
• Only Google indexed the ALT attribute content: Yahoo, DuckDuckGo
and Bing did not show the attribute content in their search results.
• The TITLE attribute in images is not useful for SEO. The content in
images is not indexed.
• In terms of accessibility, the TITLE attribute is not keyboard-
accessible, and has not been implemented in a standardized
manner by screen readers.
Conclusions