Clarification on canonical URL behavior

Developer help
1

Hey ghost-folks,

I’m looking to use custom canonical URLs to link to external content a la “Curated lists to external sources” from https://ghost.org/blog/custom-canonical-urls/ and would like a little clarification before I design around this feature.

From the aforementioned blog post:

Ghost always implements automatic canonicals on every page of your site when you’re not using the custom canonical URL feature. This ensures your SEO is clean and prevents any URLs with tracking parameters from being indexed.

This makes it sound as though the custom canonical URL specified in the Ghost Editor’s “Meta Data” pane should be what’s used in the <link rel="canonical" … tag in the the page’s <head> element, but that doesn’t seem to be the case — when I publish a post with a custom canonical URL it still populates the rel="canonical" tag with the the permalink for that post on my website.

To be clear, the current behavior is what I want, I just want to make sure it’s functioning as intended and a future change to this behavior won’t break my design/SEO when I update to a new version of Ghost.

tl;dr: I want to be able to use {{canonical_url}} to link to external content and still have the rel="canonical" in that page’s <head> element use the post’s permalink. Things currently work this way but the documentation seems to indicate it shouldn’t, I’d like some clarification before designing around this behavior.

Thank you!

2

Hey @magnolialogic, just want clarify this:
So you’ve put a link into the ‘Canonical URL’ field within your post, however when you go to view the post the content of the canonical meta tag contains the actual URL of the post that’s being viewed? Have I got that right? If so then that sounds like a bug.

If you want to link to an external source but not affect the canonical URL then you should add the URL in another way

3

Yeah, that’s what I’m seeing. Damn, I was hoping that was an error in the documentation :confused:

Thanks for the info, you saved me a lot of heartburn somewhere down the road when this bug gets fixed.

Is there another way to provide a linked URL that I could access from a helper in my theme? The idea is to have the title of some posts link out to external content and add a “permalink” icon or image to link to the post’s page itself, e.g. linking to {{canonical_url}} for the title and {{url}} with the permalink icon.

4

So, to clarify, you want to be able to link to an external page as well as the post on your site? You could use the code inject option in each post to paste in a url

You could then pick it up with JavaScript, or customise your theme to use it directly in the template

1 Like
5

Thanks David, sorry, didn’t see you’d replied to this until now. I shelved this project last year but picked it up again recently since I’ve got a little more time on my hands…

I think using code injection the way you’re suggesting would only work on the page for that post, but I’m looking to do this within the main/alt loops. In the meanwhile I’m using this hack of the “Excerpt” field to accomplish this, but it would be awesome if each post had a “Linked URL” or “External URL” field that could be accessed via {{linked_url}} or {{external_url}}

{{#if custom_excerpt}}
    <h2 class="entry-title"><a href="{{excerpt}}">{{{title}}}</a></h2>
{{else}}
    <h2 class="entry-title">{{{title}}}</h2>
{{/if}}
1 Like
6

Is there a way to display the canonical URL for each post using code injection?

7

If you’re adding this code to each page you can grab it using JavaScript as the canonical URL is rendered by Ghost as a link tag within the head. Something like this would let you grab it and then use it elsewhere on the page:

document.querySelector("link[rel='canonical']").getAttribute("href")
8

Thanks so much! Can this be done through code injection alone? And can it be themed with CSS with code injection also?

Thanks!

9

If you’re looking at the handlebars ( {{ something }} ) earlier in the thread, that doesn’t work in code injection. If you’re looking at David’s javascript from earlier today, that should work in code injection. Code injection lets you run any javascript the user’s browser is willing to let you run. But no handlebars, because that’s all server-side.

1 Like
10

Hi :wave:

I need this very thing implemented. Looking to replicate functionality found on daringfireball.net

Is there a developer who can take this work on? If so, PM me so we can get started.

Thanks!

11

Have you seen meta tags for page redirects? Adding the following to a post’s head code injection field will allow you to redirect anyone who arrives on that post to anywhere you wish:

<meta http-equiv="refresh" content="0;url=http://example.com/" />
12

Hi David,

Not sure if your response was meant for me but in my case I don’t want people redirected automatically. I still want my post to have its own permalink but also want the headline to link back to an external website.

Best example of that is this post:

You’ll note that’s a permalink of DF but the headline also links out to an external website (Google in this case).

And from the index page, the headline links out to the external website but there’s a star after it that links over to the permalink.

If anybody can create this set of functionality, please PM me so we can talk.

Thanks,
Carlos

13

For anyone else reading this @magnolialogic is referring to this part of the documentation:

However I don’t understand why you would want to use this feature?

14

Yea I think the wires have been crossed here. @Los1sol could you create a new topic with exactly the feature you’re looking for. The feature you describe is different to the canonical link feature.

15

To be clear, the feature @Los1sol is requesting is exactly what I was looking for with my original post, so I’m not sure a new thread would be helpful

16

While it was what you were looking for, I found it a bit misleading single the opening post is specifically about canonical URLs.

@Los1sol you can use @magnolialogic’s example code here, but it’ll require editing the theme code itself:

Plus you’ll need to add similar code to the single post view. Note that this means you won’t be able to control the excerpt at all single it’ll be used up by this feature.

17

Based on the documentation linked above when canonical URLs were announced, they should work this way out of the box (see the “ Curated lists to external sources” section)