How to Fix Alternate Page With Proper Canonical Tag in Blogger Website
GUNTURSAPTA.COM - You're encountering an issue with alternate pages in Blogger. This is a common problem where Blogger creates mobile versions of your posts (usually indicated by ?m=1 in the URL) and these duplicate pages can harm your SEO.
Here's how to properly implement canonical tags to fix this:
Understanding Canonical Tags
- Canonical tags tell search engines that a particular page is the "original" or preferred version of a piece of content.
- By using canonical tags, you prevent duplicate content issues and ensure that search engines index the correct version of your pages.
Implementing Canonical Tags in Blogger
1. Using Blogger's Built-in Feature:
- Go to your Blogger dashboard.
- Navigate to Settings > Search Preferences.
- Under "Mobile URL," choose "Use the same URL for all devices."
This option tells Blogger to serve the same URL for both desktop and mobile versions, eliminating the need for separate mobile pages.
2. Adding Canonical Tags Manually (if the built-in feature isn't working):
Use the Blogger Template Editor:
- Navigate to "Template" in your Blogger dashboard and click on "Edit HTML."
- Locate the
<head>section of your template. Add the following code just before the closing
</head>tag:<link rel="canonical" href="{{{ postUrl }}}">Explanation:
rel="canonical"indicates that the provided URL is the preferred version.{{{ postUrl }}}is a Blogger template variable that automatically inserts the correct URL of the current post.
Use a Blogger widget:
- If you're comfortable with using widgets, you can find a widget specifically for managing canonical tags. Some of these widgets automatically handle the insertion of the
{{{ postUrl }}}variable.
- If you're comfortable with using widgets, you can find a widget specifically for managing canonical tags. Some of these widgets automatically handle the insertion of the
Example:
Let's say your original post URL is: https://www.rakyatmediapers.co.id/2024/04/ucapan-idul-fitri-2024-bahasa-arab-15.html
The canonical tag will be:
<link rel="canonical" href="https://www.rakyatmediapers.co.id/2024/04/ucapan-idul-fitri-2024-bahasa-arab-15.html">
Important Considerations:
- Mobile-First Indexing: Ensure your mobile pages are optimized for mobile devices. With mobile-first indexing, Google primarily uses the mobile version of your site for indexing.
- Testing and Monitoring: After implementing the canonical tags, it's essential to monitor your website's performance using Google Search Console. Check for any errors or warnings related to duplicate content.
By following these steps and carefully implementing canonical tags, you can address the issue of alternate pages in Blogger and improve your website's SEO.
You're right, manually adding <link rel="canonical" href="{{{ postUrl }}}"> to each individual post in Blogger would be tedious! Here's how you can automate it for your entire blog:
1. Using Blogger's Template Editor:
- Navigate to your Blogger dashboard: Go to "Template" and click "Edit HTML."
- Find the
<head>section: Locate this section within your Blogger template. Insert the code: Just before the closing
</head>tag, add the following:<b:if cond='data:blog.url != data:post.url'> <link rel="canonical" href="{{{ data:blog.url }}}"></link> </b:if>Explanation:
<b:if cond='data:blog.url != data:post.url'>: This Blogger conditional statement ensures the canonical tag is only added when the blog URL (the main site URL) is different from the post URL. This prevents adding the tag to your blog's home page or other pages that are already the canonical version of themselves.<link rel="canonical" href="{{{ data:blog.url }}}">: This inserts the canonical tag, using thedata:blog.urlvariable to automatically pull in the main blog URL.
2. Using a Blogger Widget:
- Search for a Blogger widget: You can find widgets specifically designed to handle canonical tags in bulk. These widgets often have settings to define your blog's canonical URL and automatically add the necessary tags to your posts.
Example:
Imagine your blog URL is https://www.rakyatmediapers.co.id. Here's how the code works in practice:
- Post URL:
https://www.rakyatmediapers.co.id/2024/04/ucapan-idul-fitri-2024-bahasa-arab-15.html - The
ifcondition is met: Since the post URL is different from the blog URL, the condition is true. Output: The following canonical tag is added:
<link rel="canonical" href="https://www.rakyatmediapers.co.id">
Important Notes:
- Blogger Updates: Make sure your Blogger theme or template is compatible with these methods. Blogger might update its template system, so always check for any potential conflicts.
- Testing: After implementing the canonical tags, use Google Search Console to check for any errors or warnings regarding duplicate content.
By applying these techniques, you can easily automate the process of adding canonical tags to all your blog posts, simplifying your SEO and avoiding potential duplicate content issues.