How can I add a conditional rel="canonical" link in the HTML head section of my Webflow blog posts template based on the value of a Plain Text field called 'Canonical URL' in the 'Blog Posts' collection?

Published on
September 22, 2023

To add a conditional rel="canonical" link in the HTML head section of your Webflow blog posts template based on the value of a Plain Text field called 'Canonical URL' in the 'Blog Posts' collection, you can follow these steps:

  1. Open your Webflow project and navigate to the 'Collections' tab.
  2. Click on the 'Blog Posts' collection to edit it.
  3. In the 'Blog Posts' collection, you should have a Plain Text field called 'Canonical URL' to store the desired canonical URL for each blog post.
  4. Click on the 'Settings' tab within the 'Blog Posts' collection and scroll down to the 'Custom Code' section.
  5. In the 'Before Head Tag' input box, you can add the following code snippet:
{{if collection.fields.Canonical_URL}}  <link rel="canonical" href="{{collection.fields.Canonical_URL}}">{{/if}}

This code uses Webflow's templating language to check if the 'Canonical URL' field has a value for each blog post. If it does, it will output a rel="canonical" link in the HTML head section with the value of the 'Canonical URL' field.

  1. Save the changes to your 'Blog Posts' collection and exit the editor.
  2. Return to the Designer view of your Webflow project.
  3. Open the 'Blog Posts' template page and go to the 'Head' section.
  4. Remove any existing rel="canonical" tag if present.
  5. Click on the '+ Add Elements' button in the 'Head' section and choose 'Custom Code' from the dropdown.
  6. Insert the following code snippet:
{{collectionList "Blog Posts"}}  {{if collection.fields.Canonical_URL and collection._id == current._id}}    <link rel="canonical" href="{{collection.fields.Canonical_URL}}">  {{/if}}{{/collectionList}}

This code will display a rel="canonical" link in the HTML head section of every blog post template, but only if the 'Canonical URL' field has a value and matches the current blog post being rendered.

  1. Publish your site to make the changes live.

By following these steps, you can dynamically add a conditional rel="canonical" link in the HTML head section of your Webflow blog posts template based on the value of the 'Canonical URL' field in the 'Blog Posts' collection.

Additional Questions:

  1. How do I add a Plain Text field in a Webflow collection?
  2. Can I use conditional statements in Webflow's templating language?
  3. How do I publish my Webflow site?