Одна из лучших сторон создания приложения и восторга от того, что вы создали, — это когда гораздо больше людей видят и используют то, что вы создали. Ух.
Вот тут-то и приходит на помощь SEO. SEO — это аббревиатура от «Поисковая оптимизация».
По сути, это означает улучшение вашего веб-сайта с помощью данных, которые веб-сканеры могут прочитать, и правильное позиционирование вашего веб-сайта, чтобы пользователи могли его найти и с ними взаимодействовать.
Выполнение маякового теста
Первый шаг, который необходимо предпринять при улучшении SEO, — это выполнить маяк-тест в консоли браузера, чтобы увидеть, как веб-сайт работает в Интернете.
Маяк-тест выявляет производительность веб-сайта в Интернете и способы его улучшения. Улучши это. Есть много способов улучшить возможности сканирования веб-сайта — способность поисковой системы получать доступ к веб-странице и сканировать ее содержимое. Вот некоторые из них:
Метатеги:Это HTML-теги, которые помещаются в элемент заголовка и используются для предоставления важной информации о странице. Информация, представленная в метатеге, очень информативна и отображается в виде заголовка и описания страницы. Это предоставляет роботам-сканерам информацию, необходимую им для рекомендации веб-страницы пользователям, которые ищут информацию, которую предоставляет ваша страница. Метаданные каждой страницы должны нести специфичную для нее информацию. В React этого может быть сложно добиться, поскольку родительский HTML-код одинаков для всего приложения. Решением этой проблемы является React Helmet.
<Helmet>
<title>Page Title</title>
<meta
name='description'
content='A very descriptive description of the page'
/>
</Helmet>
Карта сайта. Файлы Sitemap могут быть в формате HTML или XML.
Файл XML карта сайта предоставляет информацию об основных страницах веб-сайта для робота сканирования Google. По сути, это создает для Google дорожную карту для лучшего сканирования веб-сайта. Карта сайта предоставляет важную информацию, такую как маршруты к определенным страницам приложения, время последнего обновления и частота обновления информации на странице. Лучше всего включать в файл карты сайта страницы, которые не защищены паролем и являются частными, поскольку информация на этих страницах предназначена только для пользователей и не предназначена для общего использования.
XML-карта сайта должна быть написана в определенной структуре и с соблюдением правил, указанных в документации Schemas.org; это означает, что он должен быть заключен в открывающий и закрывающий тег набора URL-адресов. Включите запись тега URL-адреса для каждого URL-адреса в качестве родительского тега XML. и дочерняя запись loc-тега для каждого родительского тега URL-адреса.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://placedog.net</loc>
<lastmod>2005-01-01</lastmod> <!-- optional -->
<changefreq>monthly</changefreq> <!-- optional -->
<priority>0.8</priority> <!-- optional -->
</url>
<url>
<loc>https://placedog.net/500/380</loc>
<lastmod>2005-01-01</lastmod> <!-- optional -->
<changefreq>monthly</changefreq> <!-- optional -->
<priority>0.8</priority> <!-- optional -->
</url>
</urlset>
URL-адрес вашей карты сайта должен быть включен в файл robot.txt.
HTML-карта сайта реализована в основном для пользователей. Он служит таблицей содержания, позволяющей пользователям лучше перемещаться по веб-сайту; знать все доступные и важные страницы сайта и легко получать к ним доступ.
Структурированные данные. Это схема, которая помогает отображать важные данные при поиске элементов в Интернете. Информация в структурированных данных — это информация, которую мы хотим найти в первую очередь, когда посетители ищут наш продукт в Интернете; такая информация, как имя, цена, наличие, марка, цвет, скидка, размер и так далее. Например, когда посетитель ищет в Интернете гриль, лучший способ гарантировать, что ваш продукт будет одним из первых результатов поиска, — это предоставить информацию, отвечающую на вопросы, ответы на которые посетители хотят получить больше всего.
Есть несколько вариантов: обширные рекомендации по структурированным данным и их типам в документации Schemas.org. Структурированные данные могут быть записаны в таких форматах, как JSON-LD, Microdata и RDFa. Google рекомендует JSON-LD, поскольку его проще всего поддерживать для больших баз кода. Структура JSON-LD записывается в теге скрипта, а затем встраивается в метатег страницы продукта.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"aggregateRating": {
"@type": "AggregateRating",
"bestRating": "100",
"ratingCount": "24",
"ratingValue": "87"
},
"image": "https://placedog.net/500", // placeholder image
"name": "Outdoor Charcoal grill",
"offers": {
'@type': 'Offer',
"availability": "https://schema.org/InStock",
"itemCondition": "https://schema.org/NewCondition",
"highPrice": "1495",
"lowPrice": "1250",
"priceCurrency": "NGN",
}
}
</script>
Цель структурированных данных — достичь такого результата.
На изображении выше посетитель имеет достаточно информации, чтобы принять решение о типе гриля, цене, названии конкретного гриля и продавце.
Канонический тег. Это HTML-тег, который определяет наиболее важную страницу для сканирования и предотвращает сканирование дубликатов страниц Google. Добавление канонического тега на страницу сообщает поисковым системам, что это именно та страница, с которой они должны показывать контент в своих результатах. Канонический тег, часто называемый канонической ссылкой, помещается в элемент заголовка отображаемой страницы. В React он помещается в элемент Helmet указанной страницы.
<link rel="canonical" href="https://placedog.net/500" />
robots.txt:Индексирование страниц, подлежащих сканированию, — очень важный этап SEO-оптимизации. В файле robots.txt перечислены страницы, которые необходимо посетить и проиндексировать веб-сканерами Google, а также использовать для управления трафиком сканирования на веб-сайте. По сути, этот файл помогает контролировать то, что сканируется, действуя как знак остановки для веб-сканеров на выбранных страницах, то есть страницах, защищенных паролем, и страницах, специфичных для пользователя; Ограничение страниц, подлежащих индексированию, может быть достигнуто путем использования ключевого слова disallowed перед перечислением страницы, которую мы не хотим индексировать. Файл robot.txt обычно находится в корневой папке (общей папке) и обычно включает запрещенные страницы и URL-адрес карты сайта.
User-agent: * Disallow: /payment Disallow: /auth/login Disallow: /account/ Sitemap: https://placedog.net/sitemap.xml
Запрещенные страницы — это страницы, специфичные для пользователей, которые мы не хотим индексировать.
A11Y :Доступность к Интернету — это основа создания чего-либо для Интернета. По сути, это проектирование и создание веб-сайтов, которыми может пользоваться каждый, устранение барьеров, которые могут затруднить доступ к информации для людей с ограниченными возможностями. Это позволяет роботам-сканерам и программам чтения с экрана легко интерпретировать контент в Интернете. Создание с учетом доступности означает соблюдение определенных правил, некоторые из которых включают, среди прочего, семантический HTML, маркировку форм, заголовок изображения и теги alt.
Поисковая оптимизация — очень важная часть создания Интернета, она гарантирует, что то, что вы создали, попадет к тем, кому нужно это увидеть. Оптимизация для поисковых систем также означает, что вы создадите приложение, которое соответствует надлежащим рекомендациям и доступно каждому. Дополнительную информацию об оптимизации для Интернета см. в разделе Специальные возможности, документации Google Введение в robots.txt, Сканирование и индексирование.
Я надеюсь, что эта статья поможет вам, и вам понравится ее читать так же, как мне понравилось ее писать.
Стеккадемический
Спасибо, что дочитали до конца. Прежде чем уйти:
- Пожалуйста, рассмотрите возможность аплодировать и следовать автору! 👏
- Следуйте за нами в Twitter(X), LinkedIn и YouTube.
- Посетите Stackademic.com, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.
