Hello, dear readers of the blog site. Today I want to touch on the topic of creating unique URLs on the Internet and talk about the principles of creating relative and absolute links.

Of course, the topic of forming Urls or their more extended version of URIs (uri) is quite complicated if you dig deep and try to get to the truth.

But we do not need this, because it is enough to understand the URL structure in its application.

Well, also, I think it will be useful to understand why and how you can create relative links for your resource, and not use absolute ones for these purposes, when there is no explicit need for this.

URL addresses - what are they and how do they affect site indexing

So, let's see what a URL is, why it is needed and what parts it consists of. As you know, search engines do not produce as a whole, but as a collection of individual pages. They will then be different search queries(read more about choosing keywords in Wordstat based on .

URL and URI

Well, any document (web page) on the Internet has its own unique URL, which stands for Uniform Resource Locator (resource locator). He, as well as the HTTP protocol, but also how, was developed and created by the same person - Tim Berners-Lee (father of the founder of the project).

By and large, a URL is a special case of another identifier called URI(Uniform Resource Identifier - a uniform resource identifier), but you and I, all these subtleties, most likely, will not be needed (unnecessary) when working with our site. Let's try to understand in general terms what it is and what parts it consists of, and then move on to relative and absolute links.

URL address is a way to unambiguously point to something on the internet. It is used not only to work with sites () via the http protocol (also via ftp), but we, of course, will be interested in the application of this identifier to the Web (http and https protocols). The URL in this case will look something like this (I will give a general flowchart of its construction below, but for now I would like to start with a simple frequent example):

https://.html

In this example of an address, the part with "http" denotes a data transfer protocol or, if you follow the terminology of the specification, a scheme (because the same is not a data transfer protocol, unlike http or ftp, but is also used in Url address x)..site") - or .

WWW and other site mirrors that need to be glued together

The Web has the specifics of designating a domain name in a site's URL, which can be with or without WWW. In order to be successful, it is very important to glue these two mirrors of your site. Often, the hosting provider can perform the gluing of mirrors for you, but this will definitely need to be checked.

Those. for search engines, sites with WWW or without it are completely different and without gluing them, the link mass will be divided between them in an unknown proportion. WWW in the address is inherently a kind of atavism that makes your Domain name second level domain of the third.

The same is true when moving the site to a secure https protocol with http- for search engines it will be a different site.

Nothing wrong with using www in site url no, but you need to clearly define the main mirror (through and through, as well as through writing your site directive), which will be indexed by search engines and which will participate in ranking.

E. “without atavism”, and if you add this wonderful prefix to any of my URLs, then an automatic redirect to the address “without WWW” will occur.

https://www..html

You can glue not only the mirrors described above, but also any other domain names that belong to you. For example, if different spellings in Latin letters of a well-known brand are possible, then all possible domains are bought (spelling variants with errors, in different domain zones etc.) and stick together. Then, when accessing the site at any of the possible URL addresses, the main mirror will be opened.

For example, on reg.ru you can see potential mirrors or free domains for registration (you can enter the proposed domain name directly in the form below):

Where do the extra URLs (duplicate pages) of your site come from in the search engine index

But back to our sheep. The part of the URL that is located after the third slash (/) - in our example it is "papka/fail.html" - is called the path to a specific object (document or file). In our case, this is the “fail.html” document, which lies in the “papka” directory, which in turn lies in the root folder ( the root in Url always matches the third slash left).

But that's not all that can be written in the address. Through the URL, various ones pass the so-called GET parameters, which are added to the very end of it after putting a question mark, for example, like this:

https://www..html?print=yes

The whole trouble is that search engines two such URLs (with and without Get parameters) are completely different web documents, and each of them will be indexed by search engines.

As many different Get parameters as you like can be added to the same Url, and all this will be indexed by Yandex and Google if you do not create the appropriate prohibitions in the robots.txt file, the link to the article about which is given just above. Otherwise, search engines may for a lot of duplicate content(same content available at different addresses).

Also, for example, to home page my resource can be accessed using two different URLs:

https://site https://site/index.php

(even three - also https: // site /) and in any case, the main page will open. This is pretty bad, because search engines will find three different pages(having different URLs from their point of view), but with the same content, which they, oh, don't like.

Therefore, I have made it so that when you enter any of the URLs above, a redirect to a URL of the form “https: // site /” will be performed. This is done, as a rule, using 301 redirects in the .htaccess file, either directly in the server settings by yourself or by your hoster.

For more information, read the post linked to.

URL structure and recoding to URL-encoded

Generally, complete URL block diagram can be represented like this:

In reality, as a rule, they do not use login, password and port, although they may need to be specified to access paid sites:

http://login: [email protected] website/platniy-access.html

It is also quite common to install FTP login passwords, where it can also use a non-standard port, but different from the default for this protocol. Then, to access the resources of such ftp server you will need to enter a URL like this:

ftp://login: [email protected] website:6789/samoe-nujnoe/cimus

About the GET parameters that can be written in this address after the question mark, we have already said and mentioned that it is necessary to prohibit the indexing of pages in the URLs of which there are such parameters (above is a link to an article about robots, where all this is described in detail).

Url addresses in the form of hash links that open the page in the right place

But in addition to all these things that can be included in the URL, in the above flowchart you can see the so-called anchor, which is added at the very end after the delimiting pound sign "#" (Urls containing anchors are usually called hash links).

Anchors are pre-attached inside html code document (page) by adding the ID="label" attribute to the desired Html tag (paragraph, heading or other suitable one), and then adding the name of this anchor to the page URL through the hash symbol "#", you will be able to jump not to the beginning this web page, and immediately to the place where the anchor was placed (everyone will automatically scroll the page to the right place).

About, and including about organizing navigation on the page with the help, read these articles.

What characters can be used in URLs?

It is also worth mentioning the various encodings that are used in URLs. Without recoding, they can use only limited quantity characters. Usually it is advised to limit yourself to a set of characters: ,,,[_],[-].

In general, in order to avoid errors, I would advise you to set the name of the files and URLs of the pages of your site in lower case, because for Unix-like systems (on which most web servers work), characters in upper and lower case are different (unlike Windows). Due to different registers, unnecessary confusion can arise.

The use of any other characters (including Russian) in URLs is allowed, but it will recoding these same characters (URL Encoding).

What is sad is the indigestible appearance of URLs with symbols, for example, Cyrillic, which are obtained after recoding. Each Cyrillic character is encoded using two bytes in , written in hexadecimal and separated by a percent sign "%". For example, this URL:

https://website/who's new/

after conversion it will look like this:

Http//site/%BA%D1%82%D0%BE%20%D0%BD%D0% B0%20%D0%BD%D0%BE%D0%B2%D0%B5%D0%BD%D1% 8C%D0%BA%D0 %BE%D0%B3%D0%BE

In general, it turns out not very cool, and they plan to deal with this indigestible kind of URL in national encodings, but this thing is not moving so hot.

In connection with all of the above, I would advise when on my CMS do not make page addresses in Russian, and, especially since, according to many promoters, it will be better in terms of Seo optimization for Yandex and Google.ru.

Relative and absolute links on the site

Let's start with absolute links, because in this case, nothing special, beyond what we have already discussed in this article, will not have to be said. That. an absolute link must comply with the requirements that we impose on the URL address - the data transfer protocol, the domain name of the site (host) and the path to desired web document. All.

In Html, an absolute link is formed using special A tags (hyperlinks), i.e. to put it down, we will simply have to surround the desired place in the text of the document (phrase or picture) with the opening and closing hyperlink tags and write in the opening tag A in the “Href” attribute the absolute path to the document that the visitor will have to get to when clicking on it :

PHPMyAdmin

Everything is very simple.

Benefits of Relative Links and How You Can Get Them

However, absolute hyperlinks are usually used only when they want to link to external sites, and for internal transitions, most webmasters (smart and perspicacious, not like me 🙂) try to use relative links. And there are several reasons for this:

1. Relative links, by definition, are shorter and do not clutter up the site code (after all, every little thing is important in this matter).
2. In addition, when moving to another domain or changing the protocol to https, you will not have to change all the links on the site.
3. In addition, some Internet project designs can be quickly and painlessly transferred to another resource without changing internal relative links.

So, judging by the name, the address of the web document to which they link must be written relative to the document of your site, from the code of which this relative link will be placed (dance from the stove). The second option for setting them up is to use the root folder as a starting point. These are exactly two ways to create relative links we will now consider.

Create relative links relative to the document from which they are affixed

The simplest and shortest way to write a relative path (meaning the value of the Href attribute of the hyperlink tag) will be obtained when both web documents: the donor (from which it is affixed) and the acceptor (the file or web document to which it leads) are located in the same folder on the server.

anchor

Now let's assume that the acceptor document is in a folder that is located in the same directory as the donor document.

What would a relative link look like in this case? Everything is also quite simple:

anchor

For now, I think that everything is clear - we prescribe the path to the file or document of the acceptor (the name of the folder, and through the direct slash "/" the name of the file or document). Those. in order to get from the donor to the acceptor, we will need to open the folder, the name of which we indicate in the relative link.

Now let's consider the opposite situation, when the donor document itself lies inside the folder, from which you need to put a relative link to the acceptor document or file, which already lies one level higher:

In order for us to go from the donor document to the acceptor file (or document), we need move up a level from this folder. For this, a special element is provided - two dots in a row, and then through a forward slash, the further path to the acceptor is written. So for the example above, the relative path would be:

What is a URL

If you need to go up two levels, then the entry will look like:

What is Url

Well, if after that, in order to set a relative path to the acceptor, you will also need to enter some folder on the second upper (relative to the donor document) level:

Complex track design

There can be as many such descents to folders and ascents to the level up, the main thing is that you yourself do not get confused.

Create a link relative to the root folder

We wrote all the links discussed above regarding the donor document from which the hyperlink is affixed, but you can take the root folder as a starting point site. The root in relative paths looks like a single forward slash "/".

That. the transition to the main page will look quite simple, but extravagant:

anchor

For example, absolute the path might look like this:

anchor

BUT relative to the same file will be somewhat shorter:

Text

How to refer to a folder in relative and absolute form

I want to draw your attention to one nuance that should be taken into account when creating both absolute and relative links. If you want to refer to folder, then be sure to put a forward slash "/" at the end of such a hyperlink (after its name). That is, if I want to open the contents of a folder, then I should write:

anchor

Not like this:

text

In the second case, during processing, the server will first try to find a file with the name "uploads" (exactly this without any extensions) and not finding it, then it will look for such a folder. Therefore, writing immediately slash after the name of the folder you want, you will not take extra resources from your server in search of what is not there.

You should also be aware that when contacting in relative or absolute reference folder, the web server will display the so-called index file that lies in it and which, as a rule, is called either index.html or index.php. If there is no index file in the folder, then if security is incorrectly configured on the server, you will see a listing of its contents, which can lead to a decrease in the security of your resource.

Definitely if you find it.

By the way, accessing the main page of the site is also, in essence, accessing the folder (root), and at the same time, the index file lying in the root will be launched (in my case, this is index.php). So, if you are accessing a folder, then to reduce server load it is better to write a forward slash after the domain name:

Here it is, Mikhalych!

Good luck to you! See you soon on the blog pages site

You may be interested

ASCII text encoding (Windows 1251, CP866, KOI8-R) and Unicode (UTF 8, 16, 32) - how to fix the problem with krakozyabry
How did I increase website traffic to 300 people a day?
Yandex search on the site and online store
Sitemap's Sitemap xml format for Yandex and Google - how to create a sitemap in Joomla and WordPress or in an online generator

All HTML links divided into external and internal. External links are links that lead from one site to another site or file located on another site. Internal links- these are links that link from one page of the site to another page of the same site or to sections of the same page.

All external links in the href attribute of the tag contain the absolute path to the document they refer to. Internal links, in turn, can contain both an absolute path and a relative one (in this case, it depends on your personal preferences).

Like grammar rules in different languages, there are also rules in programming. Validation allows you to see if the page complies with these rules, and if there are errors and warnings, recommendations will be provided to eliminate them. More details about the need for such a check will be discussed below.

What influences the validity of the site

Have you ever wondered how browsers "read" a web page? They have "engines" to analyze the code and convert it into a visual form for people. Unfortunately, each browser has its own code handling mechanism, and this can cause your pages to display differently.

An invalid web page can be read by browsers in different ways. This will result in your visitors possibly not even being able to see the content of the page correctly in their browsers. Validation will later correct almost all major differences and make your web page readable by almost all web browsers (most often the exception is Internet Explorer older versions). This is where the term “cross-browser layout” came from. layout that is equally good (compatible) for all popular browsers.

How will this affect SEO? It is important to understand that search engine bots love semantic web pages. Semantic layout, according to Wikipedia, is an approach to creating web pages on HTML language, based on using HTML tags according to their semantics (purpose). In addition, a structural semantic web page allows search robots to more accurately determine the significance of both individual elements of a web page and the entire text as a whole. According to Google, a valid code does not affect page ranking in any way. But at the same time, the presence of errors in the code can negatively affect the scanning of microdata and adaptability to mobile devices.

Verification tools for your site

Understanding the need for the absence of validation errors on the pages of the site, let's look at how to search for these errors.

There are many free services for site validation such as W3C Markup Validation Service , Web Page Analyzer , Browsershots and others.

Ph.D. Lavlinsky N. E., Technical Director of Method Lab LLC

Recently published new standard to Preload technology (link). The main purpose of this specification was to allow fine-grained control over the logic of page resource loading by the developer.

Previous standards

The idea of ​​load management is not new. Previously, several tag options have been developed link with attributes subresource, prerender and prefetch. However, they worked a little differently: with their help, you can download page elements or entire pages that may be required when further navigating the site. That is, the browser sent such requests with low priority and last. If you need to increase the priority, then there were no solutions.

Loading resources with preload

What is the new specification? Firstly, now loading occurs with a specification of what is being loaded. Based on the specified resource type, the browser sets the download priority. For example:

Second, the resource type ( as) allows the browser to send the correct headers so that the server can send the content with the best compression option (for example, send WebP images if the browser supports them).

In the second example, we are loading a font file that specifies a specific format (WOFF2) that is not supported by all browsers. However, as long as support for the preload mechanism is the same as support for this format, there are no problems. Current mechanism support can be viewed.

Faster font loading

An example of speeding up a site using preload is the loading of deeply buried resources, such as fonts. In the normal download process, the browser must first download the CSS file pointing to the font, parse the file, and only then queue the request to download the font file.

If we preload this font in the HTML page code, the browser will send the request immediately after parsing the HTML document, which may be a few seconds earlier than in the normal case. And we know that pluggable fonts are blocking elements and delay the rendering of the font on the page, so they need to be loaded as quickly as possible. This problem is especially acute when using HTTP / 2, when the browser sends many requests to the server at once, as a result of which some pictures can fill the client's bandwidth and the loading of important resources will be delayed.

Asynchronous CSS loading

CSS files always block page rendering, so any CSS resources that can be delayed can be loaded as normal files and dynamically linked to the page.

This is done as follows:

Loading JS code without execution

It may also be useful to preload the script code in JS in order to execute it later.

This can be done with the following code:

We have covered the main ways to use the preload mechanism, but the possibilities are not limited to this, conduct your own experiments!

As a rule, many webmasters upload their sites to the host immediately after they are created. At the same time, they mostly focus on the correctness of the meaning of the text content, rather than on the correctness of the internal code of the pages.

Site Validation

But there are other factors that can and do affect the position of the site. And they include, among other things, technical factors. Well, the validation of the site also belongs to the technical ones. So what is it?

If a in simple words, then site validation is a check of the site code for technical compliance and errors. Well, for example, you forgot to use the closing tag - /html. In the latest HTML5, visually nothing will change. However, this is a code error.

When writing code, other errors are possible. And again, modern language hyper markup will endure a lot. For example, "forgetting" the closing tag /head. Again, you won't see the difference. But she is))

In fact, when writing a website, there can be quite a lot of mistakes. And worse, some of these errors may also show up visually. Well, maybe the blocks will float, maybe alignment, or maybe something else. Potential errors, thousands. And not all of them are striking.

What is the danger?

Well, it would seem, well, what's wrong with that? Yes, it must be said that often such errors are not visible. Or rather, invisible to humans. But the pages of our site can be visited not only by people, but also by search spiders that completely scan the site. And every error that they find on the site, they transmit to the servers of search engines such as Yandex or Google.

And search engines, in turn, seeing that the site has a lot of code errors, may well conclude that the site is bad. And that means they will not raise it in the search. Well, this will already mean that goodbye visitors from the search.

Yes, it must be admitted that a certain pessimization of the site due to validation errors is quite rare. But this is quite possible, which means that validation must be worked on. And what needs to be done for this? Of course, the first step is to find the errors.

But since manually this is a very time-consuming and unreliable business, then to search for errors, they use special services, the so-called "Validators".

Validator Markup Validation Service.

This service checks the correctness of HTML and XHTML codes, which are the basis of most pages when creating almost any site, and determine its internal structure. This validator service can be accessed by following the link http://validator.w3.org

But there is a prerequisite here, which also applies to other validators: the checked site or its checked pages must be uploaded to the hosting. Otherwise, the validator will not "know" the site address and will not be able to check anything. Now you can already consider how to work on this validator.

After entering the page of this service, its entire functional picture will be displayed. But most of what is depicted and written does not apply to the main check, and all your attention should be paid only to the input window for the address of the page being checked:

That's exactly where you need to start.

Actually, checking the validation of a site is extremely simple, like our entire mortal world: in the address window of the service, you need to write the site address, i.e. its URL and then click "Check". After such a simple action, the validator will “puff” for a few seconds and issue the following:

This means that there are no errors in the page code and you can be absolutely calm.

But there may also be such an undesirable option:

This is already worse and means that there are some errors in the internal code of the page being checked. However, this is not fatal at all: you just need to scroll the page below and all the errors found during the verification process will be written in detail there.

In addition, the validator will not only list the errors found, but also show exactly on which line of the internal code these errors are located. So you won't have to look for them for a long time. Here, without exaggerating anything, we can firmly say that this validor works perfectly.

But that's not all: the validator not only indicates the location of the detected code error, but also gives fairly complete recommendations on how to eliminate these errors. Of course, for this you do not have to be lazy and carefully read everything written.

As a short and generalized conclusion, we can say the following:

1. this validator service works great and can check the site very quickly.
2. Well, a small but very nice addition: site validation is free of charge.
3. Now we can move on to the next step: this is checking the CSS code.

CSS Validation Service

In general, this is the second function of the above service, but it is “sharpened” not for checking HTML and XHTML code, but specifically for checking the correctness of the code css style located on the outer table. And to get to the service page, you need to follow the link http://jigsaw.w3.org/css-validator .

By the way, here it is worth noting something pleasant: checking on this service is absolutely free. So do not pull money out of your wallet - let it lie until the right moment. However, let's move on to the methodology of working on this second service.

In general, all work on the CSS validator is absolutely identical to checking for code cleanliness. Therefore, there is no need to provide a separate image of the address bar of the validator. Just a little lower we will briefly consider the order of the check itself and that's it.

For this you need to address bar write URL CSS tables, such as "http://my site/style.css" and then press the button with the Russian inscription "Check". Accordingly, this validator will also “puff” for a few seconds and give the desired result:

This means that the CSS table is written correctly and no errors were found in it.

And there is also a pleasant surprise here: if you scroll down the page a little lower, then the optimized code for your CSS table will be written there, from which all unnecessary inscriptions will be removed and all code tags will be arranged in the sequence that meets the optimal working requirements of all search engines. All that remains is to copy this perfect code sample and paste it into the CSS table.

It is quite possible that something like this could happen:

This means that some errors were found in the CSS code, but you should not be afraid of this at all. Just below that red line, the validator will tell you exactly which tag is misspelled. It remains only to find these tags in the style sheet and make the necessary corrections.

And of course, after that, upload the corrected style sheet to the host and, if there is a green line, you can happily copy the optimized CSS table style code. It is quite clear that then it is best to change old code to a new and optimized one.

Brief summary.

The two most basic and mandatory website validation checks have been discussed above. Without these checks, you should not even open indexing for search engines in robots.txt Otherwise, the site may be ignored for indexing search engines and will be considered defective with appropriate sanctions.

To prevent this from happening, you need to spend just a few minutes to be absolutely calm and completely confident in the technical condition of your site and all its pages. Of course, it is also necessary to make additional checks of links and anchors, the visibility of the site on mobile devices and parameters of other codes. Only then can the site be considered ready for its full functioning and for successful and fast promotion in TOP.

I would like to say in advance that all other checks are as quick and simple as those discussed above - you just need to carefully read the procedure for working with the validator.

Added on 04/19/2018

Common Validity Errors When Validating HTML Code

Decided to update the article. HTML errors codes that are often found on sites. In any case, I had a lot of them)). The validator highlights errors in yellow.

1) Error: Character reference was not terminated by a semicolon.

Error: the character was not interrupted by a semicolon - accordingly, it must be added.

2) Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

Warning: This section has no title. Consider using h2-h6 elements to add identifying headings to all sections. Everything is clear here, you need to add at least one subtitle. This is not even a mistake, but a recommendation.

3) Error: Element noindex not allowed as child of element p in this context.

Error: noindex element not allowed as child element p element in this context. (Suppress further errors from this subtree.)
The solution is simple, you need to comment out the noindex tag, the view will look like this:

4) Error: The center element is obsolete.

Error: the "center" tag is outdated - it must be replaced, if we are talking about img, then you can use the align attribute. If something else is centered, then replace it with a div.

5) An img element must have an alt attribute, except under certain

Error: The img element must have an alt attribute - everything is clear here, you need to add an alt attribute, even if it is empty, the error will go away.

6) The width attribute on the td element is obsolete. Use CSS instead.

Error: Attribute 'width' on element 'td' is deprecated

7) The type attribute is unnecessary for javascript resources

Error: The type attribute is not needed for javascript resources. The solution is simply to remove everything unnecessary and leave only the “script” tag.

8) The align attribute on the img element is obsolete.

Error: The align attribute on the img element is deprecated. Make image alignment divs.