Полезные видео о фронтенде. Подпишись на Rutube

Топ 10 HTML-тегов для улучшения SEO сайта

2 года назад·4 мин. на чтение

В этой статье мы обсудим 10 лучших HTML-тегов, которые вам нужно знать для улучшения SEO, а также их код и то, как их эффективно использовать.

Как владелец бизнеса или администратор веб-сайта, вы, должно быть, слышали о термине SEO, который расшифровывается как поисковая оптимизация. Это относится к приемам и методам, которые могут помочь веб-сайту занять более высокое место на страницах результатов поисковой системы по релевантным ключевым словам. Чтобы достичь лучшего SEO, вы должны хорошо понимать HTML-код вашего сайта. HTML, или HyperText Markup Language, является языком программирования, используемым для создания веб-страниц. HTML-код состоит из различных элементов или тегов, которые определяют структуру и содержимое веб-страницы. Использование правильных HTML-тегов может улучшить SEO вашего сайта, так как алгоритмы поисковых систем используют эти теги для понимания содержания ваших страниц.

1. Тег `title`

Тег <title> используется для указания заголовка веб-страницы. Это важно для SEO, потому что поисковые системы используют заголовок для отображения в результатах поиска. Он должен содержать основное ключевое слово для страницы. Пример:

<head>   
  <title>Топ HTML тегов для SEO | YourWebsite.com</title>   
</head>

2. Мета-тег description

Тег <meta name="description"> используется для предоставления краткого описания веб-страницы. Это также важно для SEO, потому что поисковые системы используют это описание в результатах поиска. Он должен содержать основное ключевое слово для страницы. Пример:

<head>   
<meta name="description" content="Узнайте лучшие советы и методы SEO, чтобы повысить рейтинг вашего сайта в поисковых системах.">   
</head>

3. Теги заголовка

Тег <h1> используется для указания основного заголовка веб-страницы. Это важно для SEO, потому что поисковые системы используют его, чтобы понять основную тему страницы. Он должен содержать основное ключевое слово для страницы. Есть шесть тегов заголовка, причем h1 является наиболее важным и используется для основного заголовка страницы. Теги заголовков следует использовать в порядке убывания важности, например h2 используется для подзаголовков, h3 для под-подзаголовков. Пример:

<h1>Топ HTML тегов для SEO</h1>

4. Тег `img` с атрибутом `alt`

Тег img с атрибутом alt используется для описания содержимого изображения на веб-странице. Он отображается в виде текста, когда изображение не может быть отображено, а также помогает поисковым системам понять контекст и релевантность изображения. Альтернативный текст должен быть описательным, включать основные ключевые слова и не превышать 125 символов. Пример:

<img src="image.jpg" alt="Топ HTML тегов для SEO">

5. Тег `a`

Тег <a> используется для создания ссылок на другие веб-страницы. Это важно для SEO, потому что это помогает поисковым системам понять отношения между страницами. Текст тега должен содержать основное ключевое слово для страницы, на которую делается ссылка. Пример:

<a href="https://www.example.com/seo-tips">Топ HTML тегов для SEO</a>

6. Тег футера `footer`

Тег <footer> используется для определения раздела нижнего колонтитула веб-страницы. Это важно для SEO, потому что оно предоставляет дополнительную информацию о веб-сайте и его содержании. Он может содержать ссылки на связанные страницы и профили в социальных сетях.

<footer>   
<p>Copyright © YourWebsite.com</p>   
<a href="https://www.facebook.com/YourWebsite">Facebook</a>   
<a href="https://twitter.com/YourWebsite">Twitter</a>   
</footer>

7. Схема разметки

Разметка схемы это тип структурированных данных, которые могут быть добавлены на веб-страницу, чтобы помочь поисковым системам лучше понять контент. Он предоставляет дополнительные сведения о странице, такие как ее тип, автор, дата и местоположение. Схема разметки может улучшить видимость и релевантность страницы в поисковой выдаче и увеличить рейтинг кликов. Пример:

<div itemscope itemtype="http://schema.org/Recipe">  
  <h1 itemprop="name">Recipe Title Here</h1>  
  <img itemprop="image" src="image.jpg">  
  <p itemprop="description">Recipe description here.</p>  
  <ul>  
    <li itemprop="recipeIngredient">Ingredient 1</li>  
    <li itemprop="recipeIngredient">Ingredient 2</li>  
  </ul>  
  <ul>  
    <li itemprop="recipeInstructions">Step 1</li>  
    <li itemprop="recipeInstructions">Step 2</li>  
  </ul>  
</div>

8. Теги списков

Теги списка используются для создания списков элементов на веб-странице. Существует три тега списка, <ul> и <ol> используются для неупорядоченных и упорядоченных списков соответственно, а <li> используется для перечисления отдельных элементов. Списки помогают упорядочить содержимое страницы и облегчить пользователям сканирование и чтение. Пример:

<ul>  
  <li>List Item 1</li>  
  <li>List Item 2</li>  
</ul>  
  
<ol>  
  <li>List Item 1</li>  
  <li>List Item 2</li>  
</ol>

9. Канонические ссылки

Канонические ссылки используется для указания предпочтительного URL-адреса веб-страницы при наличии нескольких версий одной и той же страницы. Это помогает избежать проблем с дублированием контента и гарантирует, что поисковые системы индексируют и ранжируют правильную страницу. Канонический тег должен быть добавлен в раздел заголовка предпочтительного URL-адреса. Пример:

<link rel="canonical" href="https://www.example.com/preferred-url/">

10. Теги для мобильных устройств

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

<meta name="viewport" content="width=device-width, initial-scale=1">  
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">

Итоги

В заключение, использование правильных HTML-тегов может значительно улучшить SEO вашего сайта и помочь ему занять более высокое место в результатах поиска. Реализуя топ-10 HTML-тегов, обсуждаемых в этой статье, вы можете сделать свой сайт более удобным для поисковых систем и удобством для пользователя, а также опередить своих конкурентов. Не забывайте использовать теги правильно, в соответствии с их целевым назначением, и избегайте чрезмерного использования или наполнения их нерелевантными ключевыми словами. Хорошо оптимизированный веб-сайт с высококачественным контентом и хорошим пользовательским опытом является ключом к долгосрочному успеху SEO.

Frontend HTML SEO

Хуки useTransition и useDeferredValue в ReactJS 18

2 года назад·3 мин. на чтение

В React 18, релиз которого произошел в марте 2022, появилось много новых инструментов для написания производительных и отзывчивых приложений. Одним из заметных изменений является механизм рендеринга с новой ключевой концепцией: конкурентный рендеринг (concurrent rendering).

В этой статье повнимательнее рассмотрим два новых хука: useTransition() и useDeferredValue(). Эти два хука дают возможность определять приоритет обновления состояния, или, скорее, указывать, является ли обновление менее важным, чем другие, и откладывать его в пользу более срочных.

Какое обновление можно считать срочным, а какое обычным?

Срочные обновления: отражают прямое взаимодействие, такое как набор текста, клики, нажатия и т. д., т.е. то с чем взаимодействует пользователь. Когда вы вводите текст в поле ввода, вы хотите сразу увидеть введенный вами текст. В противном случае UI будет казаться медленным и подлагивать. Поэтому мы хотим сделать такие обновления приоритетным.
Обычные обновления: переход пользовательского интерфейса из одного вида в другой. Пользователи знают, что представление должно измениться или обновиться (например, когда ожидается ответ на запрос данных). Даже если есть небольшая задержка, это можно рассматривать как ожидаемое поведение, и это не будет восприниматься как медлительность приложения.

Итак, теперь подробнее рассмотрим эти два новых хука, объясним, когда их можно использовать, и посмотрим на конкретные примеры того, как их реализовать.

Хук `useTransition()` и функция `startTransition()`

До React 18 все обновления состояния помечались как "срочные". Это означает, что все обновления состояния обрабатывались одинаково с одинаковым приоритетом. С помощью useTransition() теперь можно пометить некоторые обновления состояния как несрочные.

Когда использовать `useTransition()` ?

Одним из примеров может быть список товаров с параметрами фильтрации. Когда вы переключаете чекбоксы, чтобы выбрать размер или цвет одежды, вы ожидаете, что чекбоксы сразу же отобразят отмеченное или снятое состояние. А сам список товаров, которые необходимо обновить согласно фильтрам, может быть отдельным и менее срочным обновлением.

Как использовать `useTransition()` ?

function App() {
 const [isPending, startTransition] = useTransition();
 const [searchQuery, setSearchQuery] = useState('');
 
 // запрос данных, который занимает некоторое время
 const filteredResults = getProducts(searchQuery);
 
 function handleQueryChange(event) {
   startTransition(() => {
     // оборачивая setSearchQuery() в startTransition(),
     // мы помечаем эти обновления как менее важные
     setSearchQuery(event.target.value);
   });
 }
 
 return (
   <div>
     <input type="text" onChange={handleQueryChange} />
 
     {isPending && <span>Loading...</span>}
     <ProductsList results={filteredResults} />
   </div>
 );
}

Хук `useDeferredValue()`

useDeferredValue() очень похож на useTransition() в том, что он позволяет отложить несрочное обновление состояния, но применяется его к части дерева. Это похоже методы debounce и throttle, которые мы часто используем для отложенных обновлений. React будет работать с такими обновлениями, как только завершатся срочные обновления.

Когда использовать `useDeferredValue()`?

С помощью useTransition() вы сами решаете, когда конкретное обновление состояния может быть помечено как менее срочное. Но иногда такой возможности может и не быть, например, если фрагмент кода находится в сторонней библиотеке. В таких случаях можно воспользоваться хуком useDeferredValue(). С помощью useDeferredValue() вы можете обернуть значение и пометить его изменения как менее важные и, следовательно, отложить повторный рендеринг. useDeferredValue() будет возвращать предыдущее значение до тех пор, пока есть более срочные обновления для завершения и отображения дерева с обновленным значением.

Как использовать `useDeferredValue()` ?

function ProductsList({ results }) {
 // deferredResults получат обновленные данные
 // когда завершатся срочные обновления
 const deferredResults = useDeferredValue(results);
 
 return (
   <ul>
     {deferredResults.map((product) => (
       <li key={product.id}>{product.title}</li>
     ))}
   </ul>
 );
}

Итоги

Эти два новых хука позволяют сделать интерфейсы максимально отзывчивыми, даже в сложных приложениях с большим количеством повторных рендерингов, отдавая приоритет обновлениям, которые имеют решающее значение для взаимодействия с пользователем, и помечая некоторые другие как менее важные. Это не означает, что нужно оборачивать все состояния этими хуками. Их следует использовать в крайнем случае, если приложение или компоненты не могут быть оптимизированы другими способами (например, при помощи lazy loading’а, пагинации, веб-воркеров и т. д.).

Frontend React React hooks

Топ 10 HTML-тегов для улучшения SEO сайта

В этой статье мы обсудим 10 лучших HTML-тегов, которые вам нужно знать для улучшения SEO, а также их код и то, как их эффективно использовать.

1. Тег title

2. Мета-тег description

3. Теги заголовка

4. Тег img с атрибутом alt

5. Тег a

6. Тег футера footer

7. Схема разметки

8. Теги списков

9. Канонические ссылки

10. Теги для мобильных устройств

Итоги

Хук useTransition() и функция startTransition()

Когда использовать useTransition() ?

Как использовать useTransition() ?

Хук useDeferredValue()

Когда использовать useDeferredValue()?

Как использовать useDeferredValue() ?

Итоги

1. Тег `title`

4. Тег `img` с атрибутом `alt`

5. Тег `a`

6. Тег футера `footer`

Хук `useTransition()` и функция `startTransition()`

Когда использовать `useTransition()` ?

Как использовать `useTransition()` ?

Хук `useDeferredValue()`

Когда использовать `useDeferredValue()`?

Как использовать `useDeferredValue()` ?