The following lightweight code that uses the canonical URL to fix the missing og:url is a Webflow implimentation; however, it will also work seamlessly on any website or CMS with a canonical URL configuration.
og:url - A Brief Outline
What is og:url?
og:url is a property introduced by the Open Graph protocol, allowing any webpage to become a rich object in a social graph. This property establishes the 'canonical URL' for shared content, ensuring consistency and clarity on platforms like Facebook, LinkedIn, and Twitter.
Open Graph Protocol
Launched by Facebook in 2010, the Open Graph protocol aims to transform any webpage into an enriching object within a social graph. In simple terms, this means the og:url makes a webpage appear as a more detailed and interactive post on social media platforms. So, sharing a link on platforms like Facebook or Twitter displays a preview with an image, title, and description instead of just showing the link. The Open Graph protocol is now widely adopted by various social platforms to better understand the context of shared content and present it in an enhanced manner to users.
Why is og:url important?
Determines Canonical Source
By setting og:url, creators signal the preferred URL to be associated with shared content. This unification ensures that all social interactions, like shares, likes, and comments, get attributed to one canonical URL despite the potential existence of multiple URL variations.
It avoids Duplicate Content Issues.
The og:url acts as a safeguard against potential duplicate content issues. Directing platforms to a canonical source ensures clarity for search engines and minimises the risk of content dilution across multiple URLs.
Consistent Linking
Regardless of how users access a webpage (with 'www', without it, or using different parameters), the og:url ensures a consistent, preferred URL for all social media interactions, bringing uniformity to content sharing.
Enhances Social Media Performance
A unified point of social interaction through the canonical URL can improve how content fares on social media algorithms, potentially increasing user visibility and reach.
Relationship with Canonical URL
Both og:url and the <link rel="canonical"> tag aim to establish canonical sources, albeit in different contexts. The former caters to social media platforms, while the latter targets search engines. Using them correctly ensures optimal content representation and performance across search engines and social media platforms.
Using Canonical URL in Webflow to set the missing og:url in Webflow
Despite the different contexts, the canonical URL and og:url perform the same task and reference the same URL. Webflow already caters to the setup of the 'Global canonical tag URL' using the primary/default domain's base URL.
Setup the Global canonical tag URL in Webflow
1. Go to the 'SEO' tab in 'Site Settings'.
2. On the last setting, 'Global canonical tag URL', enter the primary/default domain for the website, i.e. https://yourwebsite.com
3. 'Save changes' and 'Publish'
Webflow will dynamically append the page's unique URL slug after the 'Global canonical tag URL', so the canonical URL is correct no matter what page Search Engines visit for indexing.
Use the canonical URL in Webflow to set the og:url in Webflow
To set the og:url, we can use the previously set canonical URL in just three simple steps: -
1. Go to the 'Custom code' tab in 'Site Settings'.
2. Copy the code below and paste it into the 'Head code' (remember to wrap the code in script tags)
3. Publish
Your Webflow website will now have the og:url automatically set as per the canonical URL. If you want to then check the SEO health on your site use SE Ranking for a thorough SEO analysis or the Free META SEO inspector Chrome plugin for a heads-up on your SEO meta data.
Join in the Discussion