[SOLVED] How to make open graph links work with 301 redirects

How to make open graph links work with 301 redirects

I am using friendly URLs on a VB.NET application and I was sharing the URLs on social media and the image preview was working fine. The link can be shared as follows:

example.com/news/123

example.com/news/123/hello-this-is-an-article

To avoid sharing two versions of the URL for the same article, I created a 301 redirect on Pre_load to redirect the first link to the second corresponding link. This way, I make sure every visited URL contains the article title at the end.

Right after I applied this logic, the URLs without the article title at the end (first URL) do not show image preview on social media anymore. Twitter card validator and Facebook open graph debugger says that there was a 301 redirect and that no meta tags were found.

Below is the code that runs on page Pre_Load:

'Comparing URL title with the actual Article title

If strURLTitle <> strArticleTitle Then 
'URL article title either changed or does not exist

    Response.Status = "301 Moved Permanently"
    Response.AddHeader("Location", "example.com/news/{ID-in-the-URL}/article-title")

End If

Here is a sample HTML I used:

<meta name='author' content='test' />
<meta name='keywords' content='test,test,test' />
<meta name='description' content='test test test' />
<meta itemprop='name' content='test' />
<meta itemprop='description' content='test' />
<meta itemprop='image' content='https://example.com/img.jpg' />
<meta property='og:title' content='test' />
<meta property='og:description' content='test test test' />
<meta property='og:image' content='https://example.com/img.jpg'' />
<meta property='og:image:secure_url' content='https://example.com/img.jpg'' />
<meta property='og:image:width' content='780' />
<meta property='og:image:height' content='439' />
<meta property='og:site_name' content='test' />
<meta property='og:url' content='https://example.com/news/3710/here-is-the-title' />
<meta property='og:type' content='article' />
<meta property='og:locale' content='ar_AR' />
<meta name='twitter:card' content='summary' />
<meta name='twitter:site' content='https://example.com' />
<meta name='twitter:title' content='test' />
<meta name='twitter:description' content='test test test' />
<meta name='twitter:image' content='https://example.com/img.jpg' />
<base href='https://example.com' />

Problem:

Testing the link (without the article title) on Twitter Card Validator yields the following Log:

INFO: Page fetched successfully
WARN: No metatags found
WARN: this card is redirected to
news/123/hello-this-is-an-article

Testing the link (without the article title) on Facebook Debugger yields the following log:

Response Code 400

Fetched URL example.com/news/123

Canonical URL
example.com/news/123/hello-this-is-an-article

Redirect Path
Input URL example.com/news/123 301 HTTP
Redirect example.com/news/123/hello-this-is-an-article

Is there any way to let the open graph debuggers escape the 301 redirects or display the correct results even if I shared a link without a title at the end?

Solution

Since I was using Arabic characters in the URL, it turned out that I need to Encode the URL to make it work on Facebook and Twitter.

FIX:

Response.Status = "301 Moved Permanently"
Response.AddHeader("Location", "example.com/news/{ID-in-the-URL}/" & HttpUtility.UrlEncode(article-title))

<meta property='og:url' content='https://example.com/news/3710/encoded-url' />

Another Fix:

Use a canonical URLs:

<link rel="canonical" href="https://example.com/news/3710/encoded-url" />