Итоги недели в мире фронтенда и обзоры новых сервисов: 10 методов SEO-оптимизации JavaScript
🤖 10 методов SEO-оптимизации JavaScript, которые должен знать каждый фронтендер
Веб-приложения часто используют JavaScript для динамического создания контента и удобного взаимодействия с пользователем. Но поисковые роботы не всегда могут правильно прочитать и проиндексировать такой контент. В итоге сайт теряет посетителей. На помощь придут 10 способов SEO-оптимизации для JavaScript.
1. Серверный и статический рендеринг
Многие сайты активно используют JavaScript для загрузки и отображения контента. Однако поисковые системы (включая Google) не всегда могут корректно выполнить этот JavaScript-код. В результате страницы индексируются в неполном и/или искаженном виде, что очень негативно сказывается на SEO. Для решения этой проблемы необходимо использовать рендеринг на стороне сервера (SSR) или генерацию статических страниц.
SSR
При серверном рендеринге содержимое страницы формируется на сервере, а не в браузере пользователя. Клиент сразу получает готовую HTML-страницу, которая содержит все необходимое, включая контент и динамические элементы.
Плюсы:
- Страница загружается быстрее, так как браузер не ждет выполнения JavaScript.
- Поисковые системы видят полностью готовый контент.
- Подходит для страниц с динамическим контентом.
Генерация статических страниц
При этом подходе содержимое страницы формируется на этапе сборки, а затем сохраняется как статические HTML-файлы. Эти файлы загружаются при обращении к сайту.
Плюсы:
- Очень быстро работает, так как сервер просто отдает готовую HTML-страницу.
- Хорошо подходит для статичного контента, который редко меняется.
Пример: SSR с использованием Next.js
В этом примере сервер выполняет функцию getServerSideProps, запрашивает данные с API (https://api.example.com/data), добавляет их в HTML и отправляет клиенту уже полностью отрисованную страницу.
Привет!
Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире фронтенда. В еженедельных письмах ты найдешь:
- Современные JavaScript-фреймворки и библиотеки.
- HTML5 и CSS3: новые возможности и трюки.
- Оптимизация производительности веб-приложений.
- Тестирование и отладка кода.
- Лучшие практики UI/UX.
- Новые веб-стандарты и браузерные технологии.
- Тренды в веб-дизайне и интерфейсах.
- Прогрессивные веб-приложения (PWA).
2. Тег rel="canonical"
JavaScript-фреймворки могут создавать несколько версий одной и той же страницы. Это особенно часто происходит в случаях, когда URL-адреса различаются из-за параметров, фильтров или состояния навигации пользователя. В результате поисковые системы могут воспринимать такие страницы как дубликаты, что приводит к «размыванию» сигналов ранжирования (несколько версий одной страницы будут конкурировать друг с другом в результатах поиска).
Для решения этой проблемы используется тег rel="canonical", который указывает предпочтительную (каноническую) версию страницы. Добавление этого тега позволяет:
- Объединить все дублирующие URL-адреса в одну авторитетную страницу.
- Избежать разделения сигналов ранжирования между дублированными страницами.
- Сохранить эффективность обратных ссылок, которые могут терять ценность из-за ложных сигналов о дубликатах.
3. Корректная маршрутизация
Маршрутизация на стороне клиента, например, с React Router, удобна для создания динамических SPA-приложений. Однако неправильная реализация может привести к проблемам с индексацией. Чтобы этого избежать:
- Обеспечьте доступность контента через внутренние ссылки. Используйте элементы <Link> вместо <a> для внутренних переходов. Это помогает поисковым системам правильно интерпретировать и индексировать страницы.
- Обновляйте URL без перезагрузки всей страницы. Используйте метод history.pushState() для изменения URL, чтобы приложение оставалось динамичным, а пользовательский опыт был плавным.
🤖 Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека дата-сайентиста»
4. Правильная реализация отложенной загрузки
Отложенная (ленивая) загрузка позволяет улучшить скорость загрузки страницы и общую производительность сайта. Второстепенный контент загружается не сразу, а только когда он действительно необходим пользователю. Однако поисковики могут не проиндексировать важный контент, если он загружается слишком поздно или поисковые роботы не могут запустить JavaScript, необходимый для его загрузки. Для правильной ленивой загрузки нужно:
- В первую очередь загружать контент, попадающий в поле зрения при открытии страницы (над уровнем прокрутки).
- Обеспечить запасные варианты для элементов с отложенной загрузкой.
- Использовать Intersection Observer API для эффективной загрузки изображений.
5. Предварительный рендеринг
Предварительный рендеринг – эффективное решение для страниц с большим количеством JavaScript-кода, которые некорректно индексируются поисковиками.
Суть проблемы:
- Контент может быть скрыт за сложными JavaScript-взаимодействиями или экранами входа.
- Поисковые роботы испытывают проблемы с обработкой такого динамического контента.
Решение:
Сервисы пре-рендеринга (например, Prerender.io или Rendertron) создают статические HTML-версии страниц специально для поисковых роботов. При этом:
- Обычные пользователи продолжают видеть динамическую версию сайта.
- Поисковые роботы получают готовую HTML-версию, которую легко индексировать.
☕ Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека джависта»
6. Динамические метатеги
Метатеги помогают поисковым системам понять содержание страницы и влияют на коэффициент кликабельности (CTR), когда страница отображается в результатах поиска. Для сайтов на JavaScript эти теги должны генерироваться динамически, чтобы отражать актуальное содержание страницы. Это особенно важно для приложений, которые используют ИИ для генерации лидов или автоматизации других процессов. Динамически обновлять метатеги в зависимости от контента можно с помощью инструментов типа react-helmet. Он обеспечивает корректную и оптимизированную метаинформацию, которую видят поисковые системы и соцсети. Такой подход улучшает ранжирование в поиске и повышает привлекательность страниц при их публикации в соцсетях:
7. Настройки robots.txt
Важно правильно настроить файл robots.txt и ограничить доступ к конфиденциальным областям сайта, сохраняя при этом доступ к важным ресурсам, необходимым для индексирования. Allow: /js/ разрешает доступ к каталогу с JavaScript-файлами, чтобы поисковые системы могли правильно рендерить страницы:
8. Навигационная цепочка с JSON-LD
«Хлебные крошки» улучшают навигацию как для пользователей, так и для поисковых систем. Google отображает их в результатах поиска, что помогает пользователям лучше понять структуру сайта и повышает кликабельность (CTR). Правильное структурирование навигационной цепочки, например, с помощью JSON-LD, позволяет поисковым системам корректно интерпретировать «хлебные крошки» и повышает их видимость в поисковых системах:
🐍 Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека питониста»
9. Управление бюджетом сканирования
Бюджет сканирования – это количество страниц, которые поисковая система обходит на сайте за определенное время. Сложные JavaScript-скрипты и ненужные вызовы API могут израсходовать этот бюджет, что приведет к тому, что не все страницы будут просканированы и проиндексированы. Чтобы повысить эффективность сканирования, необходимо:
- Минимизировать сложность JavaScript-кода.
- Избегать ненужных внешних вызовов API во время загрузки страниц.
- Сокращать вес JavaScript-бандлов для ускорения загрузки страниц, чтобы поисковые системы могли обходить больше контента.
В этом примере ненужные вызовы API исключены с использованием sessionStorage, что позволяет сохранять данные между перезагрузками страницы:
10. Поддержание чистоты URL
Одностраничные SPA-приложения могут порождать URL с параметрами запросов или фрагментами #, которые портят показатели SEO. Метод window.history.replaceState() обновляет URL в адресной строке без перезагрузки страницы и поддерживает соответствие URL отображаемому контенту:
➕➕ Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека C/C++-разработчика»
В заключение
JavaScript делает фронтенд динамичным и интерактивным, но его использование должно быть тщательно продумано с точки зрения SEO. Следуя этим рекомендациям, вы сможете повысить позиции сайта в поисковых системах без ущерба для пользовательского опыта.
⚙ Самые важные настройки tsconfig.json
Файл tsconfig.json в TypeScript – это мощный инструмент для управления поведением вашего кода, обеспечения его безопасности и улучшения взаимодействия с другими системами. Он определяет:
- Поведение компилятора TypeScript:
- Как код преобразуется в JavaScript
- Какую версию JavaScript использовать на выходе
- Какие файлы включать/исключать из компиляции
- Правила проверки типов:
- Насколько строгой должна быть проверка типов
- Как обрабатывать null и undefined
- Разрешать ли неявные any-типы
- Структуру проекта:
- Где искать исходные файлы
- Куда помещать скомпилированные файлы
- Как работать с модулями и путями импорта
- Совместимость:
- С какими библиотеками может работать код
- Какие возможности JavaScript доступны
- Как взаимодействовать с JavaScript-кодом
Так выглядят рекомендуемые настройки tsconfig.json, которые помогут улучшить скорость сборки, обеспечить безопасность кода, улучшить отладку и обеспечить совместимость:
Разберем эти настройки подробнее.
Повышение производительности TypeScript
Опция "incremental": true идеально подходит для больших кодовых баз или итерационных проектов, где между сборками изменяется лишь часть кода. Когда эта опция включена, TypeScript кэширует предыдущую сборку, позволяя пропускать перекомпоновку файлов, которые не изменились, тем самым экономя время.
Полная проверка типов
Параметр "strict": true включает полный набор функций проверки типов в TypeScript, предназначенных для раннего выявления потенциальных ошибок и граничных случаев. Этот всеобъемлющий параметр активирует несколько других важных настроек:
- noImplicitAny – запрещает переменным и параметрам автоматически присваивать тип any. Эта настройка вынуждает вас явно определять типы, снижая риск неожиданного поведения.
- strictNullChecks – гарантирует, что значения null и undefined рассматриваются как отдельные типы, делая код более предсказуемым за счет предотвращения случайных операций над потенциально пустыми значениями.
- strictFunctionTypes – вводит строгие правила проверки типов функций, особенно полезные при назначении функций и обеспечении совместимости в разных областях видимости.
- strictBindCallApply – добавляет проверку типов для методов bind, call и apply, чтобы убедиться, что аргументы соответствуют типам параметров функции.
- strictPropertyInitialization – обеспечивает инициализацию свойств класса перед их использованием, обычно путем установки значений в конструкторе, предотвращая потенциальные ошибки времени выполнения.
- noImplicitThis – вызывает ошибку, если ключевое слово this имеет тип any, требуя явной типизации и способствуя безопасному использованию this.
- alwaysStrict – убеждается, что все файлы анализируются в строгом режиме ECMAScript ("use strict" добавляется к каждому файлу), что позволяет выявлять больше ошибок во время выполнения.
- useUnknownInCatchVariables – изменяет тип переменной ошибки в блоках catch с any на unknown, улучшая обработку ошибок, требующую явную проверку типа ошибки.
- noUncheckedIndexedAccess: true – обеспечивает защиту от неопределенных значений при динамическом доступе к свойствам объектов.
♾ Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека девопсa»
Управление файлами сборки
- rootDir: "src" – указывает на директорию исходных файлов проекта. Помогает поддерживать порядок в проекте, логически организовывая файлы, и дает компилятору знать, где находятся исходные файлы.
- outDir: "./build" – директория, куда TypeScript будет сохранять скомпилированные файлы. Помогает отделить исходные файлы (например, находящиеся в папке src/) от генерируемого JavaScript-кода.
Кроссплатформенная и модульная совместимость
- target: "es6" – устанавливает версию ECMAScript для вывода. Установка target на es6 часто оптимальна для современных приложений, поскольку эта версия поддерживает async/await, а также многие другие новые функции JavaScript. При этом код, скомпилированный до ES6, остается совместимым с большинством браузеров и сред Node.js.
- module: "NodeNext" – определяет систему модулей: CommonJS, ESNext или NodeNext. Использование NodeNext позволяет работать с модулями ES (ECMAScript Modules) вместе с TypeScript. Это особенно полезно, если вы работаете с библиотеками или модулями Node.js в новейшем формате. Для проектов, ориентированных на другие окружения, стоит рассмотреть использование commonjs или esnext в зависимости от требований.
Отладка и тестирование
- sourceMap: true – генерирует карты исходников для помощи в отладке. Карты исходников связывают ваш код на TypeScript с результирующим JavaScript, что делает процесс отладки в VS Code и Chrome DevTools гораздо проще. Без карт исходников отладка становится затруднительной, потому что ошибки будут ссылаться на сгенерированный JavaScript-код, а не на оригинальный TypeScript.
- skipLibCheck: true – пропускает проверку типов для сторонних библиотек. Если вы используете много сторонних библиотек, установка skipLibCheck в true может уменьшить нагрузку на проверку типов. Это ускоряет процесс сборки без ущерба для безопасности вашего кода, так как предполагается, что библиотеки уже хорошо протестированы.
Повышение качества кода
- noUnusedParameters и noUnusedLocals: false – проверка на неиспользованные параметры и локальные переменные. Рекомендуется включать эти настройки для поддержания чистоты кода, хотя иногда бывает удобно временно отключить их во время рефакторинга.
- noImplicitOverride: true – обеспечивает явное использование ключевого слова override при переопределении методов суперклассов. С включением noImplicitOverride любые методы, переопределяющие методы родительского класса, должны использовать ключевое слово override. Это упрощает читаемость и отладку кода, особенно в крупных проектах.
🧪 Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека тестировщика»
Совместимость модулей и JSON
- esModuleInterop: true – разрешает импорт по умолчанию из модулей CommonJS. В TypeScript некоторые модули требуют обработки взаимодействия между модулями ES и CommonJS. С помощью esModuleInterop можно упростить интеграцию библиотек.
- resolveJsonModule: true – позволяет импортировать JSON-файлы как модули. Импортирование JSON-файлов часто необходимо для конфигурации, локализации или использования тестовых данных. Включив resolveJsonModule, вы сможете напрямую импортировать JSON, и TypeScript автоматически назначит ему тип any.
Чувствительность к регистру и стабильность на разных платформах
forceConsistentCasingInFileNames: true гарантирует соблюдение чувствительности к регистру в путях к файлам на всех платформах, предотвращая появление скрытых ошибок и проблем с совместимостью, особенно между Unix и Windows.
Обнаружение недостижимого кода и проваливания
- allowUnreachableCode: false – выдает ошибки при обнаружении недостижимого кода.
- noFallthroughCasesInSwitch: true – предотвращает непредвиденное поведение в операторах switch, заставляя выдавать ошибку, если одна ветвь переходит к следующей без явного использования операторов break, return или throw.
В заключение
Правильное использование опций в файле tsconfig.json позволяет эффективно настраивать TypeScript-проекты, обеспечивая создание быстрых, легких в поддержке и безопасных приложений.
Автор рассылки: Наталья Кайда