Query parameters что это
Как разобрать URL в JavaScript?
Доброго времени суток, друзья!
Представляю Вашему вниманию перевод заметки «How to Parse URL in JavaScript: hostname, pathname, query, hash» автора Dmitri Pavlutin.
Унифицированный указатель ресурса или, сокращенно, URL — это ссылка на веб-ресурс (веб-страницу, изображение, файл). URL определяет местонахождения ресурса и способ его получения — протокол (http, ftp, mailto).
Например, вот URL данной статьи:
Часто возникает необходимость получить определенные элементы URL. Это может быть название хоста (hostname, dmitripavlutin.com ) или путь (pathname, /parse-url-javascript ).
В этой статье мы поговорим о структуре и основных компонентах URL.
1. Структура URL
Изображение лучше тысячи слов. На представленном изображении Вы можете видеть основные компоненты URL:
2. Конструктор URL()
Конструктор URL() — это функция, позволяющая разбирать (парсить) компоненты URL:
Например, инициализируем URL() с абсолютным URL:
Теперь скомбинируем относительный и абсолютный URL:
Свойство href экземпляра URL() возвращает переданную URL-строку.
Здесь тип USVString означает, что JavaScript должен возвращать строку.
3. Строка запроса (query string)
Если строка запроса отсутствует, url.search возвращает пустую строку (»):
3.1. Разбор (парсинг) строки запроса
Вместо получения исходной строки запроса, мы можем получать ее параметры.
Объект URLSearchParams предоставляет множество методов для работы с параметрами строки запроса ( get(param), has(param) и т.д.).
Давайте рассмотрим пример:
url.searchParams.get(‘message’) возвращает значение параметра message строки запроса.
4. Название хоста (hostname)
Значением свойства url.hostname является название хоста URL:
5. Путь (pathname)
Свойство url.pathname содержит путь URL:
Если URL не имеет пути, url.pathname возвращает символ / :
6. Хеш (hash)
Наконец, хеш может быть получен через свойство url.hash :
Если хеш отсутствует, url.hash возвращает пустую строку (»):
7. Проверка (валидация) URL
Например, http ://example.com не валидный URL, поскольку после http имеется пробел.
Попробуем использовать этот URL:
8. Работа с URL
Такие свойства, как search, hostname, pathname, hash доступны для записи.
Например, давайте изменим название хоста существующего URL с red.com на blue.io :
Свойства origin, searchParams доступны только для чтения.
9. Заключение
Конструктор URL() является очень удобным способом разбора (парсинга) и проверки (валидации) URL в JavaScript.
new URL(relativeOrAbsolute, [, absoluteBase] в качестве первого параметра принимает абсолютный или относительный URL. Если первый параметр является относительным URL, вторым параметром должен быть абсолютный URL — основа для первого аргумента.
A Beginner’s Guide to URL Parameters
Mar 19, 2021 7 min read
URL Parameters and How They Impact SEO
URL parameters are an integral part of URL structures. Although they are an invaluable asset in the hands of seasoned SEO professionals, query strings often present serious challenges for your website rankings.
In this guide, you’ll find the most common SEO issues to watch out for when working with URL parameters.
What Are URL Parameters?
URL parameters (known also as “query strings” or “URL query parameters”) are elements inserted in your URLs to help you filter and organize content or track information on your website.
In short, URL parameters are a way to pass information about a click using the URL itself.
To identify a URL parameter, refer to the portion of the URL that comes after a question mark (?). URL parameters are made of a key and a value, separated by an equal sign (=). Multiple parameters are each then separated by an ampersand (&).
A URL string with parameters looks like this:
Key1: first variable name
Key2: second variable name
Value1: first property value
Value2: second property value
? : query string begins
= : value separator
& : parameter separator
How to Use URL Parameters (with Examples)
URL parameters are commonly used to sort content on a page, making it easier for users to navigate products in an online store. These query strings allow users to order a page according to specific filters, and to view only a set amount of items per page.
Query strings of tracking parameters are equally common. They’re often used by digital marketers to monitor where traffic comes from, so they can determine whether their latest investment in social, ad campaign, or newsletter was successful.
Handle URL Parameters
with the Site Audit Tool
How Do URL Parameters Work?
According to Google Developers, there are two types of URL parameters:
1. Content-modifying parameters (active): parameters that will modify the content displayed on the page
2. Tracking parameters (passive) for advanced tracking: parameters that will pass information about the click — i.e. which network it came from, which campaign or ad group etc. — but won’t change the content on the page.
This information will be clearly recorded in a tracking template and will include valuable data for you to evaluate your recent marketing investments.
It might seem fairly simple to manage, but there is a correct and an incorrect way to use URL parameters, which we’ll discuss shortly after some examples.
URL Query String Examples
Common uses for URL parameters include:
When Do URL Parameters Become an SEO Issue?
Most SEO-friendly advice for URL structuring suggests keeping away from URL parameters as much as possible. This is because however useful URLs parameters might be, they tend to slow down web crawlers as they eat up a good chunk of crawl budget.
Poorly structured, passive URL parameters that do not change the content on the page (such as session IDs, UTM codes and affiliate IDs) hold the potential to create endless URLs with non-unique content.
The most common SEO issues caused by URL parameters are:
1. Duplicate content: Since every URL is treated by search engines as an independent page, multiple versions of the same page created by a URL parameter might be considered duplicate content. This is because a page reordered according to a URL parameter is often very similar to the original page, while some parameters might return the exact same content as the original.
2. Loss in crawl budget: Keeping a simple URL structure is part of the basics for URL optimization. Complex URLs with multiple parameters create many different URLs that point to identical (or similar) content. According to Google Developers, crawlers might decide to avoid “wasting” bandwidth indexing all content on the website, mark it as low-quality and move on to the next one.
3. Keyword cannibalization: Filtered versions of the original URL target the same keyword group. This leads to various pages competing for the same rankings, which may lead crawlers to decide that the filtered pages do not add any real value for the users.
4. Diluted ranking signals: With multiple URLs pointing to the same content, links and social shares might point to any parameterized version of the page. This can further confuse crawlers, who won’t understand which of the competing pages should be ranking for the search query.
5. Poor URL readability: When optimizing URL structure, we want the URL to be straightforward and understandable. A long string of code and numbers hardly fits the bill. A parameterized URL is virtually unreadable for users. When displayed in the SERPs or in a newsletter or on social media, the parameterized URL looks spammy and untrustworthy, making it less likely for users to click on and share the page.
How to Manage URL Parameters for Good SEO
The majority of the aforementioned SEO issues point to one main cause: crawling and indexing all parameterized URLs. But thankfully, webmasters are not powerless against the endless creation of new URLs via parameters.
At the core of good URL parameter handling, we find proper tagging.
Please note: SEO issues arise when URLs containing parameters display duplicate, non-unique content, i.e. those generated by passive URL parameters. These links — and only these links — should not be indexed.
Check Your Crawl Budget
Your crawl budget is the number of pages bots will crawl on your site before moving on to the next one. Every website has a different crawl budget, and you should always make sure yours is not being wasted.
Unfortunately, having many crawlable, low-value URLs — such as parameterized URLs created from faceted navigations — is a waste of the crawl budget.
Consistent Internal Linking
If your website has many parameter-based URLs, it is important to signal to crawlers which page not to index and to consistently link to the static, non-parameterized page.
For example, here are a few parameterized URLs from an online shoe store:
In this case, be careful and consistently link only to the static page and never to the versions with parameters. In this way you will avoid sending inconsistent signals to search engines as to which version of the page to index.
Canonicalize One Version of the URL
Once you decided on which static page should be indexed, remember to canonicalize it. Set up canonical tags on the parameterized URLs, referencing the preferred URL.
If you create parameters to help users navigate your online shop landing page for shoes, all URL variations should include the canonical tag identifying the main landing page as the canonical page. So for example:
In this case, the three URLs above are “related” to the non-parameterized women shoes landing page. This will send a signal to crawlers that only the main landing page is to be indexed and not the parameterized URLs.
Block Crawlers via Disallow
URL parameters intended to sort and filter can potentially create endless URLs with non-unique content. You can choose to block crawlers from accessing these sections of your website by using the disallow tag.
Blocking crawlers, like Googlebot, from crawling parameterized duplicate content means controlling what they can access on your website via robots.txt. The robots.txt file is checked by bots before crawling a website, thus making it a great point to start when optimizing your parameterized URLs.
The following robots.txt file will disallow any URLs featuring a question mark:
This disallow tag will block all URL parameters from being crawled by search engines. Before choosing this option, make sure no other portion of your URL structure uses parameters, or those will be blocked as well.
You might need to carry out a crawl yourself to locate all URLs containing a question mark (?).
Move URL Parameters to Static URLs
This falls into the wider discussion about dynamic vs static URLs. Rewriting dynamic pages as static ones improves the URL structure of the website.
However, especially if the parameterized URLs are currently indexed, you should take the time not only to rewrite the URLs but also to redirect those pages to their corresponding new static locations.
Google Developers also suggest to:
Using Semrush’s URL Parameter Tool
As it must be clear by now, handling URL parameters is a complex task and you might need some help with it. When setting up a site audit with Semrush, you can save yourself a headache by identifying early on all URL parameters to avoid crawling.
In the Site Audit tool settings, you’ll find a dedicated step ( Remove URL parameters) where you can list the parameters URLs to ignore during a crawl (UTMs, page, language etc.)
This is useful because, as we mentioned before, not all parameterized URLs need to be crawled and indexed. Content-modifying parameters do not usually cause duplicate content and other SEO issues so having them indexed will add value to your website.
If you already have a project set up in Semrush, you can still change your URL parameter settings by clicking on the gear icon.
Incorporating URL Parameters into your SEO Strategy
Parameterized URLs make it easier to modify or track content, so it’s worth incorporating them when you need to. You’ll need to let web crawlers know when to and when not to index specific URLs with parameters, and to highlight the version of the page that is the most valuable.
Take your time and decide which parameterized URLs shouldn’t be indexed. With time, web crawlers will better understand how to navigate and value your site’s pages.
Параметры URL-запроса в отчетах Google Analytics и инструмент для их извлечения
Специалисты, работающие с Google Analytics, видели или знают, что в отчетах с параметром “Страница” (Page) одна и та же страница может дублироваться за счет добавления разных параметров.
В этой статье я расскажу, откуда берутся эти параметры, почему их наличие может мешать, а главное — что с ними делать.
Что такое параметры запроса URL
Параметры запроса URL (URL Query Parameters) — это дополнительная информация, которую можно добавить в URL-адрес. Состоит из двух обязательных элементов: из самого параметра и его значения, разделенных знаком равенства (=).
Параметры указываются в конце URL, отделяясь от основного адреса знаком вопроса (?). Можно указать более одного параметра, для этого каждый параметр со значениями отделяется от следующего знаком амперсанда (&).
Виды параметров
Есть параметры, которые влияют на страницу, к URL-адресу которой они добавлены.
И есть параметры, никак не влияющие на страницу, к URL-адресу которой они добавлены. Их обычно используются для передачи какой-то информации о посещении сайта.
Как посмотреть параметры запросов
Чтобы увидеть все параметры запросов, с которыми взаимодействовали пользователи на сайте, в Google Analytics надо:
На многих сайтах можно увидеть большое количество страниц с разными параметрами.
Что плохого в параметрах запросов
Основная причина, по которой наличие большого количества параметров —плохо, это “размытие” данных о странице.
Посмотрите на отчет ниже. Это данные по взаимодействию с главной страницей и её параметрами за последние 6 месяцев.
В нижнем правом углу показано количество строк в отчете. Более 55 тысяч уникальных параметров, на которые приходится около 20% от всех просмотров главной страницы.
При этом, если сравнить выведенные метрики качества основной главной страницы (/) и главной страницы с параметрами, мы видим существенные отличия.
То есть неконтролируемые параметры могут сильно искажать данные о странице.
Что делать с параметрами
Самое просто решение — исключать их из отчетов Google Analytics. При этом исключаются не сами взаимодействия, а удаляются параметры из URL-адресов страниц, “приклеивая” оставшуюся информацию к основной странице. То есть, если в отчете есть информация о 10 взаимодействиях с основной страницей и информация о 10 взаимодействиях с параметрами этой страницы, после исключения параметров мы получим 20 взаимодействий с основной страницей.
Google Analytics по умолчанию сам умеет исключать параметры (_ga, UTM-метки). Для исключения других параметров в Google Analytics есть удобный встроенный инструмент исключения параметров запросов URL. Находится он в разделе “Администратор > Представление > Настройки представления”.
Достаточно указать в данном поле через запятую все параметры, которые надо исключать из отчетов, и в момент внесения изменений данные в представлении будут отображаться без параметров.
Тут стоит сделать две важные ремарки:
Какие параметры запросов исключать
Из отчетов надо исключать параметры второго вида, то есть те, которые не влияют на работу сайта, но передают дополнительные параметры.
Но перед удалением параметров обязательно надо обсудить с командой проекта, не связан ли какой-нибудь отчет с этими параметрами.
Ниже пример параметров, которые мы обычно исключаем:
Без предварительной подготовки из отчетов не рекомендуется исключать параметры, которые влияют на работу сайта: пагинация, фильтрация, сортировка, действия пользователей. Так как эти параметры могут служить хорошим источником информации для разных исследований и гипотез. Например, какие фильтры с какими значениями предпочитают выбирать пользователи из разных рекламных кампаний.
Отойду от темы и скажу, что часть информации из параметров лучше отправлять в пользовательские параметры. Но это тема отдельной статьи.
Инструмент сбора параметров URL запроса
Раньше для сбора параметров из отчетов Google Analytics необходимо было выгрузить данные из отчетов, выделить параметры, подчистить их, проанализировать.
Но коллеги из 3whitehats разработали инструмент “Google Analytics Query Parameter Extractor”, который позволяет автоматизировать весь процесс, сведя его к нескольким простым шагам. Сам инструмент работает на базе Google Таблиц + расширения Google Analytics Spreadsheet Add-on.
Как пользоваться инструментом:
Все настройки проводятся на первом листе “Query Parameter Extractor”.
Данные в полях с датами необходимо указывать в формате YYYY-MM-DD.
Может потребоваться авторизация скрипта.
В поле ниже будут собраны все найденные параметры, а в круговой диаграмме – частота появления этих параметров.
Надеюсь, эта статья поможет вам внести ясность в тему параметров URL-запросов, а инструмент позволит обрабатывать эти параметры эффективнее и быстрее.
Query Parameters
In web development, query parameters are used within a URL as described above but can also be used in API requests that retrieve data. Ember treats these as two different concepts. This section describes how routing query parameters are used in Ember. See finding records to see how query parameters are applied to API requests in Ember Data.
Specifying Query Parameters
To add a category query parameter that will filter out all the articles that haven’t been categorized as popular we’d specify ‘category’ as one of controller:articles ‘s queryParams :
Now we need to define a getter for our category-filtered array, which the articles template will render. For the getter to recompute when values change, category and model should be marked as tracked properties:
With this code, we have established the following behaviors:
In the above examples, direction is presumably a query param property on the posts controller, but it could also refer to a direction property on any of the controllers associated with the posts route hierarchy, matching the leaf-most controller with the supplied property name.
transitionTo
You can also add query params to URL transitions:
Opting into a full transition
Update URL with replaceState instead
By default, Ember will use pushState to update the URL in the address bar in response to a controller query param property change. If you would like to use replaceState instead, which prevents an additional item from being added to your browser’s history, you can specify this as follows:
Map a controller’s property to a different query param key
This will cause changes to the controller:articles ‘s category property to update the articles_category query param, and vice versa.
Query params that require additional customization can be provided along with strings in the queryParams array.
Default values and deserialization
This affects query param behavior in two ways:
Sticky Query Param Values
By default, query param values in Ember are «sticky», in that if you make changes to a query param and then leave and re-enter the route, the new value of that query param will be preserved (rather than reset to its default). This is a particularly handy default for preserving sort/filter parameters as you navigate back and forth between routes.
the generated links would be:
This illustrates that once you change a query param, it is stored and tied to the model loaded into the route.
If you wish to reset a query param, you have two options:
In the following example, the controller’s page query param is reset to 1, while still scoped to the pre-transition ArticlesRoute model. The result of this is that all links pointing back into the exited route will use the newly reset value 1 as the value for the page query param.
In some cases, you might not want the sticky query param value to be scoped to the route’s model but would rather reuse a query param’s value even as a route’s model changes. This can be accomplished by setting the scope option to «controller» within the controller’s queryParams config hash:
The following demonstrates how you can override both the scope and the query param URL key of a single controller query param property:
Query Parameters – What are Query Parameters?
Have you ever typed an address on the search engine only for it to return something long and sophisticated, with equals signs and question marks?
For example, you type www.pleasehelp.com, only for this URL to manifest: https://www.pleasehelp.com:80/services/search?q=1&456+true&will
This might seem confusing, but when broken down into various elements, it can be easy to understand. For a website to be more useful, it needs to store data. On a variety of servers, this is achieved using things like session state server-side.
Conversely, on the client-side, data can be stored via cookies, or in the URL via API query parameters.
What are API Query Parameters?
API Query parameters can be defined as the optional key-value pairs that appear after the question mark in the URL. Basically, they are extensions of the URL that are utilized to help determine specific content or action based on the data being delivered. Query parameters are appended to the end of the URL, using a ‘?’. The question mark sign is used to separate path and query parameters.
If you want to add multiple query parameters, an ‘&’ sign is placed in between them to form what is known as a query string. It can feature various object types with distinct lengths such as arrays, strings, and numbers.
It critical to note that query parameters can play a pivotal role in attribution, however, it is vitally essential to ensure that the attribution strategy is in the cross-platform, and it is performing everything it can.
Query Parameter Examples
In this URL, there are two query parameters, sort, and page, with ASC and 2 being their values, respectively.
In the URL above, the bolded values after the ‘?’ are the query parameters, q=database&ion-all (query string).
Query vs. Path Parameters (differences)
The first difference between query and path parameters is their position in the URL. While the query parameters appear on the right side of the ‘?’ in the URL, path parameters come before the question mark sign.
Secondly, the query parameters are used to sort/filter resources. On the other hand, path parameters are used to identify a specific resource or resources.
You can’t omit values in path parameters since they are part of the URL. On the other hand, query parameters are added at the end of the URL, and thus can allow omission of some values as long as the serializing standards are followed.
Query parameters have unique attributes which help to define resources in a better way. Path parameters, on the other hand, have dynamic resources, which act upon more granular objects of the resource.
When Should You Use Query Parameters?
There are several cases that warrant the use of query parameters. They can be used in filtering criteria, sorting criteria, or to represent the current page number in a paginated collection. Additionally, query parameters can be used in API requests that retrieve data. They are ideal to be passed to various methods to extend the functionality of the API.
For Enterprises
Bring software to market more rapidly with a dedicated API marketplace: