Website navigation bar prevents insertion of Adsense automatic ads

Google Adsense automatic advertising is worry-free, but sometimes it places ads in inappropriate locations, seriously affecting user access. For example, this site of mine will inexplicably insert ads above or below the navigation bar (inside the blue box). This smart algorithm is also intoxicating.

The solution I took before was to directly exclude the corresponding block in the background setting. This may reduce advertising and affect making money. Anything that goes against making money must be done at a minimum.

Later, I opened the browser debugging tool in the "Ad Settings Preview" and found that Google inserted the advertising code parallel to the nav in <header></header>.

First look at the code in the header.html part

Google's algorithm seems to give priority to inserting advertising blocks into the header, with one advertising space above and below the nav, which is a prime location after all.

The automatic advertising algorithm is not omnipotent. In the theme I use, header and nav are strongly related, and some styles of nav are inherited from header. If no changes are made, the result will be advertisements inserted into the blue bars of the navigation bar, which is extremely ugly and intolerable.

My arms can’t twist my thighs. Here’s my solution:

1. Put the header style into nav

In this way, the header style is empty, and Google can do whatever it wants. The nav is independent. As long as you are not stupid enough to put ads in <nav></nav>, the navigation bar is still there, the functions are displayed, and the style is normal, it will not affect the user's use. .

By the way, I also changed the page to facilitate widescreen display of "sidebar ads", which I learned from others (after all, maintaining a website also costs money, and the domain name, hosting, and time spent are far from being paid back).

2. Let nav be always displayed

 1.nav
 2   color: $haze
 3   display: flex
 4   justify-content: space-between
 5   background-color: $bg
 6   padding: 0 1.5rem
 7   position: relative
 8   width: 100%
 9   z-index: 999999
10   left: 0

The core attributes are: position: relative and z-index: 999999. The result is that nav always has a place. If the navigation is blocked or confused, it will seriously affect the user's access to the website. The information entrance must be tightly controlled.

3. View results

Finally, the ad module is displayed in the ad preview, and it is confirmed that it will not be squeezed into the nav. It is either above or below, and it does not affect navigation.

As shown below:

Everyone's website theme is different. If you encounter a similar situation, readers can look at the source code and see which blocks Google Adsense automatically inserts, and deal with it according to the situation.