Where to Place Google AdSense Code in Your HTML for Best Results
You’ve been approved for Google AdSense and have your code snippet ready. Congratulations! Now comes the technical part: where exactly do you paste this code in your HTML? Proper placement is key for ads to show up correctly and for maximizing visibility and revenue.
This guide will show you precisely where to put the two main types of AdSense code: the main script and individual ad units.
Part 1: The Main AdSense Script (The Head Tag)
When you sign up for AdSense, Google gives you a main piece of code. This script is responsible for connecting your site to AdSense and enabling features like Auto Ads. This code must be placed on every page where you want to show ads.
The rule is simple: place this script inside the <head> section of your HTML, ideally right before the closing </head> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Awesome Website</title>
<link rel="stylesheet" href="css/style.css">
<!-- GOOGLE ADSENSE SCRIPT GOES HERE -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-YOUR_CLIENT_ID"
crossorigin="anonymous"></script>
</head>
<body>
... your page content ...
</body>
</html>Placing it in the <head> ensures it loads early, allowing Google to begin the process of selecting and displaying ads as soon as possible.
Part 2: Manual Ad Units (The Body Tag)
If you prefer more control over where ads appear, you can create manual "Ad units" in your AdSense account. For each ad unit, Google gives you a different, smaller code snippet. This snippet goes in the <body> of your HTML, exactly where you want the ad to appear.
Common Placement Locations:
- In a sidebar: A classic location for vertical or square ads.
- Between paragraphs of content: Great for display ads within a blog post.
- In the header or footer: For banner ads.
Example: Placing an Ad Unit in an Article
Let's say you want to place a 300x250 ad unit after the second paragraph of your blog post.
<h1>My Blog Post Title</h1>
<p>This is the first paragraph of my amazing article. It contains a lot of interesting information that keeps the user engaged.</p>
<p>This is the second paragraph. After this paragraph, we want to show an ad to monetize our content.</p>
<!-- START: AdSense Ad Unit Code -->
<div class="ad-container">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-YOUR_CLIENT_ID"
data-ad-slot="YOUR_AD_SLOT_ID"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- END: AdSense Ad Unit Code -->
<p>This is the third paragraph, which continues after the advertisement. The user can continue reading here.</p>
Pro Tip: Always wrap your ad unit code in a <div> with a class (like ad-container). This gives you a simple way to control the ad's alignment (e.g., center it) and margins using CSS, so it doesn't sit too close to your text.
Best Practices for Ad Placement
- Don't Violate Policies: Never place ads in a way that tricks users into clicking them or that covers your content.
- Consider User Experience: Too many ads, especially at the very top of the page, can be annoying and increase bounce rates.
- Above the Fold: Placing at least one ad "above the fold" (visible without scrolling) generally performs well, but balance it with your main content.
- Test and Measure: Use AdSense reports to see which ad placements are performing best and adjust accordingly.
Conclusion
AdSense placement in HTML is straightforward once you know the rules:
- The main AdSense script always goes in the
<head>of every page. - Manual ad unit snippets go in the
<body>, exactly where you want the ad to display. - Wrap ad units in a
<div>for easy styling with CSS.
By following these guidelines, you'll ensure your ads are displayed correctly and are set up for success.
Use our Live HTML Viewer to safely test how different ad placements look within your layout before deploying to your live site.