اصول SEO JavaScript را درک کنید

جاوا اسکریپت بخش مهمی از پلتفرم وب است زیرا ویژگی‌های زیادی را فراهم می‌کند وب را به یک پلت فرم برنامه قدرتمند تبدیل کنید. ساخت برنامه های کاربردی تحت وب مبتنی بر جاوا اسکریپت قابل کشف از طریق جستجوی Google می تواند به شما کمک کند تا کاربران جدید را بیابید و کاربران فعلی را دوباره جذب کنید محتوایی را که برنامه وب شما ارائه می دهد جستجو کنید. در حالی که جستجوی گوگل جاوا اسکریپت را با یک اجرا می کند نسخه همیشه سبز Chromium، چند چیز وجود دارد که می توانید آنها را بهینه کنید.

این راهنما نحوه پردازش جاوا اسکریپت و بهترین روش‌های بهبود جستجوی Google را شرح می‌دهد برنامه های وب جاوا اسکریپت برای جستجوی گوگل.

این منبع ممکن است در منطقه شما در دسترس نباشد.

چگونه گوگل جاوا اسکریپت را پردازش می کند

گوگل برنامه های وب جاوا اسکریپت را در سه مرحله پردازش می کند:

خزیدن
تفسیر
نمایه سازی

Googlebot صفحات را هم برای خزیدن و هم برای رندر صف می‌کشد. زمانی که الف صفحه منتظر خزیدن است و زمانی که منتظر رندر است.

وقتی Googlebot با درخواست HTTP URL را از صف خزنده واکشی می کند، ابتدا بررسی می کند. اگر اجازه خزیدن بدهید Googlebot را می خواند فایل robots.txt. اگر این URL را به عنوان غیرمجاز علامت‌گذاری می‌کند، سپس Googlebot از درخواست HTTP برای این URL صرف نظر می‌کند و URL را رد می‌کند.

سپس Googlebot پاسخ سایر URL ها را در ویژگی href پیوندهای HTML تجزیه می کند. و URL ها را به صف خزیدن اضافه می کند. برای جلوگیری از کشف لینک، از nofollow مکانیسم.

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

Googlebot تمام صفحات را برای رندر در صف قرار می دهد، مگر اینکه a robots metaبرچسب یا سربرگ به گوگل می گوید صفحه را ایندکس نکند. صفحه ممکن است برای چند ثانیه در این صف بماند، اما ممکن است بیشتر از آن طول بکشد. هنگامی که منابع Google اجازه می دهد، یک Chromium بدون سر ارائه می شود صفحه و جاوا اسکریپت را اجرا می کند. Googlebot HTML رندر شده را دوباره برای پیوندها و صف‌ها تجزیه می‌کند URL هایی که برای خزیدن پیدا می کند. گوگل همچنین از HTML رندر شده برای ایندکس کردن صفحه استفاده می کند.

به خاطر داشته باشید که در سمت سرور یا پیش رندر هنوز یک ایده عالی است زیرا وب سایت شما را برای آن سریعتر می کند کاربران و خزنده ها و همه ربات ها نمی توانند جاوا اسکریپت را اجرا کنند.

صفحه خود را با عناوین و تکه‌های منحصربفرد توصیف کنید

عناصر منحصر به فرد، توصیفی <title> و توضیحات متا مفید کمک می کنند کاربران به سرعت بهترین نتیجه را برای هدف خود شناسایی کنند و ما توضیح می دهیم که چه چیزی باعث می شود عنصر <title> خوب و توضیحات متا در دستورالعمل های ما.

می توانید از جاوا اسکریپت برای تنظیم یا تغییر توضیحات متا و همچنین عنصر <title> استفاده کنید.

جستجوی Google ممکن است پیوند عنوان متفاوتی را بر اساس درخواست کاربر نشان دهد. این زمانی اتفاق می‌افتد که عنوان یا توضیحات ارتباط کمی با محتوای صفحه داشته باشد یا چه زمانی ما جایگزین هایی را در صفحه پیدا کردیم که بهتر با عبارت جستجو مطابقت دارند. بیشتر بدانید در باره چرا عنوان نتیجه جستجو ممکن است با عنصر <title> صفحه متفاوت باشد.

کد سازگار بنویسید

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

توصیه می کنیم از سرویس دهی دیفرانسیل و پلی فیل ها استفاده کنید اگر یک API مرورگر گم شده را که نیاز دارید شناسایی کنید. از آنجایی که برخی از ویژگی های مرورگر نمی توانند باشند polyfilled، توصیه می کنیم اسناد polyfill را برای محدودیت های احتمالی بررسی کنید.

از کدهای وضعیت HTTP معنی دار استفاده کنید

Googlebot از کدهای وضعیت HTTP استفاده می کند برای اینکه بفهمید هنگام خزیدن صفحه مشکلی پیش آمده است یا خیر.

برای اینکه به Googlebot بگویید که آیا یک صفحه قابل خزیدن یا فهرست بندی نیست، از یک کد وضعیت معنی دار استفاده کنید. 404 برای صفحه ای که یافت نشد یا 401 کد برای صفحات پشت لاگین. می‌توانید از کدهای وضعیت HTTP برای اطلاع دادن به Googlebot استفاده کنید که آیا صفحه‌ای به یک URL جدید منتقل شده است، بنابراین که شاخص می تواند بر این اساس به روز شود.

اینجا لیستی از کدهای وضعیت HTTP است و نحوه تأثیر آنها در جستجوی Google.

جلوگیری از خطاهای `soft 404` در برنامه های تک صفحه ای

در برنامه‌های تک صفحه‌ای رندر شده از سمت کلاینت، مسیریابی اغلب به عنوان مسیریابی سمت کلاینت اجرا می‌شود. در این مورد، استفاده از کدهای وضعیت HTTP معنی دار می تواند غیرممکن یا غیرعملی باشد. برای جلوگیری از soft 404 خطا هنگامی که با استفاده از رندر و مسیریابی سمت مشتری، از یکی از استراتژی های زیر استفاده کنید:

از جاوا اسکریپت تغییر مسیر به URL استفاده کنید که سرور با 404 کد وضعیت HTTP ( برای مثال /not-found).
یک <meta name="robots" content="noindex"> را با استفاده از جاوا اسکریپت به صفحات خطا اضافه کنید.

در اینجا کد نمونه برای رویکرد تغییر مسیر آمده است:

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    window.location.href = '/not-found'; // redirect to 404 page on the server.
  }
})

در اینجا کد نمونه برای رویکرد برچسب noindex آمده است:

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other robots meta tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

از History API به جای قطعات استفاده کنید

گوگل فقط در صورتی می تواند لینک شما را بخزد <a> عنصر HTML با ویژگی href.

برای برنامه های تک صفحه ای با مسیریابی سمت سرویس گیرنده، از History API استفاده کنید برای پیاده سازی مسیریابی بین نماهای مختلف برنامه وب خود. برای اطمینان از اینکه Googlebot می تواند URL های خود را تجزیه و استخراج کنید، از استفاده از قطعات برای بارگذاری محتوای صفحه های مختلف خودداری کنید. مثال زیر یک روش بد است، زیرا Googlebot نمی تواند به طور قابل اعتماد URL ها را حل کند:

<nav>
  <ul>
    <li><a href="#/products">Our products</a></li>
    <li><a href="#/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="#/products">our products</a> and <a href="#/services">our services</p>
</div>
<script>
window.addEventListener('hashchange', function goToPage() {
  // this function loads different content based on the current URL fragment
  const pageToLoad = window.location.hash.slice(1); // URL fragment
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
});
</script>

درعوض، می‌توانید با پیاده‌سازی History API مطمئن شوید که URL‌های شما برای Googlebot قابل دسترسی است:

<nav>
  <ul>
    <li><a href="/products">Our products</a></li>
    <li><a href="/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="/products">our products</a> and <a href="/services">our services</p>
</div>
<script>
function goToPage(event) {
  event.preventDefault(); // stop the browser from navigating to the destination URL.
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1); // remove the leading slash
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl) // Update URL as well as browser history.
}

// Enable client-side routing for all links on the page
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));

</script>

برچسب پیوند `rel="canonical"` را به درستی تزریق کنید

در حالی که ما استفاده از جاوا اسکریپت را برای این کار توصیه نمی کنیم، می توان rel="canonical" برچسب پیوند را با جاوا اسکریپت تزریق کرد. جستجوی Google هنگام رندر کردن صفحه، URL متعارف تزریق شده را دریافت می کند. در اینجا مثالی برای تزریق برچسب پیوند rel="canonical" با جاوا اسکریپت آورده شده است:

fetch('/api/cats/' + id)
  .then(function (response) { return response.json(); })
  .then(function (cat) {
    // creates a canonical link tag and dynamically builds the URL
    // e.g. https://example.com/cats/simba
    const linkTag = document.createElement('link');
    linkTag.setAttribute('rel', 'canonical');
    linkTag.href = 'https://example.com/cats/' + cat.urlFriendlyName;
    document.head.appendChild(linkTag);
  });

هنگام استفاده از جاوا اسکریپت برای تزریق برچسب پیوند rel="canonical"، مطمئن شوید که این تنها برچسب پیوند rel="canonical" در صفحه است. پیاده‌سازی‌های نادرست ممکن است چندین برچسب پیوند rel="canonical" ایجاد کنند یا یک برچسب پیوند rel="canonical" موجود را تغییر دهند. تگ های پیوند متناقض یا متعدد rel="canonical" ممکن است منجر به نتایج غیرمنتظره شود.

استفاده کنیدrobots `meta`با دقت تگ کنید

می‌توانید از ایندکس کردن یک صفحه یا دنبال کردن پیوندها توسط گوگل جلوگیری کنیدrobots metaتگ . به عنوان مثال، افزودن تگ meta زیر به بالای صفحه خود، Google را از ایندکس کردن مسدود می کند. صفحه:

<!-- Google won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

می توانید از جاوا اسکریپت برای اضافه کردن یک استفاده کنیدrobots metaبه یک صفحه برچسب بزنید یا محتوای آن را تغییر دهید. کد مثال زیر نشان می دهد نحوه تغییرrobots metaبا جاوا اسکریپت تگ کنید تا از ایندکس شدن صفحه فعلی جلوگیری کنید تماس API محتوا را بر نمی گرداند.

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Google to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });

وقتی Google با noindex در روبرو می شودrobots metaقبل از اجرای جاوا اسکریپت تگ کنید، صفحه را رندر یا نمایه نمی کند.

اگر Google با تگ noindex مواجه شود، از اجرای رندر و جاوا اسکریپت صرف نظر می کند. از آنجایی که گوگل در این مورد از جاوا اسکریپت شما صرف نظر می کند، هیچ شانسی برای حذف تگ از آن وجود ندارد صفحه.
استفاده از جاوا اسکریپت برای تغییر یا حذف robots metaبرچسب ممکن است همانطور که انتظار می رود کار نکند. گوگل رندر و اجرای جاوا اسکریپت را در صورتی کهrobots metaتگ در ابتدا حاوی noindex است. اگر این احتمال وجود دارد که انجام دهید می خواهید صفحه ایندکس شود، از برچسب noindex استفاده نکنید در کد اصلی صفحه

از حافظه پنهان طولانی مدت استفاده کنید

Googlebot به منظور کاهش، به طور تهاجمی ذخیره می کند درخواست های شبکه و استفاده از منابع WRS ممکن است هدرهای ذخیره را نادیده بگیرد. این ممکن است منجر به استفاده از WRS شود منابع جاوا اسکریپت یا CSS قدیمی. انگشت نگاری محتوا با ایجاد یک از این مشکل جلوگیری می کند اثر انگشت قسمت محتوای نام فایل، مانند main.2bb85551.js. اثر انگشت به محتوای فایل بستگی دارد، بنابراین به‌روزرسانی‌ها نام فایل متفاوتی ایجاد می‌کنند هر زمان. برای کسب اطلاعات بیشتر، راهنمای web.dev در مورد استراتژی های ذخیره سازی طولانی مدت را بررسی کنید.

از داده های ساخت یافته استفاده کنید

هنگام استفاده از داده های ساختاریافته در صفحات خود، می توانید از جاوا اسکریپت استفاده کنید JSON-LD مورد نیاز را تولید کرده و به صفحه تزریق کنید. حتماً اجرای خود را آزمایش کنید برای جلوگیری از مشکلات.

بهترین شیوه ها را برای اجزای وب دنبال کنید

گوگل از اجزای وب پشتیبانی می کند. وقتی Google صفحه‌ای را رندر می‌کند، محتوای DOM سایه و DOM روشن را صاف می‌کند. این بدان معناست که Google فقط می‌تواند محتوایی را ببیند که در HTML ارائه‌شده قابل مشاهده است. برای اطمینان از اینکه Google همچنان می‌تواند محتوای شما را پس از ارائه آن ببیند، از آزمون نتایج غنی یا ابزار بازرسی URL استفاده کنید و به HTML رندر شده نگاه کنید.

اگر محتوا در HTML ارائه شده قابل مشاهده نباشد، Google نمی تواند آن را فهرست کند.

مثال زیر یک کامپوننت وب ایجاد می کند که محتوای DOM روشن خود را در DOM سایه خود نمایش می دهد. یک راه برای اطمینان از اینکه محتوای DOM روشن و DOM سایه در HTML ارائه شده نمایش داده می شود، استفاده از عنصر Slot است.

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
      let p = document.createElement('p');
      p.innerHTML = 'Hello World, this is shadow DOM content. Here comes the light DOM: <slot></slot>';
      this.shadowRoot.appendChild(p);
    }
  }

  window.customElements.define('my-component', MyComponent);
</script>

<my-component>
  <p>This is light DOM content. It's projected into the shadow DOM.</p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>

پس از رندر، گوگل می تواند این محتوا را فهرست کند:

<my-component>
  Hello World, this is shadow DOM content. Here comes the light DOM:
  <p>This is light DOM content. It's projected into the shadow DOM<p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>

تصاویر و محتوای تنبل بارگذاری شده را برطرف کنید

تصاویر می توانند از نظر پهنای باند و عملکرد بسیار پرهزینه باشند. یک استراتژی خوب استفاده از بارگذاری تنبل است برای بارگیری تصاویر فقط زمانی که کاربر می خواهد آنها را ببیند. برای اینکه مطمئن شوید که بارگذاری تنبل را اجرا می کنید به روشی جستجو پسند، دنبال کنید دستورالعمل های بارگذاری تنبل ما.

طراحی برای دسترسی

صفحاتی را برای کاربران ایجاد کنید، نه فقط برای موتورهای جستجو. وقتی در حال طراحی سایت خود هستید، به این موضوع فکر کنید نیازهای کاربران شما، از جمله کسانی که ممکن است از مرورگری با قابلیت جاوا اسکریپت استفاده نکنند (به عنوان مثال، افرادی که از صفحه خوان یا دستگاه های تلفن همراه کمتر پیشرفته استفاده می کنند). یکی از ساده ترین راه برای آزمایش دسترسی به سایت، پیش نمایش آن در مرورگر است جاوا اسکریپت خاموش است یا برای مشاهده آن در یک مرورگر متنی مانند Lynx. مشاهده یک سایت به عنوان فقط متن می‌تواند به شما کمک کند محتوای دیگری را شناسایی کنید که دیدن آنها برای Google دشوار است، مانند متن جاسازی شده در تصاویر.