Image Captions and SEO
<caption> tag is one of the elements used to construct tables in HTML. And since most of the websites are built using tables – while we should use tables for tabular data only, just like an Excel file – you should at least try to improve your document’s semantics and help search engines better understand what a given document is all about. The <caption> tag can help you with that.
There are many ways you can make your tables more accessible and search engine friendly, but the easiest is to use table tags that are already a part of the HTML specification. And <caption> is one of them. The good part is that you can use this tag to give both users AND search engines, more information about the content of your tables.
Definition and usage
The <caption> tag must be inserted immediately after the <table> tag. You can specify only one caption per table. Usually the caption will be centered above the table, but that can be altered using CSS.
<table style=”width: 400px; border: 1px solid #000;”>
<caption>Table 1.1: A record of the revenue generated with organic traffic</caption>
You can’t include paragraphs within the caption element, but you can add quotations, anchors, and most text tags.
What designers should know
- You can alter the caption tag to display the caption above, below or on the sides of the tables to make the citations more visually appealing
- The tag should be implemented using simple html text, no graphics, since it gets crawled and indexed by search engines
- don’t confuse the <caption> tag with image captions
What SEO professionals should know
- You shouldn’t use heading tags to describe what’s in a table. Use <caption> instead
- Use pure text to explain users what the structured table is about; sometimes this mean using as much as 50 words
- search engines, and Googlebot for instance, would probably prefer HTML 3 (right, the older the better for search engines) because tables actually offer them more scope for markup than divs, so it’s preferably to use this tag rather than divs and CSS classes
What programmers should know
- you should take care to provide additional information summarizing the purpose and structure of the table using the summary attribute of the TABLE element. This is especially important for tables without captions. Examples below illustrate the use of the summary attribute (source)
- try to use this tag along with correct elements for constructing tables
What copywriters should know
- make sure you include the targeted keywords in your caption, without abusing – one occurrence is more than enough