How to disable adblock in different browsers. How to disable adblock in different browsers Remove external links from the new default Blogger template
If you asked yourself such a question, then you are a fairly experienced user and know about the existence of such an add-on as Adblock, which hides almost all ads from the eyes of users. Seemingly a useful plugin, so why disable it then? Undoubtedly, with its help, you can get rid of colorful and intrusive banners, teasers, clickers and other types of advertising that distract from the main content of the site with its colors or sounds. However, some sites start to display incorrectly, which makes it difficult to read articles, watch pictures or videos. That is why we decided to tell you how to disable the Adblock plugin in order to browse your favorite site in normal mode.
How to disable Adblock plugin in Chrome
First, we suggest looking at the disconnection process in the most popular browser today - Google Chrome! Well, we will not delay, straight to the point:
1. Open the menu by clicking on the button on the right side (located at the very top);
2. Click on "Settings", after which a page with settings opens, but we do not need it - we go further;
3. Switch from settings to "Extensions", after which a page with all the add-ons opens;
4. Uncheck the box next to the "Enable";
5. Done! Now Adblock does not prevent your favorite site from being displayed in normal mode!
How to disable the Adguard plugin in Yandex Browser
Basically, everything is the same in Yandex browser as in Chrome, because they have the same source code. But we will still explain:
1. Click on the "Menu" button, which is on the top right;
2. A list drops out where you need to click on the "Add-ons" section;
3. The page with extensions opens. They are divided into categories;
4. Scroll it to the very bottom and find us the Adguard plugin (the same Adblock only specifically for Yandex Browser);
5. Move the slider opposite to it and the extension becomes inactive.
Disable the Adblock plugin in Mozilla Firefox
As you have already noticed, the process of disabling the plugin is practically the same in all browsers, only the names of the menu and the add-on itself (in the case of J. Browser) have been changed, and Mozilla was no exception:
1. We click on the same button to open the menu;
2. Click on the icon, under which is the inscription "Add-ons";
3. The extension store opens. We do not need him - we pass by;
4. In the menu on the left, click on "Extensions";
5. Actually, now the most interesting thing - we find among the plugins Adblock and click on the "Disable" button;
How to disable Adblock extension in Opera browser
And finally, let's please people who use Opera as their main browser:
1. Click on the "Opera" logo in the upper left corner, open the menu;
2. Hover the arrow on "Extensions" and go to the "Extensions Manager";
3. A page with installed plugins opens;
4. Find our favorite Adblock among the add-ons and disable it by clicking on the “Disable” button;
One of the most acute and urgent topics among web-programmers and owners of Internet resources today is seo-optimization. In order for the site to get to the first pages of search queries of "Yandex" or Google, it is necessary to carry out colossal work on its creation and promotion.
What is semantic markup for?
You can adapt the resource for an ordinary user with the help of relevant and interesting content. But for the user to be able to find this resource, it is necessary to optimize the site for the search engine. How to do it?
Unlike a person, he cannot recognize what the website is about without certain prompts. He analyzes content, identifies certain patterns, identifies keywords, but without human intelligence, he cannot understand the meaning of what is written. To simplify his task, programmers have invented semantic or micro-markup for Yandex and Google. Just as hypertext tells the machine what to place and where, semantic markup explains who or what a resource is about. Thanks to this understanding, the site ranks better among competitors and has a better chance of getting to the first lines of search queries.
An example of semantic markup
The micro-markup "Yandex" and Google is especially effective in the promotion of commercial sites offering goods and services. The following example will explain it most clearly.
It is necessary to create a micro-markup for a business card website for the provision of hairdressing services for dogs. It will look like this:
Itemtype - BarberShop,
Name - a hairdresser for dogs.
The first line contains the area of operation of the site, and the second - a specific object. A page with such a script will be higher on the search ladder than a similar one without it, since the search engine will consider it more relevant to the concept of "barber for dogs", and not just "barbershop".
The micro-markup created with the help of Yandex.Webmaster allows you to prescribe many parameters - places of sale, opening hours, contacts, brief or services, and much more.
Where is semantic markup used?
More and more resources are striving to provide the user with high-quality processed material. The closer in meaning it will be to the desired one, the more efficiency it will bring to the site. Therefore, today micro-markup is actively used:
- Commercial sites for promoting goods and services.
- Online reference books and encyclopedias to form multilevel links between articles.
- Social media for detailing profiles, events and other content.
Schrema.org uniform standard
The creation of semantic markup led to the need for a single standard for all search engines. It was the micro-markup "Yandex" and Google - schrema.org. It simplifies the process of creating a short description (snippet) that we see when the page is displayed in search results. This information can include important information about the site that will help the user decide whether or not to go to this page.
By the way, the number of elements and dictionaries in schrema is huge, so it can be used for sites of almost any subject.
Open Graph Standard
In addition to the search engines Google and Yandex, micro-markup of goods, services, multimedia and information content is also required for social networks. For them, Facebook came up with a unified Open Graph standard. This markup allows you to control how the site will be presented in the news feed of the social network. Moreover, today you can create beautiful links with it not only on Facebook, but also on Google+, VKontakte, Twitter. For a beautiful display of the latter, by the way, Twitter Cards is also used.
Which micro-markup to choose?
In fact, neither Yandex nor Google gives more preference to any standard when ranking a site. The classic use case is schrema.org, which is the most complete, modern, and actively developing.
Micro-markup dictionaries
We have defined what Yandex micro-markup is. How do you make sure that it displays the information you need? For this, such a concept as a micro-markup dictionary is used. It is a set of elements, tags and syntax, with the help of which the attention of the search engine is focused on something.
Each standard has its own vocabularies and elements. There are several keywords in schema.org with their huge hierarchy and display types. For example, the Thing dictionary allows you to represent information in 3 main properties:
- alternateName - for the alias (alias) of the object;
- description - for a textual description of the object;
- image - for an image or a link to it.
Or the Good Relations dictionary, which will be especially useful for online marketplaces. It allows you to post data on prices, locations of purchase, availability, and more.
Dictionary FOAF - micro-markup for Yandex and Google contacts. This is a questionnaire that you have filled out millions of times on various sites - your name, coordinates, page on social networks, mail, date of birth, etc. This knowledge will persuade the user to follow the link, offering him something that may interest him. Thus, the site can increase traffic.
For a detailed description of audio and video information - artist, album name, duration - the VideoObject micro-markup is used.
There is also markup for mail messages, allowing the user, without having to go to another page, agree to an appointment or leave a comment under the article, for example.
What is a validator
Any promotion on the Internet requires a thorough and in-depth analysis of its effectiveness. You can check the Yandex micro-markup using a validator - software that recognizes metadata on web pages. Documents of any format can be checked for correctness - HTML, XHTML, RSS, XML, in any languages.
The Yandex micro-markup is checked by any validator that supports the Schema.org, HTML, Open Graph, RDF microdata formats.
How to check Google's micro-markup
You can find out how well your site is in Google search in several ways. For an experienced user who is fluent in the hidden settings of Google webmasters, the Rich Snippet Tool, available only from the link, is suitable.
Another way is to install the Seo by Yoast plugin. It is easy to use and will be available after installation in the top panel of the webmaster.
The third way is to select “Other Resources” in the toolbar on the Google Developers website, click on the “Structured Data Validation Tool” button and specify the html page you want to check. When the robot calculates the specified script, you will receive a detailed report with errors, if any, and explanations to them.
How to check Yandex micro-markup
With this search engine, everything is somewhat simpler. The Yandex micro-markup validator is located in the webmasters' tools, in the “My Sites” tab. Here you need to click the "Check markup" button and enter the site URL, and the validator will start calculating errors. In a few minutes, you will receive one of three response options:
- Micro-markup not found.
- There are mistakes.
- Micro-markup fully complies with the standard.
In what cases does information about incorrect markup appear?
Yandex.Webmaster, a micro-markup validator, displays an error message in two situations:
- When it doesn't recognize the markup.
- When the micro-markup doesn't meet the standard.
In any case, the program will display the error details, by which you can judge which required fields in the markup were omitted or which attribute was omitted.
It may also give a message - "the page could not be loaded." It indicates a server error or a non-existent page.
If the Yandex micro-markup is executed with an unknown error or you do not know how to fix it, you can always contact Yandex.Webmaster for help.
After the completion of validation, the new markup will appear within 2 weeks.
How does micro-markup affect the ranking of a site?
You marked your resource according to all the rules, and the Yandex micro-markup validator showed that everything was done without errors. How many points will your site climb up the search ladder?
Semantic markup only indirectly affects relevance, and it is impossible to say the exact number of positions to which it will raise the site. However, micro-markup is one of the key factors in attracting the user's attention. An interesting and attractive snippet will bring more visitors, and the site's position will grow. The rest will depend on the content and relevance of the resource.
Benefits of micro-markup
In addition to the visibility of the resource, micro-markup significantly increases the weight and quality of the site among competitors. The following advantages of markup are worth highlighting:
- It increases trust on the part of search engines, it is easier for a search robot to highlight the main elements of a page, which means it becomes easier for them to index us. If we describe this process in a very simplified way, then we can say that the search engine is pleased that we open the heart of the site, our internal secrets to him, and his trust in us increases.
- In the eyes of the consumer, sites with snippets look not only more noticeable, but also of higher quality. Accordingly, such resources are more often clicked, which means that the CTR in the search results or the click-through rate increases.
- The owner has a unique opportunity to show information that will be noticed even if the user did not go to the site.
- The snippet information can always be changed, and this will not affect the position of the resource in the list.
But, of course, when seo-promotion, you shouldn't dwell only on the development of micro-markup. It is imperative to have useful and unique content, but not only. There are many more factors affecting the rise of a site in the ranking of the search engines "Yandex" and Google.
Other ways to promote your site
Internal promotion, which includes the micro-markup "Yandex" and Google, has several directions:
- the use of keywords in the domain and site headers;
- the presence of keywords on the page itself, their even distribution in the text, location in subheadings, tags;
- correct error-free HTML markup (checked using Yandex Webmaster tools);
- the presence of megatags (keywords, description, etc.), indicating the essence of the page to the search engine;
- linking - that is, links to other pages of the site;
- simple site structure that allows you to move to the main page in a click;
- memorable and clear design;
- work with social networks, the ability to recommend the information you like to others;
- availability of a sitemap;
- unique, interesting and regularly updated content, useful and relevant for the reader;
- optimized CMS for fast and error-free page loading.
In addition to internal promotion, work should be carried out with external factors. A web programmer should regularly monitor whether links to the site are displayed on other resources, how significant and authoritative this link mass is (this process is determined using thematic and weighted ones. One of the external citation methods is also placing advertising banners of the resource.
According to the latest research, one of the most effective ways to promote is by discussing or mentioning a site on social media. The search engine sees the active movement of this information and perceives it as relevant and in demand, thus increasing the rating of the resource.
For online stores, it is effective to use comments and customer reviews, both on the site itself and on thematic forums, portals with reviews, etc.
Instead of a conclusion
Online promotion is a complex multifaceted process that requires intensive work on various external and internal factors. This is not to say that any of the above methods is absolutely correct, and it is he who will bring your site to the top. Finding yourself on the top lines of search queries is possible only with complex work on all aspects of SEO promotion, in particular, micro-markup should be given a huge role.
It is very important to convey to the search engine that you are trying in every way to simplify its selection and do this not only for the sake of a high rating, but also for the convenience of the user, more precisely, first of all, so that a person finds this information on the Internet.
Yandex and Google are directly interested in the user receiving the necessary information, which means that the more loyal your resource is, the greater its chances of taking a place in the top.
It doesn't matter what kind of markup you use - OpenGraph, schrema.org or some other, the main thing is that it is executed without errors and highlights the key points of the resource pages. Check it regularly with a validator, conduct an in-depth analysis of each side of your activity, and then great results await you!
Many have heard of micro-markup, but never used it. The main reason is a lack of understanding of what it is and why it is needed. Now we will tell you everything in order.
Semantic markup or micro-markup was introduced by search engines relatively recently (since 2011)... The main goal is to make the site more understandable for the search engine. Let's give an example right away.
It is important for a search engine to understand whether there is a phone number on the site or not. A lot depends on this. The phone number can be found by the mask +7 xxx xx-xx-xx and the like. There is no difficulty in this. But how can you tell a telephone from a fax? If the site itself does not "tell" which number refers to what, then it is impossible to do this.
The same difficulty exists with the text. How do you tell a recipe from a cooking article?
In order to solve these issues, the semantic markup of the material was created. In order not to complicate the life of web masters, an extremely simple format was created, very similar to layout.
Let's give the simplest example:
Suppose we have an excerpt from the layout of a contact page:
Everything is standard, there are no difficulties.
And now an example of the same excerpt, but with marked-up code.
DH Agency Contacts:
Address: St. Petersburg st. Fidelity 6
Telephone: +7 000 00–00–00 / span>, Fax: +7 000 00–00–00, Email: site
Pretty simple and intuitive, isn't it? You only need to know the syntax. All markup is done in the site code, you don't have to create any additional files.
We will immediately answer the most popular questions.
Why does a site need micro-markup?
If the search engine understands what material is on the site, then it will try to make the snippets as attractive as possible. Arrange price, conditions, answers / questions, reviews, etc.
For example, Yandex can write the price of a product next to your website.
In addition, micro-markup helps to more accurately understand the commercial factors - phone numbers, addresses, prices, and the like.
Does the presence of markup affect the position of the site?
There is no direct influence on the position and "visibility" of the site. However, there are indirect reasons:
- Micro-markup affects snippets and makes the site more visible in the search results. Which ultimately leads to an increase in traffic, all other things being equal.
- Yandex and Google love high-quality and understandable sites. Micro-markup is another step in bringing the site in order.
Do all sites need this?
Yes, everyone. The markup of contacts and other fundamental elements is desirable for any resource. But not for all types of goods and services, you can transfer data to snippets. For example, currently supported:
- Culinary recipes;
- Questions and answers;
- Reviews;
- Commodity prices;
- Descriptions of goods;
- Some other categories.
What types are there?
There are several options (syntaxes) to tell the robot what is on your site. The most common and used markup is shema.org "rules" markup. This is what Yandex recommends.
In addition to this markup, there is also (developed by Facebook). This type of markup is more focused on social. networks and is used by VK, FB, Twitter, Google Plus and others.
There is also another format - JSON-LD, but it is used only by Yandex Mail. It will not work to change information in snippets with its help.
Separately, I would like to say about. This is the same way of semantic markup of content, but it is quite different from all the previous ones. Microformats are quite popular. We will write about them below.
Schema.org
Schema.org is the most popular micro-markup format that is understood by all popular search engines. The format allows you to describe hundreds of different entities and tell about their properties.
The markup begins by creating a "container" in which all the data will be located. It looks like this:
Your data will be located here
Russia, St. Petersburg, st. Fidelity
Detailed syntax can be found on the official website - http://schema.org. (Not an official translation into Russian - http://ruschema.org)
Open Graph
This markup is used by all popular social networks - VKontakte, Facebook, Twitter, Linkedin. Yandex uses Open Graph to transfer data to its Video service.
In addition to forming a preview, this format is suitable for application developers.
Syntax and details can be found on the official website - http://ogp.me
Microformats
This is a fairly popular way of semantic markup for HTML pages. It allows search engines to understand the semantic meanings of content. It was made in a rather "unusual" way. To pass information to the search robot, the element is assigned the "class" attribute, which has a value similar to the name of the property. For example, the address will look like this:
Russia, St. Petersburg, st. Fidelity 6
Unlike other formats, you do not have to write "extra" tags.
Microformats are used by many services around the world, including Yandex. True, it should be said that at the moment Yandex does not support all microformats. (an up-to-date list of supported formats can be found on the Internet)
Detailed syntax information is available on the official website - http://microformats.org/wiki/Main_Page
What is the best format to use?
Yandex assures that it doesn't care what format you use. But it recommends using schema.org.
Examples of
We will only provide examples for the most popular schema.org. If you choose an analogue for your site, then you can always find examples on the Internet and on the official sites of microdata.
An example of micro-marking of contacts:
Contact information should be marked on all sites, without exception. This will allow the search engine to understand the commercial factors, as well as structure the snippet.
With micro-markup
Contact Information:
Factory address: Moscow st. Lenin 140
Telephone: +7 945 00–00–00 / span>, Fax: +7 945 00–00–00, Email:
Example of product microdata:
Micro-markup is most effective when describing goods. The snippet displays the price, benefits, product description and other important information.
With micro-markup
Plush hedgehog "Uf Uf" Factory of plush hedgehogs "Immediately" Model number 964893NM A textual description of the product.
Cost of goods Seller of goods
An example of article micro-markup:
The code turned out to be quite large, but this is a complete markup of the article. This is exactly what it should be. The micro-markup of the article allows you to make the snippet more structured and human-readable.
With micro-markup
An example of micro-markup "bread crumbs"
Despite the fact that not all users use breadcrumbs, they need to be marked. Micro-markup will not only allow the search engine to better navigate your site, but will also display a list of subsections in the snippet, which will attract attention.
With micro-markup
- Main section
- Level 1 subdivision
- Level 2 subdivision
Google and Yandex do not allow webmasters to sleep peacefully - then they introduce new ways of ranking sites in the SERP - of the latter, taking into account the adaptability of the template on the site.
Then they stop taking the link into account when ranking or introduce some regular filters.
And now, the turn has come to the semantic markup of the site.
In general, for Google and Yandex, micro-markup and microformats are the main trend this year.
Actually, its standard appeared back in 2011, but if earlier the PS offered to add it to the site voluntarily, now it is voluntary and compulsory :), since sites that do not have it began to be indexed worse, it is more difficult for them to get to the top of the search results.
These are special tag parameters that are added to file code or text. They describe the properties of the document. To put it simply, with these tags we tell the search robot:
“This is my article title, this is an image, and here are the comments.
These are the names of the commentators, and this is me, the author of the site, in person. Don't confuse anything! "
From the Yandex documentation on site markup:
2. Why do we need semantic markup of the site?
It helps to build a structured hierarchy of all page data for search robots, as well as social networking robots, which will improve the presentation of the site in search results.
The page marked up in this way will become more understandable and transparent for robots of all substations.
Although Yandex representatives argue that the presence of semantic markup does not affect the position of the site, experience and observations show that the marked-up site is indexed by the PS much faster and better, and in the search results it is shown 3-5 positions higher than the unmarked sites.
This markup is useful for commercial sites (all sorts of different services, online stores, restaurants). Also, it helps to promote corporate web resources, a variety of sites and blogs.
Compare snippets in Google and Yandex search results with and without micro-markup:
Google microdata rating:
The first snippet shows breadcrumbs, rating, publication date.
Yandex microdata for organizations:
The first snippet shows all contact information, opening hours, address, link to Yandex map, which can be used to track where the organization is located.
Yandex microdata, bread crumbs:
The first snippet shows the breadcrumbs, publication date.
Yandex microdata, recipes:
The first snippet shows the image of the finished dish, ingredients, cooking time, and calorie content of the dish.
All this additional information is reflected in the search results due to the fact that it is marked up on the pages of the site in a special way.
3. What are the benefits of using semantic markup?
- Better, faster indexing of new articles and the site as a whole.
- Increased trust in the site from the PS.
- Better, more informative snippets in the search results - by showing additional information: rating, price, contact information (address, phone number), etc.
- Improving the site's behavioral factors (more clicks from search results).
I hope I've convinced you that micro-markup is really needed.
Now about what markup exists, as well as what Yandex understands from it.
4. Types of micro-markup
In Google Search Console - there is a "Structured Data" item.
Figure 1 - errors in micro-markup
It's better to start your site's micro-markup by checking this section. It often happens that the markup validation tools do not show any warnings or errors, but in reality search engines have difficulty structuring the data on your site.
Figure 2 - Hentry micro-markup errors
In our case, we see that there are 106 errors that relate to the markup of the hentry format (microformats.org)
- micro-markup built into the WordPress core. Since it is embedded automatically and is not adapted for third-party templates, it often does not work correctly, and this leads to the fact that Google Search Console detects such errors:
Figure 2.1 - Hentry: author, entry-title, updated errors
But, at the same time, a tool for checking micro-markup from Google - absolutely calmly reports that there are no errors and no warnings about this. ()
Fig 3 - Google does not see hentry errors
On our site, we will use the unanimously recognized micro-markup - schema.org, recognized by all search engines.
This standard is supported by both Yandex and Google.
Therefore, the built-in hentry micro-markup, which gives us 106 errors in Google Search Console - you just need to delete it.
Since hentry is added to the core wordpress -, which allows you to remove it through filters, because these classes are not visible in the templates.
Source code to remove hentry:
Add_filter ("post_class", "fc_remove_hentry", 20); function fc_remove_hentry ($ classes) (if (($ key = array_search ("hentry", $ classes))! == false) (unset ($ classes [$ key]);) return $ classes;)
The code needs to be added to functions.php
This can be done by any convenient method, for example, through the editor from the admin panel of the site.
Figure 4 - Removing hentry markup from the entire site
After saving the file and re-validating the page through Google's markup checker tool, hentry should be gone.
Check a few pages that have errors to make sure the hentry is completely removed from the site.
In Google Search Console, you will see a positive trend in reducing the number of errors. Over time, they will disappear altogether, you just have to wait.
Figure 5 - positive dynamics of reducing hentry errors
How to remove the error:
ERROR: field http://ogp.me/ns#image is missing or empty
Fig 6 - Open Graph ns # image error
You need to understand that errors of this kind are associated with the already written micro-markup. That is, the site is either embedded or added by someone earlier micro-markup, which has errors.
Most often this happens when plugins are incorrectly configured, which are directly or indirectly responsible for micro-markup.
In our case, the site has a plugin - SEO Ultimate, which has a special section responsible for the Open Graph markup. This means that the error related to http://ogp.me is contained in the SEO Ultimate plugin.
Go to the following path SEO Ultimate -> Open Graph -> Default Values -> Default Image
We find the setting of the picture, which will be applied by default on those pages of the site where the desired picture will not be found.
Figure 7 - How to fix the Open Graph ns # image error
Add the URL of the image that we would like to see by default. Let me remind you that The Open Graph protocol is responsible for displaying beautiful posts on social networks, Facebook, Twitter, VKontakte, and so on. That is, this picture, which you set by default, will appear in social media posts, reposts, and so on. Choose branded and respectable photography.
After saving the changes, the error disappears.
Figure 8 - Open Graph ns # article error
But there is still an error related to the unknown prefix article.
We already know that the SEO Ultimate plugin is installed on our site. We continue to dig in the same direction.
Figure 9 - How to fix the Open Graph ns # article error
Install Open Graph Type - Website.
Figure 10 - Correct Open Graph Markup
After all the changes, the Yandex markup validator no longer generates any errors:
Figure 11 - Valid Open Graph Markup
Adding micro-markup for bread crumbs
Breadcrumbs are a chain of links from the home page to the page where the user is currently located.
First, you need to analyze the site for the presence of bread crumbs.
Rice 12 - bread crumbs on site
There are bread crumbs on the site. Now you need to understand how they are displayed. In the source code of the breadcrumbs, we find the name of the plugin with which they function - Breadcrumb NavXT 4.0.2
Figure 13 - Breadcrumbs are withdrawn via Breadcrumb NavXT
Open the admin panel of our site and go to editing the Breadcrumb NavXT plugin.
Figure 14 - Breadcrumb NavXT Settings
We are interested in templates for different types of pages: for the main page, for a blog, for categories, and so on. You need to understand that each site will be different.
In our case, we are interested in:
- Blog Page Link Template
- Home Template
- Blog Category Template
- Category link template
All templates have a standard view like:
To get the correct micro-markup, we need to mark up this source code using the standard http://schema.org/BreadcrumbList
- Dresses
- Real Dresses
Let's take a look at what elements the markup contains and how they should be applied:
itemscope itemtype = "http://schema.org/BreadcrumbList"
This element marks the beginning of the markup area. All that will be inside this element will be the breadcrumbs markup.
In the example, the element is inside a numbered list - tag
This is optional, you can use
, or other similar tags. You need to look at the circumstances and remember that from which tag you use such CSS and will connect to breadcrumbs. That is, the appearance of your breadcrumbs depends on which tags you frame http://schema.org/BreadcrumbList. In our case, we will add this line of code via the breadcrumb_navxt_widget.php widget source code Since this file is not available through the standard code editor of the WordPress admin panel, we will use ftp access through filezilla. Figure 15 - Breadcrumb NavXT Widget Settings We find a piece of code that is responsible for micro-markup, and specifically we need a tag that frames this markup. Figure 16 - The code that frames the Breadcrumb NavXT
AdBlock is a major problem in the online advertising industry today. The number of users blocking advertising content is gradually increasing, while the profits of site owners are decreasing. Numerous subscriptions allow owners of extensions to significantly increase the list of unwanted elements by adding not only ads to it, but also, for example, social widgets or scripts for collecting statistics installed on the page, which seriously increases the privacy of browsing and complicates the involvement of visitors in the process of integrating the site with social networks. Sooner or later, developers are faced with the question: how to check for the presence of AdBlock and minimize the "damage" it causes?
How ad blockers work
From a technical point of view, AdBlock, uBlock Origin, AdGuard and other similar browser extensions (hereinafter referred to as AdBlock) do not block ads themselves, but the corresponding network requests: when the page loads, each connection is checked against the list of prohibited ones and, if necessary, is rejected. In the blockers themselves, this is called surge protector... It can contain both a specific list of domains, for example, ad.mail.ru, and parts of the URL - / ucoz / img / uads /, which allows you to block requests even if the mask matches.
It happens that, as a result of filtering, the site loses its normal performance or the capabilities of the network filter alone are not enough to block unwanted content. To do this, hiding elements is provided in blockers - cosmetic filter which is applied by embedding high-priority CSS rules in the document that hide ad areas, usually by using the display property or in some situations by adding the hidden attribute.
The work of the uBlock Origin cosmetic filter on the example of VKontakte advertising: the #ads_left element is forcibly hidden by inline CSS with an impressive size selector.
For blocked or hidden content, an exception to the rule is available: if the user wishes, the extension can ignore unobtrusive (acceptable) advertising- banners, ads and links that are complementary to the main content, do not focus too much on themselves and in some cases are useful. Unfortunately, it is virtually impossible for ordinary sites to get into the whitelist, which means that ad blocking is guaranteed by default.
But advertising is not the only filtering object. Blocking external resources or hiding items depends on subscriptions that are included in the custom AdBlock. Each subscription focuses on a specific type of inappropriate content and is updated periodically.
Popular subscriptions
Unwanted content, on the basis of which filter lists for ad blockers are compiled, can be roughly divided into groups. The list is not exhaustive, but covers the main objects of filtration.
- Advertising - any elements of the page, including resources connected from the outside, in the identifiers, classes and attributes of which there are expressions prohibited by the filter. Usually, the subscription is compiled with a regional account, for example, EasyList + RuAdList.
- Elements of social services - buttons "share", widgets of social networks and other elements embedded through the API. The main list is.
- "Annoying" elements - auxiliary content of the page: buttons for subscriptions, RSS, scrolling up; newsletter forms; blocks with warnings, information about the privacy policy and the use of cookies, etc. All this is contained in the Fanboy's Annoyance List.
- Statistics services - traffic counters and scripts that track user behavior are actually not advertisements, but they are recommended for blocking in order to increase privacy. Among such lists, it is worth highlighting EasyPrivacy and regional RuAdList Counters.
- Elements "Anti-AdBlock" - banners, modals and pop-up notifications that are displayed to users with enabled extensions and urge to disable the blocker and / or restrict the functionality of the site. The answer to them are lists of the Anti-AdBlock Filter type.
- Malicious and fraudulent content - sites that harm the computer and the user are blocked by all means: search engines, antiviruses, browsers. Anti-ad extensions also offer similar filters, such as Malware Domains.
- Custom blocking rules - the user can independently block a specific network request or hide an element on the page, which will be recorded in a separate filter.
Thus, the list of "candidates" for potential hiding or blocking significantly increases, and the question arises of how a developer can take this problem into account when coding a site.
Layout taking into account AdBlock
Periodically renewed subscriptions with a huge number of blocking rules cannot be thoroughly analyzed, and based on them, it is impossible to compose universal recipes for the correct layout of content that may fall under the influence of filters. The most correct solution would be to install all kinds of subscriptions and check a specific site through the blocker's logs. Below are general layout guidelines for the two most common types of content - ads and social widgets.
Advertising blocks
Due to the fact that the cosmetic filter, similarly to the network filter, also works on a mask and checks the names of identifiers, classes and attributes of elements with those specified in the list, regardless of the domain, such elements as, for example, #adv, .ad-google, .banner125x125, .sponsor can be filtered -logo, a and many others, therefore, in order to avoid layout distortions, such names are not recommended for designating elements in HTML markup and for specifying the content of the href, src attributes in links, images and frames: they will be hidden by default, even if the developer does not meant by them advertising content.
To minimize the effects of cosmetic filters, care should be taken to ensure that content that could potentially be hidden parent container with its equivalent width and height, which is especially useful for relatively large ad units:
Using this simple technique, when an element falls under a filter, an empty space appears in its place, which can be used, for example, to display a placeholder or from blocking rules.
It is important that AdBlock also parses the attributes of elements, therefore, links whose href contains an explicit indication of advertising are recommended to be replaced via URL shortening services, and the contents of the src attribute of images should be converted to base64 if possible:
Social widgets
Almost all popular "social scripts" are blocked by both cosmetic and network filters: the mentioned subscription Fanboy's Social Blocking List contains a significant number of class names and identifiers that are often used when coding blocks that include social widgets: .b-share, .article__footer-share-title, .connect-icons and many others, as well as masks for external scripts, for example, / fbshare .js, /share42.js, /twitter.js.
AdBlock is the reason for hiding not only ads, but also blocks with social buttons. The default cosmetic filter adds display: none to an element with class .article__share. To restrict the actions of filters to such elements, developers should, if possible, abandon popular solutions in favor of their own scripts (example of creating their own hands) and more selectively use names to denote content in the markup. The same applies to images used, as a rule, as social icons:
Obviously, it is not always possible to "save" content from blocking, and the best thing to do in such a situation is to ask the user to exclude the site from the AdBlock filters. It is not necessary to use JS to display a call: it is enough to apply simple CSS techniques, which will be discussed below. But first, it is worth considering the issue of the content and place of appearance of the appeal on the page, since its main goal is not only to attract the attention of the visitor, but also to obtain consent.
How to correctly ask the user to disable AdBlock?
To post notifications and requests (or links to them) to include the site in exclusion from filtering, it is recommended restrict yourself to the space where the advertisement was supposed to appear, since being guided by the principle “turn off AdBlock or leave” and forcibly depriving you of the opportunity to use the site normally means losing the loyalty of your visitors.
When disabling AdBlock is a categorical prerequisite, it demotivates and forces the visitor to look for other sites or, if it happens that he has no other options, spend time bypassing such blocking, manually hiding intrusive elements from the page.
An example of the correct display of a request to disable AdBlock on Habré. The link to the appeal is unobtrusive and is placed strictly in the place of the advertising banner. The correct address (or reference to it) should be unobtrusive, that is, not focus too much attention on itself, but at the same time - be noticeable to the user. It is desirable to provide convincing arguments in the text: for example, indicate the dependence of advertising revenue and the cost of maintaining the site. Finally, the site itself must be useful and important to the user. Exactly quality content and the ability to give the visitor what he is looking for are the main factors of audience loyalty. Therefore, in addressing the user, it is advisable to emphasize what exactly the site gives him in exchange for loyalty and with what costs or efforts of developers the high-quality provision of this information, goods, services is associated.
This can be illustrated by the example of a request from the mentioned IT community, even a small fragment of which reflects a respectful attitude towards the participants:
As opposed to being discreet and discreet in a specific part of the site, developers often use large, fixed-positioning modals that shade the entire viewport. It is not recommended to resort to this for at least two reasons:
- 1. A more or less experienced user, if desired, can easily hide with a cosmetic filter almost any element of the site that interferes with him, including such a modal window.
- 2. This technique is harmful from the SEO point of view, since it can be viewed by search robots as cloaking - an attempt to hide content.
In conclusion, the question of the correct formulation of the request, it should be emphasized that advertising itself should not be abused - AdBlock was originally meant as a response to annoying content. Huge flashing banners on the half of the page, located in the center of the screen, will scare off even the most loyal users who decide to exclude the site from the filters.
Conclusion of a request to disable AdBlock on CSS
There are at least two simple options for implementing the output messages asking you to disable AdBlock in pure CSS without JavaScript: through the: empty pseudo-class and overlaying two elements on top of each other through the position and z-index properties. The first option is more likely for a surge protector, the second is more versatile, since it potentially takes into account the effect of a cosmetic filter as well.
Adding a pseudo element to the parent container
If the script that generates ad content and inserts it into the given empty block will not load due to line filter, then this container will remain without children and the pseudo-class: empty will continue to operate for it. In a trivial way, this can be demonstrated as follows:
In the example, the external JS file inserts a new element into the block with the data-insert attribute. If the script does not load due to a network filter, the: empty pseudo-class styles will be applied to the .container element:
However, this method does not take into account the situation when the ad script has loaded, generated and inserted the necessary elements into the desired container, but later they were hidden by the cosmetic filter.
Overlaying one block on top of another
If the ad unit is not showing because of the cosmetic filter, i.e. an element with an advertisement inside is forcibly hidden by display: none! important, then the: empty pseudo-class will become useless:
To solve the problem, it is proposed to create additional element that directly contains a message asking you to disable the ad blocker, but place it on a layer below, that is, position it under the ad unit so that it is visible only when the display: none rule has been applied to the visually overlapping element. To do this, you need to carry out simple manipulations with the position and z-index properties:
Unlike the previous case, when it was necessary to operate only with styles for the :: before and :: after pseudo-elements, this approach expands the possibilities of styling and editing a notification that is already a full-fledged DOM element, which means, by analogy with how it is implemented in Habré , in addition to plain text, you can add a button or a link to a full appeal to the user in the block:
JSFiddle is not available without JavaScript
The only drawback of this technique is that an absolutely positioned .request element will be limited to the area of its parent, so this code is inappropriate if there is a need to display a modal in the center of the screen and shade that occupies the entire viewport. You can't do without JavaScript to solve this kind of problem.
How to check for AdBlock via JS?
The mechanisms of the network and cosmetic filters open up the opportunity for developers to determine the presence of AdBlock extensions using JavaScript: the loading state of the script connected to the page is tracked by the onload and onerror events or the ability to correctly call the methods and functions contained in it, and the visibility of the element is through the analysis of the CSS properties applied to it display. Based on this, there are several ways AdBlock detection.
Using an external script
The first option is to connect an external script to the page with a name suitable for the filtering mask and the content that needs to be checked for execution. For example, a file named ads.js might contain just one variable:
// ads.js var adb = "";
Accordingly, when the ad blocker is enabled, the ads.js file will not be loaded, and the adb variable declared inside it will not exist. Checking the script execution is a trivial condition that must be placed below the included file:
If (typeof adb === "undefined") (// AdBlock enabled) else (// AdBlock disabled)
The second option is similar to the first: the external ads.js script can be empty (but not return a 404 error), and the check for blocking is to add onerror or onload events to it, which will be processed by a separate function with one parameter, for example, adsLoaded (status ):
Var adsLoaded = function (status) (if (status === false) (// AdBlock is on) else (// AdBlock is off))
In the HTML document, the plug-in script must have the appropriate handlers:
The disadvantage of these methods is the creation of a separate file and an additional request to the server.
Checking the visibility of an element
This approach does not imply the creation of external scripts or tracking the state of their loading: the check is carried out on a specific element by analyzing the CSS display property applied to it. Considering the delay in initializing the ad blocker cosmetic filter, it makes sense to use the getComputedStyle () method to check the final computed value and wait until the page and external resources are fully loaded:
Window.addEventListener ("load", function () (if (window.getComputedStyle (document.getElementById ("my-adv")). GetPropertyValue ("display") === "none") (// AdBlock enabled) else (// AdBlock is off));
This is the most optimal way to check the blocking of not only ads, but also any other content.
Functions of advertising scripts
Advertising scripts have their own methods and functions that cannot be called when an external file is not available. For example, Google adsense creates a google_jobrunner object and embeds ads across elements with class .adsbygoogle:
Document.addEventListener ("load", function () (if (typeof window.google_jobrunner === "undefined" || document.querySelector ("ins.adsbygoogle"). InnerHTML.replace (/ s / g, ""). length === 0) (// AdBlock enabled, Adsense script blocked)));
Checking for AdBlock with the definition of subscriptions
After analyzing which elements are filtered by the blocker, you can make a guess on the availability of the corresponding types of subscriptions for the user. The decrease in the accuracy of the definition is influenced by two factors - a custom filter list and a large number of "official" subscriptions, the blocking rules of which often overlap.
The essence of the check is to create on the page invisible to the user, but visible to the AdBlock "fake" elements with identifiers, classes and attributes indicating belonging to a certain group of content. Items that fall under the effect of the cosmetic filter will testify in favor of the presence of the corresponding type of subscription, that is, in general, indicate what kind of content is being blocked by the user:
In order not to litter the DOM with unnecessary garbage, elements should be removed immediately after validation.
JSFiddle is not available without JavaScript
As you can see from the example, the adbCheck () function returns an object, so if necessary, you can only refer to the property of interest:
Var result = adbCheck (); result.ads_block; // advertising result.cnt_block; // counters result.soc_block; // social widgets result.ang_block; // annoying elements result.ant_block; // anti-adblock elements result.scm_block; // fraudulent sites
Finally
Accounting for the actions of AdBlock filters is an indicator of a high-quality layout of the site and taking into account the segment of visitors who not only do not see ads, but, quite possibly, cannot use share social widgets and are not counted by visit counters and other statistics services. It is this wide range of filtering objects - from advertising scripts to social buttons and tracking elements - that popular subscriptions provide today. Checking for AdBlock is worth paying particular attention to on sites that rely on ad revenue or heavily use social widgets. In turn, a correct, tactful and unobtrusive appeal to a visitor can seriously contribute to a revision of his attitude towards blocked content.
Adblock is a special plug-in program that hides ads from users' eyes. It comes as an addition to the search engine, and its essence is to block pop-ups, banners and other unwanted information that distracts from viewing the main content of the web page.
The Adblock extension is as easy to disable as it is to activate. Sometimes there is a need to display all the materials on the site, or the information is displayed incorrectly, and there is no need to block ads - in this article we will take a closer look at how to disable Adblock in the most popular search engines - Google chrom, Yandex, Opera and Mozilla. We will also consider the features of connecting and disconnecting the Adblock program on phones, tablets and smartphones with software based on the Android OS.
How to disable adblock in Google Chrom
The Adblock extension is the most popular ad-blocking add-on to your web browser. There are different versions of this program, the most recent of them block not only advertising messages, but also malicious links while browsing the Internet. In different search engines, the principle of disabling this program is rather monotonous. Let's consider two ways to disable Adblock and Adblock Plus (enhanced version) in the Google Chrome search engine.
The first way
- We open the browser.
- In the upper right corner we find the icon of the Adblock program (in the example we will insert two extensions - Adblock and Adblock plus, a more advanced version), click on it.
- A menu window will open, select the "Pause program" option, click on it.
- The Adblock program icon becomes inactive (green). To turn on the program, follow the same steps as when turning it off.
Second way
- We open the Google Chrome search engine, in the upper right corner we find the "Settings and Management" icon, click on it.
- In the menu that opens, we find the "Settings" option, go into it.
- A window of internal browser settings will open, we do not need them. In the upper left corner, click the "Extensions" tab.
- After clicking it, a list of extensions will appear on the screen, select Adblock and Adblock Plus from the list, uncheck the boxes opposite these programs.
- After unchecking the boxes, the "Enabled" command will change to "Enable".
Third way
- Open the search engine, in the open window, click the "Settings and Management" icon.
- In the open menu, look for "Additional Tools", then "Extensions", uncheck the boxes opposite the Adblock programs. Extensions are inactive.
How to disable adblock in Opera browser
It will take a couple of minutes to disable the program for blocking ads in the Opera browser.
- We open the search engine.
- On the left of the taskbar at the very bottom, we find the extension icon in the form of a puzzle piece.
- Click on it, find active extensions (Adblock), give the command "Disable". The extension is paused in the Opera browser.
How to disable adblock in Yandex
The Yandex search program is very similar to Google Chrome, and the differences between them are very minor. Consider disabling Adblock in this search engine.
- We go to the Yandex browser.
- In the upper right corner we find the Adblock icon - usually it is an open palm on a red background, click on it.
- An additional menu will open, perform the "Pause Adblock" operation.
- After the operation "Pause Adblock" is completed, the extension icon will change to "Class" on a green background - this means that the application is inactive.
Disable adblock in Mozilla Firefox browser
Mozilla's search engine is becoming less and less popular against the background of more practical Google Chrome and Yandex, but many users still prefer this service as the most reliable and stable search engine. Consider disabling Adblock in this search engine.
- Open the Mozilla browser.
- In the upper right corner we find the already familiar program icon, click it.
- The context menu is highlighted, select "Disable everywhere" there.
- The Adblock extension is inactive, as indicated by the gray color of the icon.
Adblock program in the Android operating system
The use of Adblock on phone devices, tablets and smartphones has its own characteristics. In Android, this extension comes as a separate web browser, with which you can search the Internet. At the same time, the program itself filters ads and malicious links, you only need to install this program yourself using the Google play service (Play Market).
If Adblock is installed on your device and you want to disable the ad blocking function, you will need to do the following:
- Open the Adblock browser on your phone (tablet, smartphone).
- Go to the browser settings (this is done using the left key on the touchscreen phone), find the "Options" menu, click on it.
- In the "Parameters" we find the "Ad Blocking" option, which will allow you to set the desired blocking parameters, language and default settings.
We have looked at the examples of disabling Adblock in four different browsers, as well as the features of disabling ad blocking in the Android operating system. The Adblock extension also allows you to disable blocking on separately viewed pages by pre-setting certain settings. This supplement has many analogs, as well as different versions, which differ in target orientation and spectrum of action.