如何使开放图链接与 301 重定向一起使用
How to make open graph links work with 301 redirects
我在 VB.NET
应用程序上使用友好的 URLs,我在社交媒体上分享 URLs,图像预览工作正常。 link可分享如下:
example.com/news/123
或
example.com/news/123/hello-this-is-an-article
为了避免为同一篇文章共享两个版本的 URL,我在 Pre_load
上创建了一个 301 redirect
以将第一个 link 重定向到第二个对应的 link。这样,我确保每次访问 URL 都在末尾包含文章标题。
在我应用此逻辑后,末尾没有文章标题的 URL(第一个 URL)不再在社交媒体上显示图像预览。 Twitter 卡片验证器 和 Facebook 开放图形调试器 表示存在 301 重定向并且未找到元标记。
下面是在页面 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
这是一个示例 HTML 我使用了:
<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' />
问题:
在 Twitter Card Validator 上测试 link(没有文章标题)会产生以下日志:
INFO: Page fetched successfully
WARN: No metatags found
WARN: this card is redirected to
news/123/hello-this-is-an-article
在 Facebook 调试器上测试 link(没有文章标题)会产生以下日志:
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
有什么方法可以让开放图调试器逃避 301 重定向或显示正确的结果,即使我分享了一个 link 最后没有标题?
由于我在 URL 中使用了阿拉伯字符,结果我需要对 URL 进行编码以使其在 Facebook 和 Twitter 上运行。
修复:
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' />
另一个修复:
使用规范的 URLs:
<link rel="canonical" href="https://example.com/news/3710/encoded-url" />
我在 VB.NET
应用程序上使用友好的 URLs,我在社交媒体上分享 URLs,图像预览工作正常。 link可分享如下:
example.com/news/123
或
example.com/news/123/hello-this-is-an-article
为了避免为同一篇文章共享两个版本的 URL,我在 Pre_load
上创建了一个 301 redirect
以将第一个 link 重定向到第二个对应的 link。这样,我确保每次访问 URL 都在末尾包含文章标题。
在我应用此逻辑后,末尾没有文章标题的 URL(第一个 URL)不再在社交媒体上显示图像预览。 Twitter 卡片验证器 和 Facebook 开放图形调试器 表示存在 301 重定向并且未找到元标记。
下面是在页面 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
这是一个示例 HTML 我使用了:
<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' />
问题:
在 Twitter Card Validator 上测试 link(没有文章标题)会产生以下日志:
INFO: Page fetched successfully
WARN: No metatags found
WARN: this card is redirected to
news/123/hello-this-is-an-article
在 Facebook 调试器上测试 link(没有文章标题)会产生以下日志:
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
有什么方法可以让开放图调试器逃避 301 重定向或显示正确的结果,即使我分享了一个 link 最后没有标题?
由于我在 URL 中使用了阿拉伯字符,结果我需要对 URL 进行编码以使其在 Facebook 和 Twitter 上运行。
修复:
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' />
另一个修复:
使用规范的 URLs:
<link rel="canonical" href="https://example.com/news/3710/encoded-url" />