How to do image SEO on an article

Image SEO is how a picture on an article stays understandable when someone cannot see it, and how search engines learn what that picture is for. The piece that matters most is the alt text. A short filename, a caption, and reserved space on the page support it. A keyword pasted into every attribute does not.

What is image SEO?

Google’s image guidelines say the page around a picture is how Google understands it: nearby text, captions, and image titles. The filename can add a light clue. The alt attribute is the metadata they single out as most important, because it also serves people who use a screen reader or who never receive the file on a slow connection.

Ahrefs’ image-SEO guide is a list of delivery tips: formats, compression, caching, lazy loading, sitemaps, and a formula that starts “this is an image of.” Those delivery choices matter for a large photo library. They are a weak article checklist, because a blog picture usually exists to explain a paragraph, not to win an image-search result on its own. The formula also adds words a screen reader does not need. The reader already knows an image is an image.

Blog image optimization, on an article, is an editorial decision. Does this picture add something the sentences do not? If it does, name that something. If it does not, it is decoration, and decoration should be silent. The same standard sits in an SEO content brief: a figure is planned because the reader needs it, not because a template says every H2 gets a graphic.

Decide whether the image informs

An informative image changes what the reader knows. A diagram of a standup board shows the columns. A screenshot shows the control the steps mention. A chart, if you have real numbers, shows the comparison. These images need a text alternative that could replace them without changing the meaning of the page. That is the HTML rule, and it is the useful SEO rule as well.

A decorative image is a flourish: a divider, a background pattern, an icon that repeats a word already written beside it. It needs an alt attribute set to an empty string, alt="". Assistive technology can then skip it. Omitting the attribute is a different bug. With no attribute at all, some screen readers announce the filename, which is how a reader hears “IMG underscore 4402 dot jpg” in the middle of a procedure.

Featured image SEO follows the same split. If the featured image is a title card that repeats the H1, the alt text can be the article’s promise in a few words, or empty when the H1 already says it and the image adds no further information. If the featured image is a diagram the article depends on, describe the diagram. Do not paste the target query into the alt attribute because the file happens to be first.

How to write alt text

Write the alternative as if the image were deleted and this sentence had to do its job. Mention the detail the paragraph is using. On a page about a six-person standup, “standup board with six columns, one per person, and a done column on the right” is alt text. “Async standup best practices SEO” is a query wearing an attribute.

Google’s image documentation says to use keywords appropriately and in context, and to avoid filling the alt attribute with keywords. Stuffing is a spam pattern, and it is also a bad experience for the person who has to listen to it. Skip “image of” and “photo of.” Skip a second copy of the caption. If the caption already states the claim in full, the alt text can be the shorter label and the caption can carry the sentence. They should not be two keyword variants of each other.

Keep it long enough to be true and short enough to listen to. A complex figure that needs a paragraph of explanation belongs in the body, with a shorter alt text that points at the idea. The body is where an answer engine can quote you. The alt attribute is not a second article.

SEO image file names

Google says a filename gives a very light clue. my-new-black-kitten.jpg is their example of a better name than IMG00023.JPG. Generic names such as image1.jpg waste that clue. A descriptive filename is still a filename: short, lowercase, words separated by hyphens, no query stacked four times.

standup-board-six-people.svg is a descriptive filename. async-standup-seo-best-practices-template-guide.jpg is a slug pretending to be a file. If you localize the page, translate the filename too, and keep the URL encoding legal. If you publish thousands of images, generate the name from the caption you already wrote, then have a person glance at the ones that will be seen. Automation that copies the H1 onto every file in the article makes five pictures look like one subject.

The format can be a normal one browsers display: a raster photo as JPEG, PNG, or WebP, a diagram as SVG when the shapes and labels are real vectors. The format is a delivery choice. It does not replace the alt text. An image sitemap can list pictures for Google Images. It is optional. The HTML page, with the image next to the relevant sentence, is the version readers use. Listing a file in a sitemap does not describe it.

Captions and the title attribute

Google says it extracts subject matter from captions and image titles on the page. A caption is visible. Use one when the figure states a claim the reader should not have to infer: “One column per person. Done is on the right.” People read captions. They are a good place for the sentence you hope someone remembers.

The title attribute is a different field. Browsers may show it as a tooltip. It is easy to miss, and it is a poor place to hide a keyword. If you set it, make it a short label that matches the image, the way a figure title does. Do not paste the alt text, the filename, and the primary query into the title attribute as three extra chances. One honest label is enough.

For inline SVG, put a <title> and a <desc> in the file and point aria-labelledby at them, which is the pattern in Google’s own image documentation. When that SVG is also an img, the alt attribute is what the page exposes. Write both so they agree. A title inside the file that says one thing, and alt text that says another, is two stories about one picture.

Put the image next to the sentence it serves

Place the image beside the paragraph that needs it, on a page about that subject. A diagram of the standup board belongs in the procedure, under the steps, not in a gallery at the bottom and not on an unrelated marketing page because the file was handy. Nearby text is a relevance signal Google names directly. It is also how a person checks that the picture matches the claim.

Answer engines quote passages. A JPEG with the six steps typeset into the pixels is invisible to that extraction, and it is invisible to anyone who does not load images. Write the steps in the article. Let the diagram show the board. If you later refresh the article, change the sentence and the picture together so they do not disagree. A new caption on an old screenshot is how a procedure starts lying.

Do not build a page that is only images of text in order to catch image search. That page fails a reader, and it fails the helpful-content question about whether someone would need to search again to get the information. The article is the page. The images are part of its main content when they help the page do its job.

Width, height, and page speed

An image without width and height can shove the text down when it loads. That jump is layout shift. Set the attributes to the file’s real pixel size, and let CSS scale the display. The browser then reserves the box. Guidance on layout shift treats that reserved space as the basic fix. Google’s page-experience documentation includes Core Web Vitals, and a stable article is part of a page people can actually read.

• Featured image. This is often the largest picture and a candidate for the first paint. Give it width and height. Do not lazy-load the image that is the first thing in view.
• Images below the fold. loading="lazy" and decoding="async" keep them from competing with the text. They still need dimensions, or the lazy file shifts the page when it appears.
• File weight. A photo that is 4000 pixels wide, shown at 800, costs the reader bytes they cannot see. Export near the display size. You do not need a particular compression brand. You need a file that is not many times larger than the slot it fills.
• Text. The article’s words should be HTML, so they paint without waiting for a picture. A hero that contains the only H1 inside an image delays the title and hides it from extraction.

A Discover thumbnail is a different job from alt text. Google recommends a relevant image at least 1200 pixels wide, named in og:image or in schema, not the site logo. The Google Discover guide is that preview. The alt attribute still describes the picture for the article. The smartphone crawl is the indexed copy, so a separate mobile URL needs the same alt text and a real image, not a tiny stand-in. The mobile-first indexing guide is that parity. A responsive page already has one image.

Responsive images, with srcset when you truly have several sizes, let a phone skip the desktop file. Use them when the art direction or the byte savings are real. A single well-sized SVG diagram does not need a srcset. Adding three identical copies under different widths is ceremony.

An image SEO example

The standup procedure from the cluster example needs one figure: the board. Here is the set of decisions, and here is what you leave alone.

• File. standup-board-six-people.svg. The labels in the file are real text, not a flattened JPEG of words.
• Alt text. “Standup board with six columns, one per person, and a done column on the right.”
• Caption. “Each person gets a column. The done column is shared, so finished work is visible without a meeting.”
• Title attribute. “Six-person standup board.” A label, not a second keyword list.
• Size. Width 1200, height 640, displayed at the column width. Lazy-loaded because it sits under the steps, not in the first screen.
• Body. The six steps are already written above the figure. The figure does not introduce a seventh step that exists only in the picture.
• Decoration. A small goose icon in the template, beside the words “BloGoose,” gets alt="". The word is already there.

Nothing in that list repeats “async standup SEO” four times. The query can appear in the alt text only where it is the name of the object. Here the object is a board. The article’s title already carries the query for the page.

How this shows up when BloGoose makes the pictures

BloGoose can set a featured image from the article title and a section image from each heading, using your brand artwork. That solves the empty-slot problem. It does not decide whether the picture informs. A title card that repeats the H1 still needs the empty-or-short alt choice above. A diagram you add because the steps need a board still needs a filename, an alt text, a caption, and dimensions. Review those fields the way you review a sentence: would this still make sense if the image file never arrived?

The pipeline publishes the files with the article. The words around them are still the article. Image SEO is that pairing, checked before the URL goes live.

Questions about image SEO