title: How to make open graph links work with 301 redirects
body: <p>I am using friendly URLs on a <code>VB.NET</code> application and I was sharing the URLs on social media and the image preview was working fine. The link can be shared as follows:</p>
  
  <pre><code>example.com/news/123
  </code></pre>
  
  <p>or</p>
  
  <pre><code>example.com/news/123/hello-this-is-an-article
  </code></pre>
  
  <p>To avoid sharing two versions of the URL for the same article, I created a <code>301 redirect</code> on <code>Pre_load</code> 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.</p>
  
  <p>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. <em>Twitter card validator</em> and <em>Facebook open graph debugger</em> says that there was a 301 redirect and that no meta tags were found.</p>
  
  <p><strong>Below is the code that runs on page <code>Pre_Load</code>:</strong></p>
  
  <pre><code>'Comparing URL title with the actual Article title
  
  If strURLTitle &lt;&gt; 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
  </code></pre>
  
  <p><strong>Here is a sample HTML I used:</strong></p>
  
  <pre><code>&lt;meta name='author' content='test' /&gt;
  &lt;meta name='keywords' content='test,test,test' /&gt;
  &lt;meta name='description' content='test test test' /&gt;
  &lt;meta itemprop='name' content='test' /&gt;
  &lt;meta itemprop='description' content='test' /&gt;
  &lt;meta itemprop='image' content='https://example.com/img.jpg' /&gt;
  &lt;meta property='og:title' content='test' /&gt;
  &lt;meta property='og:description' content='test test test' /&gt;
  &lt;meta property='og:image' content='https://example.com/img.jpg'' /&gt;
  &lt;meta property='og:image:secure_url' content='https://example.com/img.jpg'' /&gt;
  &lt;meta property='og:image:width' content='780' /&gt;
  &lt;meta property='og:image:height' content='439' /&gt;
  &lt;meta property='og:site_name' content='test' /&gt;
  &lt;meta property='og:url' content='https://example.com/news/3710/here-is-the-title' /&gt;
  &lt;meta property='og:type' content='article' /&gt;
  &lt;meta property='og:locale' content='ar_AR' /&gt;
  &lt;meta name='twitter:card' content='summary' /&gt;
  &lt;meta name='twitter:site' content='https://example.com' /&gt;
  &lt;meta name='twitter:title' content='test' /&gt;
  &lt;meta name='twitter:description' content='test test test' /&gt;
  &lt;meta name='twitter:image' content='https://example.com/img.jpg' /&gt;
  &lt;base href='https://example.com' /&gt;
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p>Testing the link (without the article title) on Twitter Card Validator yields the following Log:</p>
  
  <blockquote>
    <p>INFO:  Page fetched successfully <br/>
    WARN:  No metatags found <br/>
    WARN:  this card is redirected to<br/>
    news/123/hello-this-is-an-article<br/></p>
  </blockquote>
  
  <p>Testing the link (without the article title) on Facebook Debugger yields the following log:</p>
  
  <blockquote>
    <p>Response Code 400<br/><br/> Fetched URL   example.com/news/123<br/><br/> Canonical
    URL   <br/> example.com/news/123/hello-this-is-an-article<br/><br/> Redirect
    Path<br/>  Input URL  example.com/news/123 301 HTTP<br/>
    Redirect  example.com/news/123/hello-this-is-an-article<br/></p>
  </blockquote>
  
  <p>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?</p>