نحوه استفاده از هوش مصنوعی برای بهینه سازی سئوی تصاویر در مقالات

Summarize this content to 400 words in Persian Lang
چرا باید بهینه سازی کنیم alt از تصاویر وب سایت؟

گوگل به وضوح بیان کرده است که یک خوب است alt در برچسب می تواند سئو را بهبود بخشد و برخی از سایت های جستجوی دیگر (مانند بینگ) برای آن وزن تعیین می کنند alt از .

افزودن کیفیت خوب alt محتوا به تصاویر نه تنها می تواند دسترسی به صفحات وب را بهبود بخشد، بلکه تأثیر مثبتی بر بهینه سازی موتورهای جستجو (SEO) دارد. بعد از اینکه کامل کردم alt بهینه سازی تصویر، مقالات زیادی در مورد بینگ در عرض سه روز گنجانده شد.

این نمایش اثر یکی از صفحات وب من است.

نحوه تماس با هوش مصنوعی برای تکمیل alt بهینه سازی تصاویر

اکنون هوش مصنوعی عملکرد شناسایی تصاویر را فراهم می کند. ما باید API هوش مصنوعی را فراخوانی کنیم تا پیوند تصویر و متن اطراف تصویر را بفرستیم، به هوش مصنوعی بگوییم قوانین ایجاد کند و هوش مصنوعی بتواند محتوای تصویر را خروجی دهد.

چرا برای تولید با هوش مصنوعی تماس بگیرید alt برای تصاویر؟

شاید تصاویر وب سایت در ابتدا تنظیمات alt نداشتند و بهینه سازی تصاویر تعداد زیادی مقاله بسیار پر زحمت است. و برای مقالات جدید، می توان با تولید آنها از طریق هوش مصنوعی، حجم کار را کاهش داد.

این مقاله عمدتاً نحوه تولید خودکار را معرفی می کند alt برای تصاویر با اتصال به هوش مصنوعی و تکمیل تولید خودکار alt برای تصاویر در تعداد زیادی از مقالات سهام. و برای کاهش حجم کار، به طور خودکار alt را در مقالات جدید تولید کنید.

فرض مراحل عملیاتی شرح داده شده در این مقاله این است که توسعه دهنده از علامت گذاری برای تکمیل مقاله استفاده می کند و علامت گذاری را به HTML تبدیل می کند و آن را در CMS ذخیره می کند.

مراحل کلی

در اینجا فرض بر این است که مقاله به صورت markdown نوشته شده و برای نمایش به HTML تبدیل شده است. البته اگر از این روش استفاده نکنید، راه حل ممکن است ساده تر باشد و مراحل اصلی تغییر نکرده باشد.

تعویض دسته ای از alt تصاویر از طریق هوش مصنوعی به مراحل زیر تقسیم می شوند:

مطابقت دادن : علامت گذاری را به HTML تبدیل کنید، همه را مطابقت دهید برچسب ها از طریق تطبیق منظم برای رشته های HTML
alt موجود را بررسی کنید: بررسی کنید که آیا alt در تگ img وجود دارد و اینکه آیا alt مطابقت دارد یا خیر. که مطابق با مقررات باشد نیازی به تولید نیست. قوانین تأیید به شرح زیر است (گوگل توصیه می کند):
اینکه آیا تعداد کاراکترهای جایگزین بین 20 تا 125 باشد (گوگل بیش از 125 کاراکتر را توصیه نمی کند)
آیا alt دارای کاراکترهای خاصی است، مانند: @$%^*&، و غیره (به طور کلی، کاراکترهای خاص در alt معنای خاصی ندارند)
اینکه آیا alt به غیر انگلیسی نوشته شده است (alt معمولاً به زبان انگلیسی نوشته می شود تا اطمینان حاصل شود که خزنده های سایت های جستجوی مختلف می توانند آن را تشخیص دهند)
Alt در جملات با کلمات کلیدی توضیح داده می شود (به عنوان مثال، توضیحات نوع xxx-xxx-xxx با قوانین مطابقت ندارد)
رهگیری زمینه تصویر: محتوای پاراگراف را قبل از جریان قطع کنید تگ و پاراگراف بعد از 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 تولید شده توسط هوش مصنوعی: alt تولید شده توسط هوش مصنوعی را مطابق قوانین تنظیم شده در مرحله دوم تأیید کنید (گاهی اوقات هوش مصنوعی مزخرف می‌گوید)، و در صورت عدم موفقیت آن را دوباره تولید کنید.
بررسی دستی: در صورت عدم برآورده کردن انتظارات (معمولاً به ندرت) همه تصاویر موجود در مقاله فعلی را به صورت دستی تغییر دهید.

نمودار کلی گام:

اجرای دقیق

در این بخش اجرای دقیق 6 مرحله فوق از جمله پیاده سازی برخی از کدهای منبع معرفی می شود.

مطابقت دهید برچسب زدن

از آنجایی که مقاله را در markdown نوشتم، آن را به HTML تبدیل کردم و سپس HTML را به عنوان یک رشته پردازش کردم. شاید راه بهتری برای نوشتن مقاله داشته باشید. این مرحله فقط نیاز به دریافت src تصویر و موجود دارد alt.

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

// Find src and existing alt in the above img_matches
const srcMatch = str.match(/src=”https://dev.to/mpoiiii/([^”https://dev.to/mpoiiii/]*)”/);
const altMatch = str.match(/alt=”https://dev.to/mpoiiii/([^”https://dev.to/mpoiiii/]*)”/);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

قوانین اعتبار سنجی Alt را تنظیم کنید

اینجا، تنظیم کنید alt قوانین اعتبارسنجی برای بررسی اینکه آیا Alt موجود قبل از تولید AI و alt ایجاد شده توسط AI با قوانین مطابقت دارند یا خیر. این امر برای جلوگیری از تولید برخی مواردی که انتظارات را برآورده نمی کند، توسط هوش مصنوعی انجام می شود.

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
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زمینه تصویر را ثبت کنید

برای گرفتن متن تصویر، باید مشخص کنید که آیا تصویر یک بنر است یا خیر. اگر مقاله با یک تصویر شروع می شود، این تصویر به عنوان یک بنر تنظیم می شود و آن را دارد alt به عنوان عنوان مقاله تعیین شده است.

در غیر این صورت، مطابقت مطالب قبلی را کامل کنید tag of the image and the content of the next 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) === “https://dev.to/mpoiiii/”https://dev.to/mpoiiii/){
startIndex = i
break
}
}
const pre_context = htmlStr.substring(startIndex + 3, endIndex – 3);

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای تولید با هوش مصنوعی تماس بگیرید alt

گزینه های مختلف هوش مصنوعی روش های استفاده متفاوتی برای API ها دارند. API تشخیص تصویر استفاده شده در این مقاله نمی تواند تصاویر را به صورت دسته ای تشخیص دهد و باید تک تک آپلود شود. من زمان دسترسی را به تاخیر انداختم تا از ممنوعیت جلوگیری کنم.

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 ”
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تایید و بررسی دستی

در مرحله بعد، باید دوباره تأیید کنید alt تولید شده توسط هوش مصنوعی اگر الزامات را برآورده نمی کند، مجدداً از AI برای ایجاد alt درخواست کنید.

این مرحله به این دلیل است که بسیاری از عملکردهای تشخیص تصویر ارائه شده توسط هوش مصنوعی برای تصاویر پیچیده نوسان می کنند و هوش مصنوعی ممکن است نتایجی را ایجاد کند که انتظارات را برآورده نمی کند. در اینجا می توانید تأیید و بازسازی کنید.

در نهایت، می توان آن را به صورت دستی بررسی کرد.

تصویر alt در این وبلاگ توسط من از طریق هوش مصنوعی ایجاد شده است، می توانید اثر آن را ببینید.

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

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

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
}

// Directly traverse forward
let endIndex = match.index - 4
let startIndex = 0;
for (let i = endIndex; i >= 0; i--) {
  if (htmlStr.substring(i, i+3) === "https://dev.to/mpoiiii/"https://dev.to/mpoiiii/){
    startIndex = i
    break
  }
}
const pre_context = htmlStr.substring(startIndex + 3, endIndex - 3);

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

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 ''
}