SEO от А до Я для WEB разработчиков. СЕО оптимизация — Transcript

Comprehensive SEO guide for web developers covering meta tags, indexing, ranking, mobile optimization, and tools like Lighthouse and AMP.

Key Takeaways

SEO involves both content and technical optimization to improve search engine ranking.
Proper use of meta tags and robots.txt is crucial for controlling page indexing.
Performance metrics and mobile optimization significantly affect user experience and ranking.
Open Graph enhances content visibility on social networks.
Search engines differ in ranking algorithms; optimization should consider multiple platforms.

Summary

Introduction to SEO basics tailored for web developers, not specialists.
Explanation of key meta tags including canonical links, robots meta tags, and robots.txt.
Discussion on page indexing, crawl budget, and how to exclude non-essential pages from search engines.
Overview of ranking factors including content relevance, site speed, bounce rate, and user behavior.
Coverage of Open Graph protocol and its impact on social media sharing.
Guidance on measuring performance metrics such as bundle size and using tools like Lighthouse and PageSpeed Insights.
Mobile optimization techniques including Google AMP technology.
Introduction to microdata and microformats for enhanced SEO.
Brief mention of challenges with single-page applications and server-side rendering.
Importance of SEO audits and understanding differences between search engines like Google and Yandex.

Full Transcript — Download SRT & Markdown

Speaker A

Hello friends, and in this video, we will talk about SEO optimization. There will be no super in-depth program specifically for SEO specialists, but everything necessary for web developers will be covered. I suggest not to delay much and let's get straight to

Speaker A

плану на этот ролик сразу сделаю оговорку что этот план он не отражает порядок тем который мы будем разбирать а просто показывает структуру порядок тем можно будет посмотреть в тайм кодах Итак начнём с основ поговорим про основные метательное про контент ную часть

Speaker A

the plan for this video. I will make a disclaimer right away that this plan does not reflect the order of topics we will cover but simply shows the structure. You can check the order of topics in the timestamps. So, let's start with the basics and talk about the main meta tags, the content part

Speaker A

урл и про Canonical ссылки поговорим про metatag robots и про Файлик robots txt поработаем с индексацией страниц поо повча поговорим про то какие значения могут быть ещё поговорим про то как настраивать Это для разных поисковиков Яндек Google и так далее Также поговорим

Speaker A

of the page, semantics, usability, and how all this affects SEO and ranking. An integral part of SEO in the modern world is Open Graph. We will look at how it works, analyze our simple site, and see how Open Graph works in social networks. We will talk about human-readable

Speaker A

Как измерять размер бандла обсудим вот эти все метрики поговорим про то как оптимизировать под мобилку обсудим технологию от Гугла который называется а обговорим такое понятие как микроразметка рассмотрим на два важных понятия SE - это Атай вашего сервиса и глубина отказов Ну и

Speaker A

URLs and canonical links. We will discuss the meta tag robots and the robots.txt file. We will work on page indexing and talk about what values can be used. We will also discuss how to configure this for different search engines like Yandex, Google, and so on. We will also talk

Speaker A

меньше слов больше дела приступаем Итак начнём с такого базового понятие как ранжирование когда мы делаем запрос в какую-либо поисковую систему задача этой поисковой системы отдать максимально релевантные подходящие нам сайты страницы на которых мы сможем получить нужную для нас информацию и вот задача

Speaker A

about various important metrics, how they affect ranking, and how to measure them. We will talk about Lighthouse, PageSpeed Insights, and similar tools. Along the way, we will discuss sitemaps in general, some micro-optimizations, how to work with images,

Speaker A

как можно выше вот в этом вот топе который отдаёт поисковая система Как видите вот тут вот по запросу алгоритмы структуры данных нам вывалилась на первой странице Вот такая вот подборка на третьем месте моё видео основное Что влияет на это ранжирование - это конечно

Speaker A

how to measure bundle size, and discuss all these metrics. We will talk about how to optimize for mobile, discuss a Google technology called AMP, and talk about the concept of microdata. We will look at two important concepts: SEO audit of your service and bounce rate. Finally,

Speaker A

сайт который расположен по какому-то адресу и есть энное количество страниц причём страниц может быть огромное количество на каждый из них продвигается какой-то продукт товар статья либо ещё что-то из этого строится своего рода паутина в принципе этот термин он такой

Speaker A

we will discuss junk pages and the concept of crawl budget. There will be a brief mention of issues related to single-page applications and server-side rendering, but that will be quite straightforward. Don't forget to like the video and leave a comment afterward; I would really appreciate it. Well,

Speaker A

статьями продуктами товарами Мы хотим наоборот продвинуть как можно лучше и вот это всё как раз про SEO SEO как раз и расшифровывается как оптимизация под вот эти самые поисковые движки Яндекс Google и прочее здесь важный момент ещё наверное стоит об этом в начале сказать

Speaker A

less talk, more action. Let's get started. So, let's begin with a basic concept called ranking. When we make a query to any search engine, the task of that search engine is to return the most relevant and suitable sites or pages where we can get the information we need. The task

Speaker A

специ как раз вникают мы здесь вот в такие детали в какие-то отличия поисковых систем вникать естественно не будем Итого двигаемся дальше достаточно важный вопрос как вот эти поисковые движки собирают информацию о сайтах страницах Чтобы в дальнейшем их как-то

Speaker A

of the search engine is to give us the most appropriate results from the multitude of sites that mention the keywords we entered. And, of course, if we are owners of any site selling equipment, clothes, or some products, we want to get as high as possible in the top results that the search engine returns. As you can see,

Speaker A

прыгают анализируют страницу смотрят на контент ную часть на заголовок на какие-то Вот как раз SEO оптимизации настройки эту страницу индексировать нужно эту страницу индексировать не нужно всё это пауки учитывают индексация - Это очень важный термин который стоит разобрать изначально чтобы потом было

Speaker A

here for the query "data structure algorithms," we got this selection on the first page. My main video is in third place. What influences this ranking is, of course, the content, but there are also many technical details that SEO specialists work on that help push your site, your application, your pages

Speaker A

то в результате индексации получается такой Аля справочник или там записная книжка и в этой книжке поисковый движок может быстро найти нужную для него информацию аранжировать сайты по релевантности и выдать пользователю И как я уже говорил факторов которые влияют на Вот это ранжирование причём в

Speaker A

as high as possible in this search results list. So, how does it work? You have a site located at some address, and there are a certain number of pages. The number of pages can be huge. Each page promotes some product, item, article, or something else. This creates a kind of web or network. In fact, this term exists:

Speaker A

это глубина отказов если пользователи заходят на ваш сайт и выходят с него через 20-30 секунд то очевидно что что-то с вашим контентом не так и часто На вот эту глубину отказов как раз очень сильно влияет скорость работы вашего

Speaker A

the World Wide Web. Importantly, from ranking, we may want to exclude some pages, for example, an admin panel or some internal tools that external users do not need to know about. But all other pages with our contacts, articles, products, and goods, we want to promote as well as possible. And this is exactly what SEO is about.

Speaker A

счёт огромное количество там даже есть определённые метрики и проценты соотношения Как часто выходят какое время является критическим и так далее кому интересно как бы не проблема найти также влияет количество страниц то есть скорее даже не количество страниц а

Speaker A

SEO stands for optimization for these search engines like Yandex, Google, and others. Another important point to mention at the beginning is that search engines do not work the same way. You can rank high on one search engine but not even appear on the first pages of another because, no matter what, search engines work differently. These are details,

Speaker A

проблемы со зрением с управлением там мышкой клавиатурой то есть в идеале у вас всё должно с клавиатурой управляться табами переключаться фокус устанавливаться стрелочками энтера пробелами эскейпа модал всякие закрываться должны формы подтверждаться данные отправляться то есть вот это вот

Speaker A

subtleties, and nuances that SEO specialists delve into. We will not go into such details or differences between search engines here. So, moving on. A very important question is how these search engines collect information about sites and pages to later rank them by relevance. If related pages form a web,

Speaker A

всё просто без каких-то лишних терминов потому что предполагаю что это видео будет смотреть много начинающих также очевидно что влияет на ранжирование также география ресурса например вде это Прям вообще такой достаточно важный фактор выдачи контента есть ещё такое понятие как uptime это время которое Ваш

Speaker A

it is logical that spiders crawl this web. But not ordinary spiders, but web spiders called crawlers. Crawlers visit your page, find links on it, jump along these links, analyze the page, look at the content part, the title, and some SEO optimization settings. They decide whether to index this page or not. All this is taken into account by spiders.

Speaker A

негативно повлияет ещё один из важнейших факторов - это мобильных устройств на вот этом графике можно заметить что пользователей Веба со смартфонов в два раза больше чем с компьютеров и оптимизация вашего сайта под мобильное устройство - это один из важнейших

Speaker A

Indexing is a very important term that should be explained initially to make things clearer later. Indexing is the process when these spiders crawl your pages, collect information, and save it somewhere. We don't really care where they save it, but usually, it is some databases. To put it simply,

Speaker A

вот это вот се оптимизация и строится факторов которые влияют на ранжирование вообще огромное количество я сейчас рассказал только наверное о самых основных и то не обо всех и вот в крупных компаниях прям идёт борьба можно сказать за каждый процент вот этого се

Speaker A

indexing results in something like a directory or a notebook where the search engine can quickly find the information it needs, rank sites by relevance, and show results to the user. As I said, many factors influence this ranking, and they differ in various search algorithms. There are many factors: content and its uniqueness,

Speaker A

котором мы как раз и будем делать какое-то SEO я пользуюсь вебшторм тут по умолчанию есть снипет пишем восклицательный знак нажимаем Tab и базовая структура HTML развёрнуто здесь уже есть всё необходимое для того чтобы начать писать важный момент - это

Speaker A

popularity of the resource, the so-called citation index. If your links are frequently referenced on other resources, this also affects promotion. Another important metric is bounce rate. If users visit your site and leave after 20-30 seconds, it is obvious that something is wrong with your content. Bounce rate is strongly influenced by your application's speed.

Speaker A

на каком-то специфическом языке следующий важнейший тег - Это viewport для тех кто не знает viewport - это то что попадает в область видимости пользователя и вот в зависимости от того какие настройки для этого Мета тега вы укажете на разных устройствах вот этот

Speaker A

If a user opens your site and it does not load within 5 seconds because your JavaScript bundle is, say, 5 MB, they will most likely leave your site. If you google analytics on this topic, there is a lot of data, including certain metrics and percentages about how often users leave and what time is critical, and so on. For those interested, it is easy to find.

Speaker A

продажа каких-то товаров надо чтобы пользователю было удобно но это всё в принципе была база которая вот один раз задаётся на первом этапе и потом про это забывают Давайте говорить теперь про то что меняется тайтл заголовок вашей страницы один из самых важных вообще

Speaker A

The number of pages also affects ranking, or rather the volume of your site. Usability also matters, meaning how well everything is done, roughly speaking, according to best practices. Another important topic is accessibility, so that people with disabilities can use your site. For example, those with vision problems or difficulties using a mouse or keyboard.

Speaker A

сверху этот заголовок будет отображаться Ну и также понятное дело он будет отображаться в поисковой выдаче здесь как я уже сказал текст должен быть осознанным должны быть ключевые слова и заголовок в идеале должен быть уникальный на каждой странице то есть

Speaker A

Ideally, your site should be fully navigable with a keyboard: tabbing through elements, switching focus with arrow keys, confirming forms with Enter or Space, closing modals with Escape, and so on. This is usability and accessibility. There are also screen readers. As a user, you might not notice this, but for some people, it is very important.

Speaker A

необходимо добавить максимально большое количество ключевых слов по которым вас будут искать здесь опять же думаю понятно что вот это описание оно находится под заголовком в поисковой выдаче двигаемся дальше Ну из таких основных скажем так фундаментальных Мета тегов остаётся keywords ключевые слова

Speaker A

Search engines take all this into account in ranking. I try to explain everything as simply as possible without unnecessary terms because I expect many beginners will watch this video. It is also obvious that ranking is influenced by the geography of the resource. This is a very important factor in content delivery.

Speaker A

сходится на том что он уже никак не учитывается Ну ещё раз подытожим заголовок и описание должны быть по хорошему уникальными когда робот будет это всё обходить это всё будет учитываться следующий важный момент который также учитывают роботы которые парся Вашу страницу - это семантика

Speaker A

There is also the concept of uptime, which is the time your service is available. If your uptime is 99.9%, you have nothing to worry about. But if, for some reason, your server is down half the day and users cannot access it, and crawlers cannot index it, this will negatively affect ranking. Another crucial factor is mobile devices. On this graph, you can notice...

Speaker A

скажем так какой-то блок вашей страницы используются семантически правильные теги секции хедеры Артик навигация футе из вот этого всего тся основной каркас вашей страницы если вы используете кнопку то это не или СН с классом Button А это прям Tag Button по умолчанию там

Speaker A

будет и нажатие через Enter работать и табы будут правильно работать фокусы и так далее опять же если вы используете ссылки то это соответствующий тег причём Если вы используете внешнюю ссылку всегда лучше использовать Target Blank для того чтобы ссылка открывалась в

Speaker A

новом окне текст в идеале опять же писать не в Дива именно вот такой текст который основной наполнение вашей страницы а в параграфах и ещё важный момент - это заголовки заголовки по важности практически такие же как и title и здесь важно что у вас на одну

Speaker A

страницу аж один заголовок должен быть один То есть они тоже не должны дублировать если вам нужно сделать какие-то подзаголовки это должна быть иерархическая структура H2 H3 H4 и так далее опять же если вам важно сделать что-то типа заголовки именно с точки

Speaker A

зрения визуальной можно использовать ди или параграф просто повесить на него нужный класс и использовать его как заголовок Но именно вот с точки зрения семантики если вы хотите какую-то часть выделить как заголовок то лучше использовать H1 H2 H3 и так далее То же

Speaker A

самое со списками Если вы хотите сделать какой-то список неважно маркированный не маркированный нумерованный а нужно использовать соответствующие теги опять же ничего не мешает всё это на дивак сверстать но с точки зрения семантики лучше верстать всё правильными тегами здесь ещё важный момент опять же если у

Speaker A

вас какая-то админка которая закрыта для внешних пользователей где SEO вообще не нужно где ранжирование не играет никакой роли заморачиваться над этим абсолютно не надо если доступность и юзабилити также не имеет особого значения можно хоть на дива всё сверстать и всё будет

Speaker A

хорошо никаких проблем у вас не будет но если для вас вот эти вот моменты все важны Ну понятное дело над этим стоит думать давай пока один заголовок оставим напишем по классике здесь Hello world внутри и переходим к следующей теме

Speaker A

поговорим об протоколе который называется Open это специальная разметка сейчас ни для кого не секрет век социальных сетей все друг с другом делятся ссылками и вот он - это такой некий стандарт протокол разметки который позволяет делать ссылки такими чтобы они

Speaker A

в соцсетях выглядели привлекательными понятными Придумано это было фейсбуком но сейчас Практически во всех соцсетях поддержка офа имеется Давайте посмотрим на то как выглядит ссылка без он графа на примере телеграма Как видите просто текст http with deploy test.ru после

Speaker A

того как я добавил Open разметку ссылка стала выглядеть так появилось описание появился заголовок появилась даже картинка на которую я указал ссылку в общем это стало намного привлекательней Ну для примера вот более такая правильно заполненная разметка а озона есть картинка с книжкой есть

Speaker A

заголовок есть описание как бы всё понятно понятно что за ссылка красиво в соцсетях всё отображается ВКонтакте например это выглядит вот так как видите чуть отличается от телеграма здесь как бы тоже проводились различные эксперименты и уже доказано что вот

Speaker A

ссылки о которых есть информация заголовок описание картинка конверсия перехода По этим ссылкам там в разы выше чем без вот этого всего Ну и Давайте смотреть как это работает сначала заполним Мета теги потом задеплоил сервер и подключим домен и

Speaker A

попробуем отправить эту ссылку в различные соцсети мессенджеры и посмотрим как она будет отображаться все вот эти огра Мета теги заполняются вот таким вот образом указывается Property вначале идёт og двоеточие а затем тип Мета тега в Type чаще всего указывается

Speaker A

вебсайт там опять же можете посмотреть какие значения может принимать этот тег далее указываем URL и картинку картинку можно использовать как какую-то локальную так и ссылку на картинку давайте сейчас вот как раз вот эту книгу на примере которое я вам показывал скопи

Speaker A

URL вставим сюда Ну можем даже попробовать открыть эту ссылку Ну да вот как видите Это ссылка на картинку так Ну и наверное два самых важных опять же Open тега это og title в котором указывается как раз заголовок который

Speaker A

будет отображаться в соцсети здесь можно либо продублировать заголовок с вашей страницы либо написать какой-то другой опять же всё зависит от того что вам требуется ну и соответственно description это описание которое также в соцсети будет отображаться Давайте здесь какие-нибудь

Speaker A

Рандомные чтобы их отличать можно было Ну и вот эти вот пять og скажем так тегов являются основными там есть и другие если что можете посмотреть но очевидно что если локальную ссылку мы скинем Ничего мы не увидим не увидим ни

Speaker A

описание ни заголовка ни картинки поэтому сейчас мы быстренько нашу HTML задеплоил сервер использовать мы будем selectel уже неоднократно я его на своём канале показывал рассказывал есть даже отдельный ролик прямо по пю frontend react приложени ссылка на него будет в описании сейчас

Speaker A

подсказка всплывёт Там прям полноценный деплой полного приложения с JS с HTML CSS Итак друзья регистрируемся на платформе Если вы этого ещё не делали пополняем счёт на нужную сумму и создаём Наш первый или уже не первый сервер здесь можно выбрать как какую-то

Speaker A

фиксированную конфигурацию так и произвольную настроить я вот выбрал по минималке нам сейчас какого-то мощного сервера не надо А так вообще тут гибко можно всё под себя настроить выделяем публичный IP адрес здесь в принципе базовые настройки все делаем здесь

Speaker A

ничего трудного нет Вот в такой базовой конфигурации 30 руб в день нам такой сервер будет стоить здесь можно указать название регион выбрать выбрать операционную систему у бунту 2 второй версии нас в принципе полностью устраивает Так ну вроде Здесь всё хорошо

Speaker A

давайте сервер создадим после создания сервера вы увидите что статус активный И вам будет выделен IP адрес Давайте сам сервер откроем на конфигурацию вот здесь все наши настройки здесь есть консоль в принципе через которую вы уже изначально можете работать с вашим сервером но

Speaker A

всё-таки через терминал операционной системы работать удобнее если у вас Mac или у бунту вообще хорошо Но в принципе через Windows powershell тоже работать можно мы будем подключаться к серверу по SS если SS Агент у вас не установлен делается это крайне просто первый же

Speaker A

запрос в Google вам объяснят как это сделать пишем вот такую команду S далее указывается логин под которым мы хотим зайти в нашем случае это Root далее указывается собака и IP адрес на который мы хотим подключиться IP адрес можно

Speaker A

посмотреть как раз в панели управления selectel дальше вас попросит пароль пароль опять же смотрим вот здесь вот в панели управления копируем его Ctrl V Всё мы подключились Теперь мы удалённо управляем нашим сервером вот можно посмотреть на файловую систему Ну

Speaker A

и в первую очередь Давайте обновим репозиторий чтобы устанавливать актуальные все пакеты суда apt update пошёл процесс пакеты все обновлены всё что надо сделано далее установим для того чтобы раздавать нашу мку здесь опять же прям подробно я не останавливаюсь потому что есть отдельный

Speaker A

ролик Где супер подробно мы деплой вот этот весь снксом со всякими нюансами Разбираем так установился Давайте теперь зайдём в папочку ЕТК здесь у вас появится папка engins в ней будет вся необходимая конфигурация опять же здесь не рассказываю что Для чего надо как это

Speaker A

всё конфигурируется есть отдельный ролик ссылка будет в описании если что переходим переходим в папку SS enabled и устанавливаем Vim для того чтобы редактировать текстовые файлы Ну чтобы более удобно это было Давайте заглянем в дефолтный конфиг который у нас здесь

Speaker A

пред создан вот такой вот командой здесь есть уже какая-то изначальная конфигурация которую мы можем под себя менять здесь в принципе базовые настройки они нас удовлетворяют опять же про все эти настройки я рассказывал в том видео здесь мы просто воспринимаем

Speaker A

это всё уже как факт здесь вот Севе и здесь указан Root это то где будет храниться наша htm папка HTML Давайте вот в эту папку сейчас и перейдём CD War HTML переходим в неё видим что здесь какой-то inin Debian HTML уже лежит

Speaker A

Давайте создадим новый Vim Index HTML вот открылся у нас текстовый редактор всё что мы вот здесь вот писали Давайте скопирую нажимаем S переходим в режим редактирования вставляем сюда наш HTML теперь из вима необходимо выйти нажимаем Escape затем двоеточие wq и Enter в

Speaker A

таком режиме у нас всё сохранится пере запустим суда се и по идее Всё у нас уже должно начать работать открываем браузер копируем наш IP адрес и вставляем его в строку запроса по IP адресу открылся наш Hello world Давайте

Speaker A

посмотрим код страницы Ну да здесь как раз всё то что мы в принципе добавили можно в принципе ещ вот так F12 нажать Открыть вкладку Network загрузить тоже Ну и вот здесь вот нашу HTML мы увидим вот весь код

Speaker A

который мы написали на текущем этапе всё хорошо статика у нас раздаётся Облачный сервер работает но IP адреса недостаточно если мы сейчас его вставим Вот например в Telegram он его никак не обработает скорее всего там есть какая-то регулярка именно на URL то есть

Speaker A

на саму ссылку и IP адреса недостаточно на любом регистраторе доменов необходимо будет вам зарегистрировать домен опять же в том ролике про я рассказывал как это делать сейчас мы на это время тратить не будем Я прямо возьму как раз

Speaker A

вот домен с того ролика он у меня остался воспользоваться можно абсолютно любым регистратором доменов вот у меня есть он как раз вид deploy тест С того самого ролика про деплой и вот здесь Как видите я уже подключил DNS сервера sella

Speaker A

опять же это делается всё элементарно просто поэтому на этом я Останавливаться не буду если что в том ролике Посмотрите там по тайм кодам найдёте это делается быстро ну и соответственно все Единственное что остаётся это указать для этого домена как бы IP адрес нашего

Speaker A

сервера для того чтобы вот этот домен и IP адрес были связаны вот у меня здесь уже есть Вид deploy Test но как видите для него указан другой IP адрес То есть это ресурсная запись типа А которая на IP адрес как раз ссылается и нам его вот

Speaker A

здесь просто нужно будет заменить то есть переходим к нашему серверу копируем IP адрес и вот здесь его заменяем вот как видите IP адрес заменил сохраняем возможно должно будет пройти какое-то время от 2 часов до суток пока ДНС сервер всё это обработает Но для Вас

Speaker A

как бы в ролике это всё проходит безшовна Как видите deploy test.ru уже выдаёт наш Hello world просматриваем код страницы видим нашу разметку Теперь эту ссылку можно скидывать в соцсети поскольку мы указали там Open разметку Ну и Давайте попробуем это

Speaker A

сделать копируем ссылку вставляем её сюда единственное наверное надо полную ссылку скопировать с http скидываем Да как бы разметка у нас подтянулась но единственно я вот перед тем как записывать этот ролик уже готовился естественно проделывал всю эту процедуру и Видимо для этого домена оно как-то

Speaker A

закро предыдущий заголовок предыдущую картинку я сходу в момент записи не стал уже всё это чистить но в любом случае уже вот тут можно заметить что вот эта og Open разметка она подтянулась то есть здесь сылка и картинка есть и описание и

Speaker A

заголовок единственное не те что мы указывали потому что оно откуда-то с кэша это достало предлагаю чтобы это лучше закрепить Давайте вот на зоне прямо откроем разметку Ctrl F поиском по странице найдём og и видим здесь вот og title дальше двигаем og

Speaker A

description так вот кстати интересно бывает по страницам полазить посмотреть как вообще заполнено что здесь ссылка указана та же что мы указывали ещё какие-то og заголовки og URL причём вот бывает даже интересно по разным сайтам вот так попрыгать И просто посмотреть как они те

Speaker A

или иные теги заполняют тоже можно для себя что-то полезное извлечь дальше Мы ещё про микроразметку будем говорить тоже интересно посмотреть Ну и вот если эту ссылку мы скинем в Telegram то как раз вот всё что мы вот сейчас видели в

Speaker A

вот этих вот протяг появится ну подтянется телеграмом следующий важный момент - это валидность вашего HTML и проверять эту валидность можно с помощью классического V3 валидатора указываете адрес на вашу страницу и проверяете HTML давайте как раз сейчас прямо поэкспериментировать

Speaker A

попробуем сейчас умышленно сделать какую-нибудь ошибку у меня тут уже за время съёмок СШ отвалился Давайте заново подключимся и через Vim откроем индекс HTML и намеренно сделаем какую-нибудь здесь ошибку Ну например вот здесь вот в Бади добавим просто какой-нибудь

Speaker A

дивчини закроем его то есть откроем тег но не закроем при этом то есть это ну ошибка валидации причём для пользователя такие ошибки могут быть вообще незаметны таких ошибок может быть много разных которые как бы валидатор не може даже не

Speaker A

догадываться если вот сейчас после того как мы это ВС Обновили Давайте даже попробуем сейчас обновить и опять просмотр страницы сделать Ну да вот видим незакрытый див Давайте Теперь попробуем ещё раз сделать проверку через валидатор и Спустя какое-то время когда он файл

Speaker A

проанализирует видим что Да у нас здесь есть проблемы с незакрытый элементами некры из этого HTML таких ошибок ворнинг вы видите вот такую вот ссылку Какую информацию она вам несёт Ну из знамена как бы очевидно что это что-то про машины Ну и на этом в принципе всё

Speaker A

какие-то непонятные цифры которые Вообще ни о чём не говорят А когда вам присылают вот такую ссылку Можете ли вы из неё что-то извлечь да можете Вот такие вот адреса как раз называются ЧПУ человека понятные то есть здесь видно

Speaker A

что автомобиль BMW модель М5 и соответственно из этого вы можете понять что это какая-то статья или ссылка на продажу автомобиля в общем этот урол он понятен человеку то есть там нет никаких идентификаторов непонятных чисел здесь же наверное сразу же стоит добавить что

Speaker A

в современном мире https - это обязательное условие если у вас нет защищённого протокола ваши ссылки в топ Ну скорее всего не попадут никогда это тоже очень важный момент вот ещё на просторах интернета я нашёл пару примеркой хороших и не очень

Speaker A

соответственно слева у нас Как видите не информативные абсолютно ссылки индекс ПХП какие-то категории какие-то цифры вообще непонятно справа уже что-то более осмысленная читаемая и причём вот даже если в вашей ссылке есть какие-то ключевые слова то они как бы по запросу

Speaker A

пользовательскому Также будут помогать в ранжировании опять же лучше всего всегда открывать примеры с хорошей оптимизацией и использовать их Давайте вот посмотрим на Ozone здесь SEO всё в порядке посмотрим на ссылку здесь вот прямо транслитом указано название книги дальше

Speaker A

идёт какой-то мусор но этот мусор уже как бы в ранжировании не особо какую-то роль играет важно что идёт в начале ссылки Давайте ещё что-нибудь попробуем открыть вот на примере машин я объяснял Давайте попробуем какую-нибудь автору открыть открываем ссылку вот видим Cars

Speaker A

Audi All то есть здесь нет никаких цифр здесь нет никаких непонятных идентификаторов типа вот такого здесь как бы сразу всё понятно отображается название Ну и вот Давайте первую уже попавшуюся ссылку ткн как бы тоже видим что первая часть ссылки она человеко

Speaker A

читаемая и в конце является уже идентификатор объявления он обязательно должен быть уникальным опять же этим однозначно не стоит пренебрегать Если вы хотите выводить своё приложение в топы следующий момент который стоит разобрать - это Canonical ссылки Давайте вот прямо

Speaker A

на a.ru тоже зайдём посмотрим код страницы вообще вот так вот полезно Я уже это говорил неоднократно полезно заходить периодически смотреть на разметку Давайте посмотрим какие огра теги здесь заполнены Ну tle понятно tion тоже есть ty у нас вебсайт указан

Speaker A

указан даже здесь Обратите внимание ру и также указан ещё Сай то есть большего тегов здесь нет Давай теперь посмотрим на Canonical ссылку в Head HTML документа указывается Линк у которого Proper равняется Canonical и ВФ указывается ссылка здесь Обратите внимание значение

Speaker A

которое указано совпадает с исходной ссылкой то есть здесь как бы случай простой но так на самом деле бывает не всегда сейчас я поподробнее теорию по канони кодам но Давайте ещё перед этим посмотрим на то как это заполнено в

Speaker A

Озоне тоже Ctrl F пишем Canonical здесь уже можно заметить что ссылка несколько Короче как минимум там пропали все quy параметры все sech параметры которые идут после вопросительного знака вся вот эта э вот часть то есть осталась только вот эта

Speaker A

исходная Canonical ссылка которая ведёт непосредственно на эту книгу без лишних данных Если прямо говорить по-простому то Canonical ссылки нужны чтобы избавиться от дубликатов то есть представим что у нас есть две ссылки которые по факту ведут на одну и ту же

Speaker A

страницу такое на самом деле бывает Это не очень хорошо но такое бывает это могут быть какие-то категории фильтры ещё что-то по факту ссылки могут быть разные формироваться на основе разных каких-то данных но вести по итогу на одну страницу и вот в таком случае

Speaker A

необходимо указать Canonical и выбрать одну из ссылок в таком случае вторая индексироваться не будет и робот поисковый не будет воспринимать их как дубликаты любые дубликаты не оригинальность контента это всё плохо дубликаты - это всегда мусорный контент который тратит краули

Speaker A

говырино ссылках откидываются ри параметры то есть выглядит сама ссылка будет вот так Ну и напоследок ещё раз повторю что вот этот вот Линк с Canonical ссылкой добавляется именно в Head HTML документа Итак двигаемся дальше И сейчас поговорим про индексацию

Speaker A

про metatag robots и про Файлик робот txt научимся исключать какие-то файлы из индексации или делать так чтобы робот не переходил По ссылкам в этом файле Давайте начнём с того что попробуем этот Мег добавить сейчас сходу мы конечно ничего не увидим не увидим как он какое

Speaker A

практическое применение он даёт Но посмотрим на значение которое он может принимать и как он по итогу будет работать Итак заполняется вот он таким образом и в контентной части мы указываем определённые значения если мы указываем индекс это значение по

Speaker A

умолчанию то робот страницу будет индексировать если указываем No идекс соответственно он эту страницу индексировать не будет следующее значение Follow также значение по умолчанию наравне идекс это разрешает роботу ходить По ссылкам как не трудно догадаться No Follow соответственно запрещает ходить по каким-то внутренним

Speaker A

ссылкам и также есть ещё значение All которое включает Ну грубо говоря задаёт положительные значения для всех вот этих параметров там ещё есть архив No архив сейчас табличку выведу а но наверное ещё стоит перед этим сказать что для определённых индексатор можно вот таким

Speaker A

вот образом переопределять значение например в Яндексе мы не хотим индексировать в Гугле хотим как бы если есть какая-то определённая специфика с этим можно поиграться вот табличка со всеми значениями со справки Яндекса снизу написано что разрешающие директивы имеют приоритет над запрещающими и они

Speaker A

используются по умолчанию то есть этот метек имеет смысл использовать только если вы хотите что-то запретить здесь в принципе особо добавить больше нечего единственно наверное ещё стоит сказать что их можно перечислять вот так через запятую в одном как бы Мета теге так с

Speaker A

метам разобрались Давайте поговорим теперь про файл Robot txt Это нечто похожее но не совсем здесь мы для разных роботов также можем задавать определённые правила индексирования для каких-то разделов разрешать для каких-то запрещать индексирование соответственно для Гугла для Яндекса для каких-то

Speaker A

других поисковых систем здесь можно использовать нечто похожее на какие-то регулярные выражения в таком более сжатом виде то есть использовать звёзд использовать знак доллара опять же всё это можно посмотреть уже более детально Отдельно Ну и в общем здесь указываются

Speaker A

как я уже сказал какие-то страницы разделы которые мы не хотим индексировать можно сделать так чтобы у нас вообще ни одна страница Не индексировать ну это в принципе я думаю Понятно Вот так вот звёздочкой можно все подразделы под страницы в админке

Speaker A

например запретить из важного этот файл должен находиться в корне вашего проекта чтобы робот смог до него Достучаться сейчас мы на примере какого-нибудь опять же озона посмотрим как это работает ну и здесь опять же можно для Яндекса задавать определённые настройки для Гугла

Speaker A

задавать другие настройки если они какие-то специфичные и для всех остальных можно задать уже все остальные настройки Здесь также указывается ссылка на так называемый Сай Map карта вашего приложения грубо говоря карта сайта и про это более подробно мы в одном из

Speaker A

следующих разделов говорим вот опять же информация со справочника Яндекса здесь указаны директивы которые в этом файле можно использовать и ещё важно наверное добавить что этот файл ограничен по размеру вот в справке Яндекса указана цифра в 500 КБ Так ну и Давайте Вот это

Speaker A

наша многострадальная страница озона которую мы уже столько раз эксплуатировали Давайте теперь на примере озона также посмотрим на Файлик рот txt вот таким вот образом он видит видим User аен Яндекс видим какие-то кастом правила что-то разрешено что-то запрещено всё что не запрещено по

Speaker A

умолчанию считаем что разрешено если что-то надо переопределить грубо говоря разрешаем отдельно вот можно заметить что здесь есть юзер Агент для Гугла и юзер Агент для всех остальных роботов ещё важный момент что этот файл Конечно можно заполнить руками но есть большое

Speaker A

количество генераторов в которых это можно сделать более удобно опять же если зададите вопросом как бы найти эти генераторы труда не составит абсолютно Ну давайте ещё для сравнения a.ru вот у нас тут открыта вкладка в браузере посмотрим как выглядит здесь Robot txt в

Speaker A

принципе всё то же самое отдельно указан Яндекс отдельно указан Google но можно найти здесь ещё вот такие вот ссылки указанные в Сай Map Давайте перейдём и посмотрим что эта ссылка из себя представляет это вот такой xml документ в котором указывается

Speaker A

актуальная структура сайта со всеми ссылками и датами когда эти ссылки изменялись свойств Здесь всего можно указать четыре по крайней мере протокол Яндекса поддерживает четыре это соответственно адрес самой страницы дата последнего обновления частота изменения страницы Там ежедневная раз в месяц раз

Speaker A

в год и приоритет Если у вас есть какие-то страницы менее приоритетные или наиболее приоритетные соответственно от нуля до единицы можно какое-то значение для этой страницы задать файл этот строится как раз из ческих ссылок если есть какие-то дубликаты то естественно

Speaker A

стоит указывать именно канонические ссылки опять же есть ограничения по размеру 50 Мб у Яндекса но при этом важно понимать что если у вас огромное количество ссылок страниц и вам этих 50 МБА не хватит или вы хотите создать какую-то древовидную структуру вот это

Speaker A

вот как бы базовый Сай Map который вот в корне лежит это индексный файл он прямо так и называется и он может ссылаться на другие сайт мапы вот вот как на скрине пример Сай Map 1 Сай Map 2 Ну и опять же

Speaker A

чтобы индексатор узнал о том что у вас есть вот эта карта сайта Вам необходимо в OT txt файле указать ссылку на ваш инк S Map В общем комбинация файла robots и sitemap - это залог хорошей правильной индексации но здесь важно тоже понимать

Speaker A

что вот например sitemap вам не нужен если у вас там 5 10 20 страниц это необходимо только если у вас большая вложенная сложная структура ссылок страниц и вы хотите чтобы робот гарантированно обошёл нужные канонические ссылки проиндексировали их и вот в купе с Robot txt индексация

Speaker A

будет правильной какие-то мусорные страницы вы исключите какие-то добавите в индексацию и всё будет хорошо опять же важно понимать что вот этот огромный xml файл он не заполняется руками это делается автоматикой Либо вы каким-то скриптом сами его заполняете либо

Speaker A

используете какие-то готовые генераторы двигаемся дальше я уже неоднократно упоминал что есть некий краули бюджет и что мусорные страницы дубликаты - Это плохо Давайте поймём Почему Понятное дело что ресурсы того самого поискового робота который прыгает по вашим страницам он как бы ограничен цифра

Speaker A

взята с потолка и она ничего не означает Но представим что робот может обойти 20 страниц из этих 20 страниц у вас Одна страница индексируется которая отображает 404 какие-то внутренние админские страницы индексируются которые вообще индексироваться не должны при этом есть дубликаты какие-то вложенные

Speaker A

страницы Ну и вот во всём этом важно количество страниц которые у вас действительно есть на сайте и чистота их обновления соответственно если чаще страницы обновляются тем чаще их нужно индексировать и тем больше краули гой бюджет будет расходоваться но опять же

Speaker A

повторюсь что это вот над этим важно заморачиваться только если у вас много страниц Они часто обновляются Если же у вас там 10-15 страниц небольшое какое-то приложение то есть вещи над которыми важнее заморачиваться важнее улучшать проработать качество контента работу с

Speaker A

ключевыми словами настроить огра вот всё предыдущее о чём я рассказывал но когда речь идёт уже за какие-то доли процентов чтобы попасть в топы ранжирования на первой странице когда вот крупные всякие маркетплейсы магази товаров борятся между собой там уже понятное дело каждая

Speaker A

мелочь играет большую роль двигаемся дальше и следующая тема важнейшая тема - это различные метрики производительность так называемый Core Web vitals которые были представлены Гуглом всякие скорости первой отрисовки время до первой интерактивности когда пользователь может с контентом уже взаимодействовать также

Speaker A

существуют определённые инструменты которые позволяют измерить доступность в вашем приложении проверить контрастность цветов как они влияют на зрение Как скрин ридеры работают с вашим приложением как люди с ограниченными возможностями его могут использовать опять же там людей которые по-разному воспринимают цвета дальтонизм

Speaker A

куриная слепота и так далее ну и соответственно Можно также пройтись по сеу оптимизации и определёнными инструментами измерить качество тех настроек которые вы сделали ну и Давайте начнём с производительности С тех самых гугловский метрик три важнейших показателя Первое - это

Speaker A

время когда самый последний контент на странице у вас отрисовать то есть вот полностью страница была загружена если у вас весь бандл ваше фронтенд приложение весит 200 КБ оно загрузится быстро значит у вас всё хорошо Если бандл у вас

Speaker A

весит 5 Мб вы его вообще никак не оптимизировали у вас всё одним цельным куском подгружается то время у вас будет там условно 10 секунд загрузки особенно важно пользователи мобильных устройств где интернет не всегда стабильный здесь вот на скрине выделяют именно lsp когда

Speaker A

последний контент был загружен но есть также ещё Метрика fsp когда First контент был загружен То есть у вас страница может подгружать как-то кусками лениво и вот время до первой отрисовки оно тоже важно в этом видео мы поговорим только про метрики как их измерять как

Speaker A

их исследовать анализировать и говорить про то как их улучшить мы естественно не будем это отдельная большая тема И кстати на канале у меня уже есть ролик по оптимизации фнн приложений там конечно Не всё разобрано но большая часть по оптимизации присутствует

Speaker A

следующий важный показатель - Это First Input Delay это время до первой интерактивности когда пользователь может начать что-то вводить нажать какую-то кнопку куда-то перейти сделать какое-то действие и на самом деле здесь может показаться что время которое мы здесь получаем оно равно времени когда

Speaker A

страница у нас вот полностью загру вая Метрика кото мы разбирались но это далеко не всегда так потому что какие-то части у нас могут погружаться лениво асинхронно и пока они загрузят мы уже можем начать со страницей взаимодействовать следующая Метрика

Speaker A

отвечает за визуальную стабильность Я думаю вы неоднократно сталкивались с таким что у вас загружается страница вы хотите нажать на какую-нибудь кнопку потом бах у вас подгружается где-то сверху блок кнопка смещается и вы нажимаете на что-то не то вот такого вот

Speaker A

быть не должно всегда должна оставаться стабильной И даже если какие-то блоки у вас подгружаются асинхронно вместо них должен быть какой-нибудь скелетон какая-нибудь заглушка для того чтобы страница не съезжала для того чтобы юзабилити было комфортным для того чтобы вы нажимали именно на ту кнопку на

Speaker A

которую хотите и чтобы какой-нибудь скачок не заставил вас что-то купить оплатить удалить что-то лишнее Ну я думаю вы понимаете Так давайте теперь поговорим про то как эти метрики измерять напоминаю что мы Лои в начале ролика приложение на Облачный сервер

Speaker A

есть такой сервис тоже Гугловский который называется page Speed insights здесь есть документация опять же если интересно разобраться посмотреть как опиш работает как метрики как это всё оценивается можете почитать сейчас мы в это всё углубляться не будем давайте рассмотрим на примере нашего сайта как

Speaker A

это всё работает и какие метрики он нам покажет вводим адрес наш вид dey Test и ждём Как видите здесь можно посмотреть отчёт про мобилки и про компьютер с производительности У нас всё в порядке и это логично у нас простенькая амэлька

Speaker A

без какого-либо жава скрипта Но вот здесь уже можно увидеть значение по тем самым Метрика которые мы разбирали время Первой загрузки время когда загрузился какой-то последний контент на странице скорость индексации время пока мы заблокированы до тех пор пока мы не

Speaker A

можем взаимодействовать со страницей Ну и вот вот этот самый layout Shift Когда у нас есть какие-то смещения здесь это значение ноль потому что смещений у нас нет какого-то прыгающего асинхронного контента у нас естественно нет следующее - это accessibility та самая доступность

Speaker A

специальные возможности здесь он что-то ругается на viewport но это не критично опять же есть рекомендации потому что не используются https я говорил что это очень важно также снизу можно заметить что он ругается на Content Security poce здесь скорее как предупреждение против

Speaker A

xss Атак этот отчёт на самом деле не очень информативен потому что у нас одна Тимка с минимальным каким-то наполнением Давайте вот попробуем прямо зоновской страницу целиком загнать и посмотреть что анализ выдаст уже там видим что здесь сразу выдаются данные по

Speaker A

производительности они собираются на основе последнего месяца пользователей которые пользовались приложением с мобильных устройств компьютеров Ну вот снизу всё написано это данные со всех версий Chrome то есть здесь видим что что по производительности в целом всё отлично На компьютере ещё лучше

Speaker A

загружается быстрее в среднем никаких прыжков Скачков нету пользователь сразу может работать с контентом сразу оговорюсь что это не реклама озона просто знаю что у озона всё в целом неплохо и SEO и с производительностью Поэтому вот например я его именно и

Speaker A

выбрал видим что анализ у нас завершился и тут по производительности уже не всё так хорошо но важный момент что эти значения могут меняться если сверху это статистика на основе того как работают пользователи то это статистика Уже именно анализа и она может от анализа к

Speaker A

анализу меняться Ну из этого отчёта Мы видим что чуть больше секунды занимает время полной загрузки что уже достаточно долго Ну И время индексации почти 2 секунды если округлять большую сторону тоже достаточно долго и опять же это не значит что если вам этот отчёт показал

Speaker A

красные цифры что у вас всё плохо здесь Всё зависит от страницы от контента на этой странице если эта страница супер наполненная большая сложная объёмная то эти цифры могут быть даже очень хорошими В общем здесь надо смотреть комплексно на картину и не пугаться

Speaker A

красным цифрам здесь же вот снизу можно посмотреть как загружалась страница он делает скриншоты их можно посмотреть А ну да вот тут рекомендация нам устраните блокирующие изображения то есть какие-то изображения можно лениво подгрузить Ну и вот есть какие-то ещё рекомендации

Speaker A

уменьшите влияние стороннего кода для изображения незаданные атрибуты ширины и высоты структура дом слишком большая то есть какие-то моменты можно оптимизировать улучшить Давайте теперь глянем на отчёт по доступности здесь в целом всё Тоже неплохо 73 из 100 и сразу

Speaker A

же здесь есть какие-то рекомендации названия кнопок недоступны скрин ридерам Здесь же есть пояснение Что это значит если у кнопки Нет названия доступного скрин ридером пользователи услышат слово кнопка и не поймут для чего она нужна то есть речь идёт про слабовидящих людей ну

Speaker A

и здесь же сразу снизу представлены скрины кнопок которые вот плохо читаются скажем так далее видим что для каких-то изображений не заданы атрибуты Alt опять же для каких-то изображений это не нужно Здесь тоже надо анализировать Ну вон видим что это как раз какие-то иконки

Speaker A

вот тоже про контрастность я как-то уже говорил цвет фона и каких-то кнопок слишком контрастный опять же для людей с проблемами со зрением это может быть критично Ну и вот опять же есть ещё здесь ряд каких-то рекомендаций здесь в

Speaker A

целом всё хорошо с точки зрения надёжности и безопасности 91 из 100 отличный показатель единственное вот на что ругается это на то что запрашивается местоположение при загрузки страницы но как бы для озона критично важно знать где пользователь находится вот тут

Speaker A

дальше как раз рекомендации по сканированию индексирования есть ссылки проблемные есть страницы которые недоступны для индексации но возможно это сделано специально опять же вот этот вот анализ он просто подсвечивает моменты для того чтобы Вы могли их проанализировать сейчас речь шла про

Speaker A

page Speed insights Но на самом деле в браузере есть похожий инструмент кстати page Speed insights на основе него и делает анализ а F12 Называется он lth здесь делаем настройки девайс Мобил или десктоп указываем категории по которым мы хотим сделать проверку и нажимаем

Speaker A

анализ ждём пока анализ пройдёт это какое-то время у вас займёт и здесь в принципе то же самое вот как видите сейчас анализ показал performance 98 То есть это прямо вообще отличный показатель всё зелёное всё супер всё хорошо страница загрузилась крайне

Speaker A

быстро меньше чем за одну секунду здесь ряд рекомендаций В общем видите что это практически то же самое опять же на это всё влияют прямо уже детали детали вплоть до того как вы обрабатывается изображения Какие изображения грузите лениво Для каких изображений задаёте

Speaker A

Альт также Если есть возможность стоит указывать src сет то есть для для разных размеров устройств задавать разные размеры картинок то есть нет смысла грузить какую-то картинку 4К если пользователь заходит с мобилки с маленького экрана опять же все эти

Speaker A

размеры можно задавать оптимизировать улучшать но опять же повторюсь Только если в этом есть необходимость упариванием интернет-магазине в какие-то вот прямо детали детали детали никакого смысла абсолютно не имеет также Вот этот доступность про которую я говорил контрасты удобства юзабилити чтобы у вас

Speaker A

всё табами переключалось фокус устанавливался в нужные элементы кейпом модальные окна закрывались стрелочками какие-нибудь пункты меню переключались на Enter форма самила вот эти вот все удобства которые вы создаёте Ну это как бы всё помогает все нативные HTML элементы кстати так и работают Вот

Speaker A

Select он будет переключаться стрелочками на Enter если нажмёте у вас выберется пункт этого селекта если вы используете HTML форму и нажмёте enter то форма Зами Ну с этим думаю понятно двигаемся дальше уже неоднократно в ходе этого ролика я говорил про важность

Speaker A

поддержки мобильных устройств и чтобы они работали как можно быстрее как можно лучше большая часть пользователей сейчас это пользователи именно мобильных устройств опять же тоже повторюсь потому что уверен в комментах будут писать Всё зависит от специфики вашего приложения где-то возможно мобилки вообще не нужны

Speaker A

ну вот не нужны А в каком-нибудь маркетплейсе вся аудитория практически это пользователи мобильно устройств Ну в общем думаю про то что поддерживать мобильные устройства важно Это уже и так понятно но Давайте теперь поговорим про AMP AMP вообще Это технология которая

Speaker A

позволяет разрабатывать быстрые мобильные приложения и при этом Google такие приложения учитывает и лучше как бы их ранжируются продвигает в топ вот Ару Я видел AMP Обратите внимание как это выглядит Ну как бы внешний вид нам ничего не говорит но уже можно заметить

Speaker A

что вот эта страница она отличается от той которая была открыта ранее то есть она видим какая-то такая более упрощённая про саму технологию как бы я Рассказывать особо не буду как ей пользоваться если зададите вопросом он полно статей но можно заметить что вот в

Speaker A

справочнике Гугла прямо написано что ам - это фреймворк бла-бла-бла бла-бла-бла и с помощью него можно повысить эффективность здесь вот есть Прямо ссылка на документацию Давайте откроем заглянем Что там у нас есть Ну да здесь вот можно почитать ознакомиться

Speaker A

фреймворк веб компонентов Ну в общем даже расшифровка AMP говорит нам о том что это позволяет делать ускоренные мобильные как бы приложения мобильные страницы accelerated Mobile pages но здесь важный момент что за счёт специальных тегов которые добавляются при разработке AMP страниц Google

Speaker A

понимает что это AMP и начинает лучше их продвигать потому что работают они быстрее также в приложении важно настроить правильно базовые редиректы например на уровне НС конфига с www на без vvv с http на https чтобы http у вас

Speaker A

вообще не фигурировала со страница без слэша в конце на странице со сше в конце В общем грубо говоря чтобы у вас всегда использовался https протокол чтобы у вас не было дубликатов ссылок с www без www чтобы у вас всегда вот те самые

Speaker A

канонические ссылки как бы были в таком унифицированной виде Ну и последнее про что мы сегодня поговорим - это микроразметка здесь лучше сразу Взглянуть на примеры нежели что-то пытаться рассказать вот сходу в первой ссылке микроразметка есть во второй ссылке микроразметки нет Как

Speaker A

видите в первой ссылке отображается рейтинг фильма звёздочки количество отзывов вот здесь прямо в статье написано первый с микроразметка второй без неё там прямо есть определённые типы микроразметки чуть позже технически глянем как это делается Вот второй пример вторник 6 августа в такие-то

Speaker A

фильмы в таких-то кинотеатрах то есть то суть микроразметки дать пользователю именно на странице поиска какую-то дополнительную информацию Что также может улучшить как бы его продвижение ранжирования смотрим на третий пример здесь реализованы хлебные крошки в первом варианте они есть Как видите

Speaker A

обувь женская Во втором варианте мы видим только ссылку то есть первый вариант с микроразметка второй вариант без неё Давайте заглянем в справочник посмотрим как вообще эта микроразметка пишется здесь вот написано Для чего она нужна семантический стандарт всякое такое примеры сразу показаны если ниже

Speaker A

посмотрим то пишется она достаточно легко указывается item scope это с в котором как раз вот эта микроразметка действует и затем указывается item про для того Типа разметки который мы указали то есть в данном случае item Type у нас organization то есть будет

Speaker A

отображаться контактная информация о вашей организации это адрес номер телефона почта и у каждого вот такого типа есть свои какие-то аргументы свои пропсы так называемые item То есть у нас есть не есть адрес есть телефон это всё указано Вот на этом сайте schema.org то есть там

Speaker A

для каждого типа Можно посмотреть какие свойства можно заполнить тут же на schema org можно открыть валидатор либо Вставить ссылку либо фрагмент кода и он провалит что вы разметку заполнили правильно Ну и последнее о ЧМ Хотелось бы поговорить Это Севе Site rendering и

Speaker A

Single page Application кто-то когда-то где-то говорил писал что Single page Application сейчас индексаторы умеют анализировать нормально индексировать но кто бы тут что ни говорил Если вы хотите нормальное продвижение нормальную оптимизацию нормальное SEO без сервер сайт рендеринга здесь не обойтись одними

Speaker A

средствами SPA вы никогда нормально индексироваться не будете и и конкурировать с сайтами на ССР вариантов у вас будет ноль и на этом друзья мы заканчиваем Разобрали все самые основные темы которые связаны с SEO именно с точки зрения разработчика стараюсь делать ролики

Speaker A

визуально приятными насыщенными объёмными чтобы вы зашли и от а до я с Темой ознакомились Надеюсь у меня это хотя бы частично получается по крайней мере с каждым своим роликом я стараюсь делать лучше лучше лучше и продумывать структуру план Ну и напоследок как

Speaker A

обычно Попрошу тебя Если ты досмотрел ролик если ты считаешь что он хорош если он тебе понравился пожалуйста поставь лайк и напиши комментарий это очень помогает продвижению видео Ну и я в свою очередь с большим скажем так удовольствием буду записывать для вас

Speaker A

контент Ну и на этом всё друзья Всем спасибо за просмотр всем до встречи и пока

Topics:SEOweb developmentmeta tagscanonical linksrobots.txtpage indexingranking factorsOpen Graphmobile optimizationGoogle AMP

Frequently Asked Questions

What are the essential meta tags web developers should focus on for SEO?

Web developers should focus on canonical links, meta tag robots, and the robots.txt file to control page indexing and avoid duplicate content issues.

How does mobile optimization impact SEO according to the video?

Mobile optimization improves user experience and site speed, which are critical ranking factors. The video also highlights Google AMP as a technology to enhance mobile performance.

What tools are recommended for measuring SEO performance?

The video recommends using tools like Lighthouse and PageSpeed Insights to measure performance metrics such as bundle size, page speed, and overall SEO health.

Get More with the Söz AI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

App Store Google Play

Or transcribe another YouTube video here →