{"id":16589,"date":"2026-09-02T11:39:07","date_gmt":"2026-09-02T08:39:07","guid":{"rendered":"http:\/\/localhost:8080\/google-bilgi-bankasi\/images-best-practices\/"},"modified":"2026-09-05T02:44:10","modified_gmt":"2026-09-04T23:44:10","slug":"images-best-practices","status":"publish","type":"ar_kb","link":"https:\/\/alienroad.com\/google-bilgi-bankasi\/images-best-practices\/","title":{"rendered":"Google image SEO best practices"},"content":{"rendered":"

\n Google provides several Search features and products that help users visually discover information
\n on the web, such as the
\n text result images<\/a>,
\n Google Discover,
\n and Google Images. While each feature and product looks different, the general recommendations
\n for getting images to appear in them is the same.\n<\/p>\n

\"An<\/p>\n

\n You can optimize your images to appear in Google’s search results by following these best
\n practices:\n<\/p>\n

    \n
  1. Help us discover and index your images<\/a><\/li>\n
  2. Optimize the image landing pages<\/a><\/li>\n<\/ol>\n

    Help us discover and index your images<\/h2>\n
    \n<\/div>\n

    \n The technical requirements<\/a> for getting your
    \n content in Google’s search results applies to images too. Since images are a substantially
    \n different format compared to HTML, it means there are additional requirements for getting images
    \n indexed; for example, finding the images on your site is different, and the presentation of the
    \n images also influences whether an image is indexed at all, and for the right keywords.\n<\/p>\n

    Use HTML image elements to embed images<\/h3>\n

    \n Using standard HTML image elements helps crawlers find and process images. Google can find images
    \n in src<\/code> attribute of <img><\/code> element (even when it’s a child of other elements,
    \n such as the <picture><\/code> element). Google doesn’t index CSS images.\n<\/p>\n

    \n <\/span>Good:<\/b>\n<\/p>\n

    \n <img src=”puppy.jpg” alt=”<\/span>A golden retriever puppy” \/><\/span>\n<\/p><\/blockquote>\n

    \n <\/span>Bad:<\/b>\n<\/p>\n

    \n <div style=”background-image:url(puppy.jpg)”><\/span>A golden retriever puppy<\/div><\/span>\n<\/p><\/blockquote>\n

    Use an image sitemap<\/h3>\n

    \n You can provide the URL of images we might not have otherwise discovered by
    \n     submitting an image sitemap<\/a>.\n<\/p>\n

    \n Unlike regular sitemaps, you can include URLs from other domains in the
    \n <image:loc><\/code> elements of the image sitemaps. This lets you use CDNs (content
    \n delivery networks) to host images. If you’re using a CDN, we encourage you to
    \n     verify ownership<\/a>
    \n of the CDN’s domain name in Search Console so that we can inform you of any crawl errors that we
    \n may find.\n<\/p>\n

    Responsive images<\/h3>\n

    \n Designing responsive web pages leads to better user experience, since people can access them
    \n across a plethora of device types. Refer to our
    \n     guide to responsive images<\/a>
    \n to learn about the best practices for handling images on your website.\n<\/p>\n

    \n Web pages use the <picture><\/code> element or the srcset<\/code> attribute of an
    \n img<\/code> element to specify responsive images. However, some browsers and crawlers don’t
    \n understand these attributes. We recommend that you always specify a fallback URL using the
    \n src<\/code> attribute.\n<\/p>\n

    \n The srcset<\/code> attribute allows specifying different versions of the same image,
    \n specifically for different screen sizes. For example:\n<\/p>\n

    <\/div>\n

    \n The <picture><\/code> element is a container that is used to group different
    \n <source><\/code> versions of the same image. It offers a fallback approach so the
    \n browser can choose the right image depending on device capabilities, like pixel density and screen
    \n size. The picture<\/code> element also comes in handy for using new image formats with
    \n built-in graceful degradation for clients that may not yet support the new formats.\n<\/p>\n

    \n Per
    \n     section 4.8.1 of the HTML Standard<\/a>,
    \n make sure that you provide an img<\/code> element as a fallback with a src<\/code>
    \n attribute when using the picture<\/code> element using the following format:\n<\/p>\n

    <\/div>\n

    Use supported image formats<\/h3>\n

    \n Google Search supports images referenced in the src<\/code> attribute of img<\/code> in
    \n the following file formats:
    \n BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF. It’s also a good idea to have the
    \n extension of your filename match with the file type.\n<\/p>\n

    \n You can also inline images as Data URIs. Data URIs provide a way to include a file, such as an
    \n image, inline by setting the src<\/code> attribute of an img<\/code> element as a
    \n Base64-encoded string using the following format:\n<\/p>\n

    <\/div>\n

    \n While inlining images can reduce HTTP requests, carefully judge when to use them since it can
    \n considerably increase the size of the page. For more on this, refer to the
    \n     section on the advantage and disadvantages of inlining images on our web.dev page<\/a>.\n<\/p>\n

    Optimize for speed and quality<\/h3>\n
    \n<\/div>\n

    \n High-quality photos appeal to users more than blurry, unclear images. Also, sharp images are more
    \n appealing to users in the result thumbnail and can increase the likelihood of getting traffic from
    \n users. That said, images are often the largest contributor to overall page size, which can make
    \n pages slow and expensive to load. Make sure to apply the
    \n     latest image optimization<\/a>
    \n and     responsive image techniques<\/a>
    \n to provide a high quality and fast user experience.\n<\/p>\n

    \n Analyze your site speed with
    \n     PageSpeed Insights<\/a>
    \n and visit our
    \n     Why does speed matter?<\/a>
    \n to learn about best practices and techniques to improve website performance.\n<\/p>\n

    Optimize the image landing pages<\/h2>\n

    \n While not immediately obvious, the content and metadata of the pages where an image is embedded
    \n can have a great influence on how and where the image may appear in Google’s search results.\n<\/p>\n

    Specify a preferred image with metadata<\/h3>\n

    \n Google’s selection of an image preview is completely automated and takes into account a number
    \n of different sources to select which image on a given page is shown on Google (for example, a
    \n     text result image<\/a>
    \n or the preview image in Discover).\n<\/p>\n

    \n You can influence which image gets selected by providing your preferred image through one of the
    \n following metadata sources:\n<\/p>\n