Чек-лист по SEO оптимизации для фронтенд разработчика
Оптимизация сайта для SEO по большой части подразумевает то, что мы должны разработать сайт таким образом, чтоб роботы/пауки поискового движка могли легко понимать наш сайт.
Нам как фронтенд разработчикам для этого надо позаботиться о следующих вещах:
- Семантичная и структурированная верстка. На данный момент поисковики обращают внимание на семантику HTML, и если все на div-ах или таблицах, то сайт навряд ли попадет на первые строчки поискового запроса. Семантичная верстка наполняет смыслом теги, и структуры, которые мы создаем в HTML, и это облегчает роботам понимать где и что находится на странице нашего сайта.
- Правильно использовать и структурировать заголовки на страницах. У каждой страницы должен быть один и единственный тег <h1>, который считается основным заголовком и говорит о чем страница, далее должна соблюдаться вложенность заголовков, то есть h2, у вложенного в него элемента заголовок h3 и т.д.
- Никогда не забывать alt атрибут у тега <img>, таким образом мы объясняем роботам, что это за картинка.
- Указать язык страницы, используя атрибут lang на теге <html>.
- Правильно указывать название страницы, то есть тег <title>, он должен быть уникален для каждой страницы и быть длиною до 55 символов, помимо этого значение тега должно отличаться от значения от тега <h1>.
- Использовать мета-тег description: тут пишется описание страницы, на каждую страницу оно должно быть уникальным и длиною до 150 символов.
- Подключить favicon и иконки для Apple Web Meta, Windows Tiles и прочие иконки
- Настроить и добавить OG-теги, то есть Open Graph теги: og:type, og:title, og:site_name, og:description, og:image, og:url, og:error для социальных сетей.
- Удалить комментарии в HTML, это в целом считается хорошей практикой, заливать сайт на продакшн без комментариев в коде/разметке.
- Подключать стили и скрипты и сторонние библиотеки и прочие не блокируя отрисовку сайта, можно использовать асинхронную загрузку сайта <script async src="...">.
- Обязательно иметь страницу ошибки 404.
Оптимизировать производительность сайта, производительность и доступность сайта очень важна для поисковых движков, для этого надо:
- Использовать как можно меньше узлов HTML, т.е. отказаться от лишних оберток в врестке.
- Оптимизировать картинки, кропать их до нужных размеров отображения и сжимать, лучше всего использовать формат webp, и fallback на jpg картники в браузерах, где не поддерживается формат webp. Помимо этого, если на странице много картинок, то лучше использовать ленивую загрузку картинок (lazy loading).
- Оптимизировать JS, удалить мертвый код, не использовать большие библиотеки, если из всей библиотеки вам нужен всего один или несколько методов. Писать код так, чтоб не было утечек памяти.
- Сжимать все файлы HTML, CSS, JS.
Если вы работаете над SSR(Server Side Rendered) приложениями, то не забыть про такие вещи как:
- robots.txt - это конфиг файл, при помощи которого мы можем указать, какие директории, страницы могут индексировать роботы/пауки.
- sitemap.xml - это файл, который хранит в себе все пути к страницам, он нужен для того, чтоб роботам/паукам было проще найти те или иные страницы у вас на сайте.
- Также, если вы пишите SSR или SPA приложение, то лучше хорошо подумать о том, как вы формируете навигацию(роутинг) в приложений. Навигация должна быть лаконичной, все вложенности должны быть сохранены, и соответствовать семантическим URL . К примеру, если у вас есть пользователь, и в личном кабинете пользователя есть страница "Мои оплаты", то стоит формировать навигацию, к примеру: https://example.com/profile/courses Где, https://example.com/ - хост, profile/ - роут до личного кабинета, courses/ - вложенная страница "Мои курсы"
Лучше с самого начала разработки думать о SEO оптимизации, как ни как, оно очень зависит от качества разработки, верстки и соблюдением мелочей, о которых легко забыть при разработке.
👉 @frontendInterview
Оптимизация сайта для SEO по большой части подразумевает то, что мы должны разработать сайт таким образом, чтоб роботы/пауки поискового движка могли легко понимать наш сайт.
Нам как фронтенд разработчикам для этого надо позаботиться о следующих вещах:
- Семантичная и структурированная верстка. На данный момент поисковики обращают внимание на семантику HTML, и если все на div-ах или таблицах, то сайт навряд ли попадет на первые строчки поискового запроса. Семантичная верстка наполняет смыслом теги, и структуры, которые мы создаем в HTML, и это облегчает роботам понимать где и что находится на странице нашего сайта.
- Правильно использовать и структурировать заголовки на страницах. У каждой страницы должен быть один и единственный тег <h1>, который считается основным заголовком и говорит о чем страница, далее должна соблюдаться вложенность заголовков, то есть h2, у вложенного в него элемента заголовок h3 и т.д.
- Никогда не забывать alt атрибут у тега <img>, таким образом мы объясняем роботам, что это за картинка.
- Указать язык страницы, используя атрибут lang на теге <html>.
- Правильно указывать название страницы, то есть тег <title>, он должен быть уникален для каждой страницы и быть длиною до 55 символов, помимо этого значение тега должно отличаться от значения от тега <h1>.
- Использовать мета-тег description: тут пишется описание страницы, на каждую страницу оно должно быть уникальным и длиною до 150 символов.
- Подключить favicon и иконки для Apple Web Meta, Windows Tiles и прочие иконки
- Настроить и добавить OG-теги, то есть Open Graph теги: og:type, og:title, og:site_name, og:description, og:image, og:url, og:error для социальных сетей.
- Удалить комментарии в HTML, это в целом считается хорошей практикой, заливать сайт на продакшн без комментариев в коде/разметке.
- Подключать стили и скрипты и сторонние библиотеки и прочие не блокируя отрисовку сайта, можно использовать асинхронную загрузку сайта <script async src="...">.
- Обязательно иметь страницу ошибки 404.
Оптимизировать производительность сайта, производительность и доступность сайта очень важна для поисковых движков, для этого надо:
- Использовать как можно меньше узлов HTML, т.е. отказаться от лишних оберток в врестке.
- Оптимизировать картинки, кропать их до нужных размеров отображения и сжимать, лучше всего использовать формат webp, и fallback на jpg картники в браузерах, где не поддерживается формат webp. Помимо этого, если на странице много картинок, то лучше использовать ленивую загрузку картинок (lazy loading).
- Оптимизировать JS, удалить мертвый код, не использовать большие библиотеки, если из всей библиотеки вам нужен всего один или несколько методов. Писать код так, чтоб не было утечек памяти.
- Сжимать все файлы HTML, CSS, JS.
Если вы работаете над SSR(Server Side Rendered) приложениями, то не забыть про такие вещи как:
- robots.txt - это конфиг файл, при помощи которого мы можем указать, какие директории, страницы могут индексировать роботы/пауки.
- sitemap.xml - это файл, который хранит в себе все пути к страницам, он нужен для того, чтоб роботам/паукам было проще найти те или иные страницы у вас на сайте.
- Также, если вы пишите SSR или SPA приложение, то лучше хорошо подумать о том, как вы формируете навигацию(роутинг) в приложений. Навигация должна быть лаконичной, все вложенности должны быть сохранены, и соответствовать семантическим URL . К примеру, если у вас есть пользователь, и в личном кабинете пользователя есть страница "Мои оплаты", то стоит формировать навигацию, к примеру: https://example.com/profile/courses Где, https://example.com/ - хост, profile/ - роут до личного кабинета, courses/ - вложенная страница "Мои курсы"
Лучше с самого начала разработки думать о SEO оптимизации, как ни как, оно очень зависит от качества разработки, верстки и соблюдением мелочей, о которых легко забыть при разработке.
👉 @frontendInterview
👍4❤1
Сердце Фреймворка: Философия и Практика Dependency Injection в Angular
Эта статья не очередной пересказ официальной документации. Это глубокое погружение в архитектуру и философию Dependency Injection в Angular. Наша цель демистифицировать «магию» и превратить ее в предсказуемый, управляемый и мощный инженерный инструмент в вашем арсенале.
👉 @frontendInterview
Эта статья не очередной пересказ официальной документации. Это глубокое погружение в архитектуру и философию Dependency Injection в Angular. Наша цель демистифицировать «магию» и превратить ее в предсказуемый, управляемый и мощный инженерный инструмент в вашем арсенале.
👉 @frontendInterview
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Тимлид должен джуна похвалить и попросить больше ничего такого на работу не таскать
👉 @frontendInterview
👉 @frontendInterview
🔥5❤1
Почему нельзя отправлять в get запросах чувствительную информацию?
URL видны в истории браузера
GET-запросы отправляют данные через URL, который сохраняется в истории браузера. Это означает, что любой, кто имеет доступ к истории браузера, может увидеть эти данные.
Логи сервера
Многие веб-серверы и прокси-серверы автоматически записывают URL всех запросов в свои логи. Чувствительная информация в URL будет сохранена в этих логах и может быть доступна администраторам серверов или в случае компрометации системы.
Кэширование
Браузеры, прокси-серверы и промежуточные серверы могут кэшировать URL-адреса GET-запросов. Это означает, что чувствительная информация может быть сохранена в кэшах и доступна при последующих обращениях.
Ограничения длины URL
Большинство браузеров и серверов имеют ограничения на длину URL (обычно около 2000 символов). Если данные слишком длинные, они могут быть обрезаны, что приведет к потере информации или ошибкам при обработке запроса.
Видимость в реферере
Когда пользователь переходит по ссылке с одной страницы на другую, URL-адрес исходной страницы часто передается как заголовок Referer в HTTP-запросе. Это означает, что чувствительная информация в URL может быть передана сторонним сайтам.
HTTP-заголовки и GET-запросы
Данные в GET-запросах передаются через URL, в то время как данные в POST-запросах передаются в теле запроса. URL более подвержены утечке, так как они часто видны в различных местах (например, в журналах серверов, истории браузера и т.д.).
Использование POST-запросов в качестве альтернативы
Для отправки чувствительной информации лучше использовать POST-запросы, так как данные передаются в теле запроса и не сохраняются в URL.
👉 @frontendInterview
URL видны в истории браузера
GET-запросы отправляют данные через URL, который сохраняется в истории браузера. Это означает, что любой, кто имеет доступ к истории браузера, может увидеть эти данные.
Логи сервера
Многие веб-серверы и прокси-серверы автоматически записывают URL всех запросов в свои логи. Чувствительная информация в URL будет сохранена в этих логах и может быть доступна администраторам серверов или в случае компрометации системы.
Кэширование
Браузеры, прокси-серверы и промежуточные серверы могут кэшировать URL-адреса GET-запросов. Это означает, что чувствительная информация может быть сохранена в кэшах и доступна при последующих обращениях.
Ограничения длины URL
Большинство браузеров и серверов имеют ограничения на длину URL (обычно около 2000 символов). Если данные слишком длинные, они могут быть обрезаны, что приведет к потере информации или ошибкам при обработке запроса.
Видимость в реферере
Когда пользователь переходит по ссылке с одной страницы на другую, URL-адрес исходной страницы часто передается как заголовок Referer в HTTP-запросе. Это означает, что чувствительная информация в URL может быть передана сторонним сайтам.
HTTP-заголовки и GET-запросы
Данные в GET-запросах передаются через URL, в то время как данные в POST-запросах передаются в теле запроса. URL более подвержены утечке, так как они часто видны в различных местах (например, в журналах серверов, истории браузера и т.д.).
Использование POST-запросов в качестве альтернативы
Для отправки чувствительной информации лучше использовать POST-запросы, так как данные передаются в теле запроса и не сохраняются в URL.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Secure Form</title>
</head>
<body>
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button type="submit">Submit</button>
</form>
</body>
</html>
👉 @frontendInterview
❤3👍2
Грокаем функциональное мышление
Кодовые базы разрастаются, становясь всё сложнее и запутаннее, что не может не пугать разработчиков. Как обнаружить код, изменяющий состояние вашей системы? Как сделать код таким, чтобы он не увеличивал сложность и запутанность кодовой базы?
Большую часть «действий», изменяющих состояние, можно превратить в «вычисления», чтобы ваш код стал проще и логичнее.
Вы научитесь бороться со сложными ошибками синхронизации, которые неизбежно проникают в асинхронный и многопоточный код, узнаете, как компонуемые абстракции предотвращают дублирование кода, и откроете для себя новые уровни его выразительности.
Книга предназначена для разработчиков среднего и высокого уровня, создающих сложный код. Примеры, иллюстрации, вопросы для самопроверки и практические задания помогут надежно закрепить новые знания.
👉 @frontendInterview
Кодовые базы разрастаются, становясь всё сложнее и запутаннее, что не может не пугать разработчиков. Как обнаружить код, изменяющий состояние вашей системы? Как сделать код таким, чтобы он не увеличивал сложность и запутанность кодовой базы?
Большую часть «действий», изменяющих состояние, можно превратить в «вычисления», чтобы ваш код стал проще и логичнее.
Вы научитесь бороться со сложными ошибками синхронизации, которые неизбежно проникают в асинхронный и многопоточный код, узнаете, как компонуемые абстракции предотвращают дублирование кода, и откроете для себя новые уровни его выразительности.
Книга предназначена для разработчиков среднего и высокого уровня, создающих сложный код. Примеры, иллюстрации, вопросы для самопроверки и практические задания помогут надежно закрепить новые знания.
👉 @frontendInterview
Get the Middle Character
Вам будет дано слово. Ваша задача - вернуть средний символ слова. Если длина слова нечетная, верните средний символ. Если длина слова четная, верните 2 средних символа.
Пример:
👉 @frontendInterview
Вам будет дано слово. Ваша задача - вернуть средний символ слова. Если длина слова нечетная, верните средний символ. Если длина слова четная, верните 2 средних символа.
Пример:
getMiddle("testing") = "t"👉 @frontendInterview
Протокол IPv6
IPv6 или Internet Protocol version 6 — сетевой протокол, который обеспечивает передачу данных между компьютерами и другими устройствами в интернете.
Основная идея заключается в том же, в чём идея интернета — прямой связности и построении одноранговой сети (P2P). По сравнению с IPv4 (актуальной, но устаревающей версией), в IPv6 исправили баги и добавили решения, связанные с адресацией, маршрутизацией и автоматизацией.
Основные преимущества протокола в вебе:
- Прямые соединения: преимущество для голосовой связи (VoIP) и аудио-, видео- и конференц-связи (WebRTC), так как нет разделения на частные (серые) и публичные (белые) адреса.
- Удобство в отладке: нет необходимости использовать программное обеспечение вроде ngrok.
- Меньше проблем с блокировками: у каждого устройства свой уникальный IP-адрес. Меньше шансов, что вас заблокируют из-за соседа на хостинге.
- Снижается вероятность столкнуться с капчей на анти-DDoS-сервисах при входе на сайт.
- Косвенные SEO-преимущества: Google может учитывать доступность сайта по IPv6, политики Apple.
- Актуальность в развивающихся странах: во многих регионах провайдеры используют только IPv6, что важно, если делаете международный продукт.
IPv6-адрес состоит из 128 бит, которые записываются в виде восьми групп по четыре шестнадцатеричных символа (хекстета).
Посмотрим на адрес 2001:0db8:4ac7:fddd:8da3:981f:fbda:1e43. Выглядит страшно, но на практике всё просто. Адрес делится на две части:
- 2001:0db8:4ac7:fddd — глобальный префикс, который определяет провайдер.
- 8da3:981f:fbda:1e43 — уникальный идентификатор устройства в сети.
В отличие от IPv4, вы можете представить вторую половину как универсальный уникальный идентификатор устройства (UUID).
👉 @frontendInterview
IPv6 или Internet Protocol version 6 — сетевой протокол, который обеспечивает передачу данных между компьютерами и другими устройствами в интернете.
Основная идея заключается в том же, в чём идея интернета — прямой связности и построении одноранговой сети (P2P). По сравнению с IPv4 (актуальной, но устаревающей версией), в IPv6 исправили баги и добавили решения, связанные с адресацией, маршрутизацией и автоматизацией.
Основные преимущества протокола в вебе:
- Прямые соединения: преимущество для голосовой связи (VoIP) и аудио-, видео- и конференц-связи (WebRTC), так как нет разделения на частные (серые) и публичные (белые) адреса.
- Удобство в отладке: нет необходимости использовать программное обеспечение вроде ngrok.
- Меньше проблем с блокировками: у каждого устройства свой уникальный IP-адрес. Меньше шансов, что вас заблокируют из-за соседа на хостинге.
- Снижается вероятность столкнуться с капчей на анти-DDoS-сервисах при входе на сайт.
- Косвенные SEO-преимущества: Google может учитывать доступность сайта по IPv6, политики Apple.
- Актуальность в развивающихся странах: во многих регионах провайдеры используют только IPv6, что важно, если делаете международный продукт.
IPv6-адрес состоит из 128 бит, которые записываются в виде восьми групп по четыре шестнадцатеричных символа (хекстета).
Посмотрим на адрес 2001:0db8:4ac7:fddd:8da3:981f:fbda:1e43. Выглядит страшно, но на практике всё просто. Адрес делится на две части:
- 2001:0db8:4ac7:fddd — глобальный префикс, который определяет провайдер.
- 8da3:981f:fbda:1e43 — уникальный идентификатор устройства в сети.
В отличие от IPv4, вы можете представить вторую половину как универсальный уникальный идентификатор устройства (UUID).
👉 @frontendInterview
👍2❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
Чем является глобальная функция 'setTimeout'?
Anonymous Quiz
68%
Часть Browser API
24%
Часть JavaScript
7%
Часть EcmaScript
1%
Сторонняя утилита
🎯Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда
Как писать продуманный и масштабируемый фронтенд с помощью React? Какие паттерны реально работают, а какие — мода ради моды?
В новом сезоне Podlodka React Crew обсуждаем архитектуру, производительность, нестандартные layout'ы, системный подход к интервью и многое другое.
📌 В программе:
• Паттерны анимаций с View Transition API
• Проверка AI-ассистентов на реальных задачах
• Глубокое погружение в архитектуру React Hooks
• Практика layout'ов вне CSS Grid и Flexbox
• System Design для фронтендера: как не завалить интервью
💡Все доклады — с практикой, кейсами и интерактивом.
📆 Реактим с 25 по 29 августа. Бегом за билетами: https://podlodka.io/reactcrew
Как писать продуманный и масштабируемый фронтенд с помощью React? Какие паттерны реально работают, а какие — мода ради моды?
В новом сезоне Podlodka React Crew обсуждаем архитектуру, производительность, нестандартные layout'ы, системный подход к интервью и многое другое.
📌 В программе:
• Паттерны анимаций с View Transition API
• Проверка AI-ассистентов на реальных задачах
• Глубокое погружение в архитектуру React Hooks
• Практика layout'ов вне CSS Grid и Flexbox
• System Design для фронтендера: как не завалить интервью
💡Все доклады — с практикой, кейсами и интерактивом.
📆 Реактим с 25 по 29 августа. Бегом за билетами: https://podlodka.io/reactcrew
This media is not supported in your browser
VIEW IN TELEGRAM
Управляем тем, какую область фоновая картинка будет занимать внутри элемента.
Свойство background-origin определяет, откуда начинается отсчёт фона элемента — от границы (border), внутреннего отступа (padding) или содержимого (content). Это влияет на позиционирование фонового изображения или градиента.
Пример
👉 @frontendInterview
Свойство background-origin определяет, откуда начинается отсчёт фона элемента — от границы (border), внутреннего отступа (padding) или содержимого (content). Это влияет на позиционирование фонового изображения или градиента.
Пример
.background-origin {
background-origin: padding-box;
}👉 @frontendInterview
👍2
Это повышение квалификации для тех, кто хочет научиться разрабатывать мощные серверные приложения на Node.js с использованием Express, TypeScript, GraphQL, Apollo и Nest.js. Вы получите знания, которые востребованы на рынке, и навыки, которые можно сразу применять в реальных проектах.
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
erid 2SDnjbrdJWa
Please open Telegram to view this post
VIEW IN TELEGRAM