Why should we optimize the alt of website images?

Google has clearly stated that a good alt in the <img> tag can improve SEO, and some other search sites (like bing) will set weights for the alt of <img>.

Adding good quality alt content to images can not only improve the accessibility of web pages, but also have a positive impact on search engine optimization (SEO). After I completed the alt optimization of the image, many articles on bing were included within three days.

This is a display of the effect of one of my web pages.

How to call AI to complete the alt optimization of images?

Now AI provides the function of identifying images. We need to call AI's API to pass in the link of the image and the text around the image, tell AI to generate rules, and AI can output the content of the image.

Why call AI to generate alt for images?

Maybe the images in the website did not have alt set at the beginning, and it is very laborious to optimize the images of a large number of articles. And for new articles, the workload can be reduced by generating them through AI.

This article mainly introduces how to automatically generate alt for images by connecting to AI, and complete the automatic generation of alt for images in a large number of stock articles. And automatically generate alt in new articles to reduce workload.

The premise of the operation steps described in this article is that the developer uses markdown to complete the article and converts the markdown into HTML and stores it in the CMS.

Overall steps

Here it is assumed that the article is written in markdown and converted to HTML for display. Of course, if you do not use this method, the solution may be simpler, and the core steps have not changed.

The batch replacement of alt of images through AI is divided into the following steps:

Match <img>: Convert markdown to HTML, match all <img> tags through regular matching for HTML strings
Check existing alt: Check whether alt exists in the img tag and whether alt is compliant. <img> that meets the regulations does not need to be generated. Verification rules are as follows (Google recommends):
Whether the number of alt characters is between 20 and 125 (Google recommends no more than 125)
Whether alt contains special characters, such as: @$%^*&, etc. (Generally speaking, special characters have no specific meaning in alt)
Whether alt is written in non-English (alt is generally written in English to ensure that crawlers of various search sites can recognize it)
Alt is described in sentences with keywords (for example, descriptions of the type xxx-xxx-xxx do not conform to the rules)
Intercept image context: Intercept the content of the paragraph before the current <img> tag and the paragraph after the <p> tag to help AI understand the role and content of the image.
Call AI image description API: Pass in the URL of the current alt image to be generated, give AI description generation rules (the same as verification rules), and pass the content intercepted in the third step to the API as context to help understanding.
Verify the alt generated by AI: Verify the alt generated by AI according to the rules set in the second step (sometimes AI will talk nonsense), and regenerate it if the verification fails.
Manual review: Alt of all pictures in the current article, manually modify if it does not meet expectations (generally rarely).

Overall step diagram:

Detailed implementation

This section will introduce the detailed implementation of the above 6 steps, including the implementation of some source code.

Match the `<img>` tag

Since I wrote the article in markdown, I converted it to HTML and then processed the HTML as a string. Maybe you have a better way to write an article. This step only needs to get the src of the image and the existing alt.

const imgTagRegex = /<img\b([^>]*)>/gi;
// Find all matches of <img> tags
const img_matches = [...str.matchAll(imgTagRegex)];

// Find src and existing alt in the above img_matches
const srcMatch = str.match(/src="([^"]*)"/);
const altMatch = str.match(/alt="([^"]*)"/);

Set Alt validation rules

Here, set alt validation rules to verify whether the existing Alt before AI generation and the alt generated by AI meet the rules. This is to prevent AI from sometimes generating something that does not meet expectations.

let flag = true
function checkeAlt(altStr) {
  // Check if Alt is written in English
  const regex = /[^\x00-\x7F]/;
  flag &= !regex.test(str);

  // Check Alt length
  flag &= oldAlt.length >= 20 && oldAlt.length <= 150

  // Check special characters
  const specialCharacter = `'@#$%^&*<>《》「》{}'`
  Array.from(specialCharacter).forEach(item => {
    flag &= !altStr.includes(item)
  })

  // Check if it is a description line statement
  flag &= altStr.split(` `).length > 1
}

Capture the context of the image

To capture the context of the image, you need to determine whether the image is a banner. If the article starts with an image, then this image is set as a banner, and its alt is set as the title of the article.

Otherwise, complete the matching of the content of the previous <p> tag of the image and the content of the next <p> tag

// Directly traverse forward
let endIndex = match.index - 4
let startIndex = 0;
for (let i = endIndex; i >= 0; i--) {
  if (htmlStr.substring(i, i+3) === '<p>'){
    startIndex = i
    break
  }
}
const pre_context = htmlStr.substring(startIndex + 3, endIndex - 3);

// The logic of traversal backward is the same
......

Call AI to generate `alt`

Different AI options have different usage methods for APIs. The image recognition API used in this article cannot recognize images in batches and needs to be uploaded one by one. I delayed the access time to prevent being banned.

try {
  await fetch(apiUrl, options)
  .then(response => response.json())
  .then(data => {
    resultData = data
  try {
    result = data.message
  } catch (e) {
    // There will be occasional call failures, just leave alt blank, set or call again when waiting for manual review
    console.error(e)
    result = ''
  }})
} catch (e) {
    console.error(e)
    // Set or call again when waiting for manual review
   return ''
}

Verification and manual review

Next, you need to re-verify the alt generated by AI. If it does not meet the requirements, re-request AI to generate alt.

This step is because many AI-provided image recognition functions will fluctuate for complex images, and AI may generate results that do not meet expectations. Here you can verify and regenerate.

Finally, it can be manually reviewed.

The image alt in this blog was generated by me through AI, you can see the effect.

How to Use AI to Optimize the SEO of Images in Articles