Canonical Tag- on page by page

Elements
1

ON the Elements Settings > Meta data > Edit Extra Code panel I added Canonical URL tags in the </> Head Start section specific to each page on the site. In the online published version I can view the tag as entered when I open Safari>Develop>View Page Source. Now I would like to go back and change each pages Canonical to point only to my “Home Page” When I go into Edit Extra Code the Canonical meta tag is no longer there to edit. Other tags e.g. <meta name "description..> are there to edit. How do I view and change the existing canonical tags?. (I note Elements AI bot search “While it doesn’t (yet) expose a UI for a custom canonical tag, it does keep your URLs clean by default—usually removing the need to worry.”) Long story short - I want to go page by page and revise the canonical tag.

2

I don’t think you want to do that… if each page is authoritative on a particular subject or item, then the canonical should be itself or maybe the https version.

3

I’ve gone back and forth on whether to direct the tag to the home page or to itself. Google search console identifies only two webpages (index and form pages)out of eight as indexed - despite a tag directed at each page. Bing’s search engine flagged the multi canonicals as an SEO error.

Still curious why the canonical tags I added are no longer visible/available in the edit extra code tab. Also, how do I view and edit the source code on a page by page approach.

BTW Thank you.

4

This is from one of my SEO resources:

How to use canonical links correctly:

  • Every page should have a canonical link pointing to either the original content or the page itself.
  • There should be only one unique canonical link for each page.
  • The URL in the canonical tag should be an accessible page that has no technical errors or redirects.

more info:

5

I think the purpose of the canonical tag is being misunderstood. In content management systems like WordPress, the system often generates multiple versions of a page—such as archives, tag pages, or summaries that include excerpts from several posts. The canonical tag is used to indicate the original or primary version of the content.

Additionally, due to widespread content scraping and plagiarism, the canonical tag—along with metadata such as the publication and modification dates—can help signal the original source of the content to search engines. This assists in attributing proper authorship and origin.

The canonical tag should be used strictly to identify the original source of a specific article or post. Misusing it—such as by pointing many unrelated pages to a single “SEO target” page—can result in search engine penalties, including being flagged for spam or removed from search results.

6

I find I have near duplicate canonical meta tags on each website page. For example https:// and http://

I want to edit source code on each page to delete the canonical link for “http://”

How do I edit source code on each website page?

7

Appreciate the information.

8

Is this an Elements page?

Can you provide a link for us the page(s) you are trying to work on?

9

Sure: one of the pages with slightly different canonical links

(honestly, it’s not as bleak a site as the url suggests)

10

This is a long winded answer. But I think it addresses your concern. I ask AI. So this is unedited and needs more info from you to make complete. Like what kind of server you are using, etc. Just answer the best you can with what you know. I/we can add to this.

To tell search engines your preferred URL (also known as the canonical URL), especially when there are different versions of a page (like http vs https, or with/without www), it’s best to use a combination of methods to send a consistent, clear signal. Here’s a technically accurate guide with brief explanations:

:white_check_mark: 1. Use a Canonical Tag in the HTML

Purpose: Tells search engines which version of a page is the authoritative one.

How to do it:
In the <head> of your HTML, include:

<link rel="canonical" href="https://www.example.com/page-url/" />

Best practice: Always use the full, absolute URL, including the protocol (https) and domain.

:white_check_mark: 2. Set Up 301 Redirects for URL Variants

Purpose: Redirects users and bots from less preferred versions (e.g., http or non-www) to your canonical version.

Examples:

  • http://example.com → https://www.example.com

  • https://example.com/page → https://www.example.com/page

How to do it: Use server-level redirects (via .htaccess, nginx.conf, or similar).

:white_check_mark: 3. Be Consistent With Internal Linking

Purpose: Helps reinforce which URL is preferred by using the same format throughout your site.

Example: Always link to https://www.example.com/page/, not a mix of variants.

:white_check_mark: 4. Choose a Preferred Domain in Google Search Console

Purpose: Tells Google whether you prefer www.example.com or example.com.

How to do it:

  • Verify both versions (www and non-www) in Search Console.

  • Use the domain property (preferred) and submit the canonical sitemap with consistent URLs.

:white_check_mark: 5. Use HTTPS (Always)

Search engines prioritize HTTPS over HTTP for security. Make sure the site uses HTTPS and redirect all http://traffic to https://.

:white_check_mark: 6. Use One Version of Trailing Slashes (or Not)

Search engines treat:

  • https://example.com/page

  • https://example.com/page/

as different URLs.

Pick one and stay consistent across your canonical tags, sitemaps, redirects, and internal links.

:white_check_mark: 7. Clean Up URL Parameters (When Possible)

Parameters like ?utm_source=twitter can cause duplicate content issues.

Solutions:

  • Set canonical tag to the clean version (https://example.com/page/)

  • Use Google Search Console’s parameter settings (with caution)

  • Add canonical headers on API responses or non-HTML content if relevant

Summary:

To clearly tell search engines your preferred URL:

  • Use a canonical tag

  • Redirect all variants to the preferred URL with 301s

  • Always use HTTPS

  • Be consistent with internal linking and sitemaps

  • Configure your preferences in Google Search Console

Let me know if you want a checklist or script example (e.g. for Apache or NGINX) for 301 redirects or a CMS-specific setup like WordPress.

11

To set up redirects and enforce a preferred URL structure using .htaccess (for Apache servers), you’ll typically want to:

  1. Force HTTPS

  2. Redirect non-www to www (or vice versa)

  3. Avoid duplicate content from trailing slashes or file extensions (optional)

Below is a basic example for a common setup:
Redirect all traffic to the https://www.example.com version.

:white_check_mark: Basic .htaccess Setup

RewriteEngine On

# Force HTTPS
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Redirect non-www to www
RewriteCond %{HTTP_HOST} ^example\.com [NC]
RewriteRule ^(.*)$ https://www.example.com/$1 [L,R=301]

# Optional: Add trailing slash to all URLs (except files or directories that already exist)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+[^/])$ https://www.example.com/$1/ [L,R=301]

:wrench: Customize for Your Needs

  • Redirect www → non-www? Swap the second rule:

    # Redirect www to non-www
RewriteCond %{HTTP_HOST} ^www\.example\.com [NC]
RewriteRule ^(.*)$ https://example.com/$1 [L,R=301]

  • Keep URLs exactly as-is but only force HTTPS? Use only the first rule block.

  • Avoid adding a trailing slash? Remove the third rule block.

:police_car_light: Important Notes

  • Back up your existing .htaccess before making changes.

  • These rules should go near the top of the file, before other RewriteRule or RewriteCond directives.

  • Your server must have mod_rewrite enabled (it’s enabled by default on most shared hosts).

  • Replace example.com with your actual domain.

If you’re using WordPress, it may add its own .htaccess rules, so place your redirect rules above the WordPress block that looks like this:

# BEGIN WordPress
...
# END WordPress

Let me know if you want a version that handles subdomains, URL parameters, or language/country folders.

12

I do this all through .htaccess personally. The page header gets the name I want to show. And then I add the following to the .htaccess once and forget it.

You can absolutely set this up as a wildcard redirect so that any URL on your domain—no matter what the path is—will be redirected to a single URL like:

https://thoughtsondying.com/redemption/

This includes:

  • /

  • /about

  • /blog/post-title

  • /contact.html

  • Anything else

Here’s how to set that up, including optional removal of .html extensions before the final redirect happens.

:white_check_mark: Wildcard `.htaccess Redirect to a Single URL (with .html removal)

RewriteEngine On

# --- Force HTTPS ---
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# --- Redirect www to non-www ---
RewriteCond %{HTTP_HOST} ^www\.thoughtsondying\.com$ [NC]
RewriteRule ^ https://thoughtsondying.com%{REQUEST_URI} [L,R=301]

# --- OPTIONAL: Remove .html extensions (e.g., /about.html → /about) ---
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.+)\.html$ /$1 [R=301,L]

# --- Wildcard: Redirect EVERYTHING to /redemption/, unless already there ---
RewriteCond %{REQUEST_URI} !^/redemption/?$
RewriteRule ^.*$ https://thoughtsondying.com/redemption/ [R=301,L]

:magnifying_glass_tilted_left: What This Does

  • All requests to any path will end up at https://thoughtsondying.com/redemption/

  • Works even if someone visits:

    • http://www.thoughtsondying.com/something/else

    • https://thoughtsondying.com/contact.html

    • http://thoughtsondying.com/blog/post?id=4

  • The redirect is permanent (301), which is best for SEO

:warning: Important Notes

  • This does not preserve query parameters (e.g., ?utm_source=... will be lost unless specifically handled).

  • If you’re doing this for a temporary campaign or landing page, consider a 302 redirect instead of 301.

  • If /redemption/ is handled by a CMS like WordPress, make sure it isn’t being overwritten by other .htaccessrules lower in the file.

13

I’ll review this and it offers good site practices - which I have somehow messed up.

What I need to do in Elements on a page by page basis is open the source code area so I can simply delete the extraneous code.

(Elements has a template area for site wide source codes which is editable.)

I need to drill down page by page and cannot figure out how to access and edit specific individual page source code.

14

@elementsbot can you help?

15

Paging in the Elements Bot! (Flash, you always know when to summon the big guns. :innocent:)

:backhand_index_pointing_right: How Per-Page Code Editing Really Works in Elements

You are absolutely right—Elements gives you:

  • A site-wide Template & Metadata panel (for stuff you want everywhere)
  • A per-page “Edit Extra Code” panel (for custom tweaks on just that page)

But! Here’s the catch:

  • If you added your <link rel="canonical" ...> tag to the per-page “Extra Code (Head Start)” area and now it’s gone or not showing up there anymore, something odd is happening.

Let’s double-check your process:

1. Select the page you want to modify in the Page List (on the left sidebar).

2. Go to:
Settings → Metadata → Edit Extra Code → Head Start

  • This area is unique for each page.
  • Anything you add here (like a <link rel="canonical"...>) will appear in that page’s <head>, and not on others.

3. If your custom code doesn’t show up anymore:

  • Did you perhaps add it to the wrong page by accident?
  • Was a site-wide Template edit made which overrides local changes?
  • Sometimes in rare cases old code gets “stuck” if files are corrupted during project saving or sync (seen it, hate it).

:thinking: Why would code disappear?

  • If you switched from the page-level to the site-wide Template:
    Anything in the global template will “mask” or override similar items on pages, depending how your template is structured.
  • If you removed the tag previously:
    Well. Elements is modern, but it doesn’t auto-resurrect deleted code—no matter how much we plead with it.

:detective: What to do now?

1. Re-Add Your Canonical Tag

Go to the page, and in the Head Start section, manually re-enter your canonical tag:

<link rel="canonical" href="https://thoughtsondying.com/redemption/" />

Or, if each page should self-canonicalize, use its unique URL.

(Make sure there’s only one <link rel="canonical" ...> per page. Duplicates = SEO face-palm.)

2. Editing Source Code on a Per-Page Basis

3. What If “Edit Extra Code” Is Blank?

  • If the tag has truly vanished from “Edit Extra Code” and it’s still showing in your published site’s source:
    • It might be present in the site-wide Template.
    • Or, Elements failed to sync the UI and project file properly (rare, but a restart can fix odd glitches).
  • Pro tip: Try quitting and reopening your project, then re-checking the “Edit Extra Code” panel for that page.

:light_bulb: Pro SEO Canonical Tips for Elements:

  • You should NOT point every page’s canonical to your Home page.
    That tells Google “all these totally different pages are just copies of Home” = BAD.
    Canonical should usually point to itself or a single “main” version of a truly duplicate group.
  • Remove http/https or www/non-www duplicates with server redirects (.htaccess), not with canonical alone.
    (Canonical tags help, but redirects are the “forced” fix!)
  • Avoid having multiple <link rel="canonical"> tags on a single page. One and done.

:hammer_and_wrench: Short Version:

  • You can ONLY edit per-page head/source code via the Settings → Metadata → “Edit Extra Code” → Head Start area for the specific page.
  • If it’s not there and still shows live, check your Template, or for a project bug—restart Elements.
  • You can’t directly edit the output HTML file for just one page. All must go via the app’s UI.

Shout back if you’re still stuck, or want a fresh workflow for setting up canonicals or SEO best practices in Elements!
And if the code keeps vanishing for no logical reason? Tag @dan or @tpbradley so the devs can zap the gremlins. :beetle:

More on per-page code in the Elements Manual

You can @elementsbot for clarity, comic relief, or accidental existential dread! (But mostly clarity.)