Лучшие практики JavaScript

Как и любые другие приложения, приложения на JavaScript также должны быть хорошо написаны.

В противном случае позже мы столкнемся со всевозможными проблемами.

В этой статье мы рассмотрим некоторые передовые методы, которым следует следовать при написании кода JavaScript.

SEO

SEO заставляет наш веб-сайт появляться на более ранних страницах в результатах поиска.

Таким образом, мы получаем больший охват.

С веб-сайтами, насыщенными JavaScript, нам нужно больше работать над улучшением наших сайтов.

Google обрабатывает JavaScript с помощью сканера для индексации содержания страницы.

Он ожидает, пока страница отобразится, а затем индексирует отображаемый контент.

Это происходит, если страница разрешает сканирование.

Чтобы ускорить рендеринг, мы можем сделать это на стороне сервера или имитировать наш контент.

Чтобы сделать это легко, мы можем использовать для этого такие фреймворки, как Next или Nuxt.

Опишите нашу страницу уникальными заголовками и фрагментами

Мы должны добавить уникальные заголовки и фрагменты, чтобы их можно было легко идентифицировать.

Написать совместимый код

JavaScript предлагает множество API для разработчиков.

Мы должны убедиться, что они не являются устаревшими и совместимы с большинством браузеров, чтобы предотвратить проблемы, связанные с браузером.

Используйте значимые коды состояния HTTP

Google использует коды статуса HTTP, чтобы выяснить, не ошиблись ли некоторые при сканировании страницы.

Мы должны использовать смысловые страт-коды, чтобы указать Google, следует ли сканировать страницу или нет.

Общие включают 404 для не найденного и 401 или 403 для отказа в доступе.

301 или 302 - это ответы перенаправления.

Ошибки серии 500 - это ошибки на стороне сервера.

Избегайте программных ошибок 404 в одностраничных приложениях

Мы должны перенаправить на ненайденную страницу, когда возникает ошибка 404 при выполнении HTTP-запросов.

Или мы должны добавить <meta name=”robots” content=”noindex”> на страницы с ошибками с помощью JavaScript.

Таким образом, Google знает, что это страница 404.

Подход редиректа можно записать следующим образом:

fetch(`/api/items/${itemId}`)
.then(response => response.json())
.then(item => {
  if (items.exists) {
    showItem(item); 
  } else {
    window.location.href = '/not-found';
  }
})

Мы перенаправляем на not found, когда элемент не существует.

В качестве альтернативы, чтобы создать метаэлемент, мы можем сделать это с помощью JavaScript:

fetch(`/api/items/${itemId}`)
  .then(response => response.json())
  .then(item=> {
    if (item.exists) {
      showItem(item); 
    } else {
      const metaRobots = document.createElement('meta');
      metaRobots.name = 'robots';
      metaRobots.content = 'noindex';
      document.head.appendChild(metaRobots);
    }
  })

Мы создаем метаэлемент, если элемент не найден.

Используйте API истории вместо фрагментов

API истории позволяет нам переходить с его помощью на разные страницы.

Он реализует маршрутизацию между различными представлениями нашего веб-приложения.

Это гарантирует, что Google сможет найти ссылки.

Итак, вместо того, чтобы менять фрагменты для навигации, например:

<nav>
  <ul>
    <li><a href="#/home">home</a></li>
    <li><a href="#/profile">profile</a></li>
  </ul>
</nav>
<script>
window.addEventListener('hashchange', () => {
  const pageToLoad = window.location.hash.slice(1); 
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
});
</script>

Вместо этого мы используем APU истории, написав:

<nav>
  <ul>
    <li><a href="#/home">home</a></li>
    <li><a href="#/profile">profile</a></li>
  </ul>
</nav>
<script>
function goToPage(event) {
  event.preventDefault(); 
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1);
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl)
}
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));
</script>

Мы используем API истории во 2-м примере для навигации.

Мы вызываем preventDefault, чтобы предотвратить переход к href способу по умолчанию, чтобы мы могли перемещаться с помощью JavaScript.

Затем мы удаляем ведущую косую черту с помощью hrefUrl.slice(1);

Затем мы вызываем pushState для навигации с помощью API истории.

Таким образом, история сохраняется, и мы перемещаемся.

Заключение

Мы можем перемещаться с помощью API истории, чтобы обновлять историю браузера.

Кроме того, мы можем рассмотреть различные подходы к SEO в нашем клиентском веб-приложении.

Лучшие практики JavaScript - SEO

SEO