Image SEO for Arabic sites: alt text, file names and formats

Arabic sites lean heavily on images: product photos in online shops, step shots in recipes, screenshots in tech tutorials. Yet many of those images reach Google as IMG_0001.jpg with no description at all. Google’s image documentation is clear that alt text is the most important attribute for giving an image extra meaning, and the rest of this guide builds on that.

The problem in plain words

An image that Google cannot find or understand cannot appear in Google Images, and it adds little context to the page around it. The usual causes on Arabic sites are simple: important images loaded as CSS backgrounds, empty alt attributes left by the theme, file names straight from the camera, and headlines baked into banner images instead of written as text. Each fix also helps readers on screen readers or slow connections.

What Google documents

• Use standard HTML images. “Using standard HTML image elements helps crawlers find and process images.”
• Write alt text. Google calls alt text “the most important attribute when it comes to providing more metadata for an image.”
• Do not stuff it. “Avoid filling alt attributes with keywords (also known as keyword stuffing) as it results in a negative user experience.”
• Name files sensibly. “When possible, use filenames that are short, but descriptive.”
• Pick a supported format. Google lists “BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF.”
• Use responsive markup. Pages “use the <picture> element or the srcset attribute of an img element to specify responsive images.”
• Use an image sitemap for hard-to-find images. Google says you can provide the URLs of images it might not otherwise discover by submitting an image sitemap.

One recent change: on 2 March 2026, Google’s documentation changelog recorded a new section on the Google Images page about specifying a preferred image with metadata. If your theme or plugin controls which image represents a page, read that section on the live page before you change anything.

Step by step

1. Move important images into img elements. Product photos, diagrams and step shots belong in <img> or <picture>. Keep CSS backgrounds for patterns and decoration.
2. Write Arabic alt text that describes the image. Describe what the image shows in the context of the page, in the page’s language. “دلة قهوة عربية نحاسية بجانب فنجانين على صينية” says far more than “قهوة قهوة عربية أفضل قهوة”.
3. Choose one file naming style. Arabic, transliterated or English names all work if they are short and descriptive; Google documents no preference among them. Pick one, write it into your editorial guide and stick with it. If you use Arabic names, remember they become percent encoded in URLs, just like Arabic slugs.
4. Compress and use modern formats. WebP and AVIF are both on Google’s supported list. Export a few of your real images in each format and keep whichever gives the lightest file at a quality your readers accept.
5. Serve responsive sizes. Let the browser pick a size that fits the screen with srcset and sizes, or use <picture> to offer AVIF with a fallback.
6. Place images near related text. Put the image next to the paragraph it illustrates, and add a caption in Arabic when it helps the reader.
7. Do not lazy-load the main image. web.dev’s research on lazy loading found that lazy-loading images in the initial viewport can delay Largest Contentful Paint. Load the first visible image eagerly and lazy-load the rest.
8. Submit an image sitemap if needed, for example when a JavaScript gallery loads images crawlers may miss.
9. Check in Search Console. Use URL Inspection to see a page as Google renders it, and watch the Performance report for the pages and queries that bring visitors.

Here is a sample that combines these points for an RTL article:

<figure>
  <picture>
    <source type="image/avif"
      srcset="/images/qahwa-arabiya-dallah-800.avif 800w, /images/qahwa-arabiya-dallah-1600.avif 1600w"
      sizes="(max-width: 800px) 100vw, 800px">
    <img src="/images/qahwa-arabiya-dallah-800.webp"
      srcset="/images/qahwa-arabiya-dallah-800.webp 800w, /images/qahwa-arabiya-dallah-1600.webp 1600w"
      sizes="(max-width: 800px) 100vw, 800px"
      width="800" height="533"
      alt="دلة قهوة عربية نحاسية بجانب فنجانين على صينية">
  </picture>
  <figcaption>تقديم القهوة العربية بالدلة التقليدية</figcaption>
</figure>

The width and height attributes are not an SEO rule. I add them because they let the browser reserve space and avoid layout shift, which we covered in our Core Web Vitals guide.

An Arabic site example

Picture an online shop in Jeddah that sells dates. Its starting point is common: every product photo named after the camera sequence, an alt attribute that repeats the shop name, and category banners with the Arabic headline drawn inside the image. The fix: files named in one transliterated style such as tamr-sukkari-box-1kg.webp, alt text describing each box in Arabic, and headlines moved into real HTML text over a plain background image.

What I like about this kind of cleanup is that nothing in it is speculative. Almost every step comes from Google’s documentation, and readers benefit whatever happens in search.

Checklist

Common mistakes

• Empty or keyword-stuffed alt attributes. Google says stuffing results in a negative user experience, and an empty alt tells Google nothing.
• Files named IMG0001.jpg. A missed chance for a short, descriptive name.
• Important images as CSS backgrounds. Crawlers find and process standard HTML images more easily.
• Lazy-loading the main above-the-fold image. It can slow down the largest element on the page.
• Text baked into images. An Arabic headline drawn inside a banner is not page text: readers cannot copy or search it, and it does nothing for the text of the page. Write it in HTML.

Sources

• Google Search Central, Google Images SEO best practices, consulted 27 March 2026, https://developers.google.com/search/docs/appearance/google-images
• Google Search Central, documentation updates changelog (entry dated 2 March 2026), consulted 27 March 2026, https://developers.google.com/search/updates
• web.dev, article on the effect of lazy loading on Largest Contentful Paint, consulted 27 March 2026, https://web.dev/articles/lcp-lazy-loading