Question

我正在将Twitter Cards集成到我的网站中，特别是应用安装和深层链接功能。为此，我将所需的元标记添加到我的html页面的标题部分。

我的应用程序中发布到Twitter的功能共享来自其他网站的文章。为了共享一个不在我的域名但仍然显示推特卡的网站网址，我做了一个简单的短网址，在Twitter上发布，指向带有元标记的html页面，然后将用户重定向到原始网站，但我没有得到预期的结果。

首先，我尝试通过在标头中返回301响应代码来重定向用户。这会完全按照我的意愿重定向用户（将我的重定向页面保留在浏览器历史记录之外），但是元标记不会被Twitter拾取，因此卡片不会显示。

下一步，我尝试在Twitter卡元标记下方使用元标记，如下所示：

<META http-equiv="refresh" content="0;URL=http://www.mywebsite.com">

使用此方法，Twitter卡正常显示，但现在在浏览器中启用了后退按钮。此外，我读到这个方法不建议，因为搜索引擎倾向于从安全原因删除那些从那里做到这一点的网站。

有没有人知道如何在不启用浏览器中的后退按钮的情况下重定向用户，并且仍然允许评估元标记？我更喜欢不使用Javascript的方法。

Answer 1

我找到了解决这个问题的有趣方法。

当Twitter是我的网站时，我只需要Twitter元标记。因此，当用户或机器人向我的网站发出请求（Twitter必须执行以从元标记填充卡信息）时，我会检查发出请求的用户代理。如果它是一个Twitter机器人（它的用户代理当前是Twitterbot / 1.0），那么我返回页面，在我的标题中有一个200响应代码和一个元标记重定向（以防万一）。否则，我返回302响应代码，浏览器立即重定向我的使用。

这解决了后退按钮问题以及搜索引擎不喜欢我的网站带有元标记重定向的问题（因为机器人永远不会看到它们！）。

更新

我最近有人询问有关我是如何做到这一点的更多细节，所以我想我会提供一个例子。我正在使用C＃作为我的服务器，但是如果你使用的是另一种语言，代码很简单。

/// <summary>
/// Redirects a user to the location related to the given id.
/// </summary>
/// <param name="id"></param>
public ActionResult Index(Int32 id)
{
    // Retrieve details about the short link id passed in
    using (DataEntities context = new DataEntities())
    {
        ShortLink shortLink = context.ShortLinks.Single(s => s.Id == id);

        // If the user agent is a twitter bot (currently Twitterbot/1.0), return the page with a meta redirect (just in case) so Twitter can still read the meta tags.
        if (Request.UserAgent.ToString().ToLower().Contains("twitterbot"))
        {
            TwitterCardModel model = new TwitterCardModel
            {
                Id = id,
                Site = "@YOUR_TWITTER_HANDLE",
                Title = shortLink.Title,
                Description = shortLink.Description,
                RedirectUrl = shortLink.FullUrl,
                ImageUrl = shortLink.ImageUrl
            };

            return View(model);
        }

        // Otherwise, redirect the user to the original page.
        Response.Redirect(shortLink.FullUrl, true);
        return null;
    }
}

如果请求来自twitter机器人，那就是我返回的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    @* Twitter cards *@
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@Model.Site">
    <meta name="twitter:title" content="@Model.Title" />
    <meta name="twitter:description" content="@Model.Description" />

    @if (!String.IsNullOrEmpty(Model.ImageUrl))
    {
        <meta name="twitter:image" content="@Model.ImageUrl">
    }

    <meta name="twitter:app:name:iphone" content="YOUR APP NAME"/>
    <meta name="twitter:app:id:iphone" content="YOUR APPLE APP ID"/>
    <meta name="twitter:app:url:iphone" content="YOUR DEEP LINK TO YOUR CONTENT IN YOUR APP"/>

    @* Handle page redirect to the full article *@
    <meta http-equiv="refresh" content="0;URL=@Model.RedirectUrl">
    <title></title>
</head>
<body>
</body>

如何在页面加载时重定向用户并仍然使用Twitter卡

1 个答案: