How to prevent messaging app link previews when using a URL redirect

Question

My web app has functionality that redirects the user to an external link. When this link is sent over SMS, several applications (iMessage, Google Messages, etc.) create a link preview that displays the page the user is redirected to. This redirection is extremely undesirable given the application's functionality.

I would love to prevent link previews altogether, however I realize this may not be in my control.

Is it possible to prevent the link preview from navigating to the redirected website from the sever side?

Example:

www.mywebapp.com <- this is my web application that automatically redirects users

www.redirect.com <- this is the site my application redirects users to

Is it possible to either (a) prevent link preview altogether or (b) constraint the preview to www.mywebapp.com and not to www.redirect.com (while keeping the automatic URL redirect)?

Note: this and this do not answer my question

Kinglish · Accepted Answer

Here's a 100 foot view of this whole process, along with suggestions and references

Sneaky Redirection

In general, sneaky-redirection, or cloaking is frowned upon and can bring search engine ranking punishment if discovered - which is generally good because otherwise the nefarious would exploit it all over the place with impunity. All judgement aside to your motives (which I am sure are beyond reproach) client-side javascript redirection is your best bet. Server side solutions, like this PHP library, could be used to mask content to bots, but that creates new issues. setTimeout combined with either a window.location.href (still the way in Angular 2+) or a dynamically written meta tag like

Redirection nuances...

One way to mitigate the whole issue would be to offer minimal content on these redirection pages. In addition to the open graph tags which should be set (even if dynamically) for the link preview, you could treat the redirect like an interstitial - maybe a branded 15 second message that resolves to the redirect thereafter. This might appease the Google gods a little, would reinforce your brand and take care of the situation.

How are link previews generated?

Link previews are generated through open-graph tags which have been (or are @ share-time) indexed. Your angular script would need to write these tags to the webpage header for each (redirection) page, like . This article walks through the multitude of og tags available, but essentially they look like this:

But my app is all javascript generated - how do I create an indexable page to host my open graph tags?

You can use a headless, dynamic rendering service like Prerender to index your pages. I use them for my angular apps and it works great. They have libraries of different protocols for caching your content to their service - for me it was as easy as updating my .htaccess (apache) and sending a call to their API whenever I wanted to update the cached page in question. The .htaccess (shown below) auto-indexed my content upon page visit, but I found I had to preset the cached pages as people were linking to them without visiting - or because I had updated the page and needed to refresh the cache. In PHP, it was this simple:

  function cachePrerenderUrl($url_to_cache) {
    $url = "http://api.prerender.io/recache";
    $token = "***************";
    $data = array(
        "prerenderToken" => $token,
        "url" => $url_to_cache,
    );
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_USERPWD, '*******:********');
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_TIMEOUT, 30);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
    $result = curl_exec($ch);
    curl_close($ch);
    return $result;
}

and the .htaccess looks like this:


        RewriteCond %{HTTP_USER_AGENT} baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC,OR]
        RewriteCond %{QUERY_STRING} _escaped_fragment_
         RewriteCond %{REQUEST_URI} /n/
        # Only proxy the request to Prerender if it's a request for HTML
        RewriteRule ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent))(index\.php)?(.*) http://service.prerender.io/%{REQUEST_SCHEME}://%{HTTP_HOST}/$3 [P,L]

How to prevent messaging app link previews when using a URL redirect

Answers (1)

Related Questions