Если все ваши страницы в вашем приложении создаются вручную, вы можете пропустить эту статью, потому что URL-адрес основан на имени файла.
Эта статья полезна, если вы создаете страницы на основе данных из API.
Прежде чем показывать какой-либо код обработки URL-адреса с помощью Javascript, давайте посмотрим, в чем может быть дело, которое мы хотим исправить.
// API
{
title: "This article - is a must read!",
id: 123
}
Итак, мы получили этот фрагмент данных и хотим создать для него страницу. При этом у нас есть два варианта.
A (Не делайте этого, так как он не содержит ключевых слов):
/статья/:идентификатор
/статья/123
B (Это то, что мы будем использовать, но пока без решения Javascript):
/статья/:название
/article/This%20article%20-%20is%20a%20must%20read
Теперь это выглядит довольно страшно, не так ли? Глядя на эти два примера выше, вы, вероятно, выберете решение A, и я не буду вас винить!
Но независимо от того, какой из них, оба они плохо SEO. Как вы думаете, что я имею в виду под плохим SEO?
SEO ЛЮБИТ КЛЮЧЕВЫЕ СЛОВА
В URL так же, как и в содержании. Поэтому нам нужно исправить этот URL. Вот решение с простым Javascript
const beautifyURL = (title) =>
title
.replace(/\s/g, "-")
.replace(/-+/g, "-")
.replace(/[^a-å0-9-]/gi, "")
.toLowerCase();
Давайте посмотрим на каждый шаг
- Заменяем все пробелы тире
- Если появляется более одного тире, замените его, чтобы в итоге осталось только одно тире. В этом примере он заменит /article/this-article — — — is-a-must-read на /article/this-article-is-a-must-read
- Удалить все буквы без цифр или тире
- Всегда делать URL в нижнем регистре
Поэтому конечный URL будет (барабанная дробь):
/article/this-article-is-a-must-read
Ура! Это не может быть более дружественным к SEO, чем это.
Я надеюсь, что вы найдете эту статью полезной.
Я использую его во всех проектах, где это необходимо, и он очень хорошо работает как в проектах Gatsby, так и в проектах NextJS.
