So I have a Application in production and some of my clients are complaining that they can't see the new changes unless they completely wipe their cache.
Techs: React
What i have to do ?
put this code in the head tag for Learn More
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
Related
I don't know where to start with this, my default link preview for my site looks like this:
I don't know why it's displaying bootstrap and not what is in my site. This is the page I am trying to share:
so I was expecting that the link would have the image and the title(blacked out).
But on the good side, when you click on the bootstrap link, it will redirect to my page and not to bootstrap but still what I cannot get is why is it displaying bootstrap and not what is on the page? Where can I change it?
Thanks for the help.
Your problem is this line in your <head>:
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/blog/">
This tells bots, web crawlers, and generally everyone that this page is exactly the same as https://getbootstrap.com/docs/4.0/examples/blog/. It even goes a step further and indicates that this is the proper URL for your page.
Most automated systems will stop parsing your page after seeing a <link rel="canonical"> tag and instead parse the linked page as though it was the current one. This is where Facebook et al. are getting the Bootstrap metadata from.
TL;DR: Remove this line.
For future reference, you can use Facebookâs Sharing Debugger to troubleshoot problems like this. For the given URL, this is the current result:
Note the Canonical URL and Redirect Path fields, which indicate my above diagnosis.
You need to use something like react-helmet or react-meta-tags to set your <head> data correctly. The data you are looking to set would be openGraph data which can be found here.
Not sure if this is the answer you were looking for but I was searching for how to update the info your react app shows when you preview the link in some other app. Every solution I tried wasn't working with github pages and react (react-helmet, react-meta-tags, react-document-meta). What ended up working was that you can edit the index.html located inside the public folder to change this info. Include this somewhere in the head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/IMDB.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>IMDB</title>
<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />
Example from https://ogp.me/
You can also use the ogtag.me API that allows you to shorten your links dynamically and send the data you want it to display on social platforms and then use this shorten links in your share buttons.
I'm having trouble with a mobile page that uses a site of ours in an iframe.
It works fine on desktop but on mobile the page doesn't resize correctly. Based on internal testing it seems that the page is missing this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Is there any way to set that via jQuery and have it actually take effect?
In theory I believe that using this SO article I could inject the meta tag like this:
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">');
But it seems the problem really comes down to forcing it to re-parse the html. Is there a way I could do that?
Yes you can append a meta tag, but no you can't force reparsing of the html. The browser is going to ignore any changes you make.
I am developing a webapp using angularjs and jquery. The webapp loads perfectly fine when the mobile device language is set to any except Chinese. I debugged a lot and found the issue that the web app is not loading because of the meta view port tag in the index.html. As soon as I remove the meta viewport tag, the web app loads successfully in the mobile when the language is set to Chinese.
navigator.language = "zh-CN"
But I cannot remove the meta viewport tag from the index.html , just for the webapp to load when the language is set to Chinese.
May I know the reason why the meta viewport tag is creating this problem when navigator.language is set to Chinese ?
Is there any other alternate solution to make my webapp working with the meta viewport tag ?
Below is the code that I have in index.html
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=360.1, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="msapplication-tap-highlight" content="no"/>
<meta name="format-detection" content="telephone=no">
<title>Test</title>
The above will not work if mobile language is set to zh-CN. But works fine if I remove the viewport tag.
Please help on this. Appreciate all your inputs.
When I push update js files or code to server , I have to clean the cache each time to see the changes on my web site.
I am using this meta tags on my master page
<meta http-equiv="x-ua-compatible" content="IE=8">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='-1'>
<meta http-equiv='pragma' content='no-cache'>
but still having same issue.
Is there any way to resolve this issue ?
I have a site called Healthot. It's a responsive site, with the meta viewport tags and the media queries. The problem is that the site only adapts when I resize Chrome's window of my Mac. When i enter the site in a mobile phone, like iPhone 5, it's doesn't scale.
The site is http://www.healthot.com
You have to add a meta tag in the head, which I don't seem to find on your site.
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Hm... I dont see
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
in firebug.
Try to add all year meta tags in top of the head. Sometimes it is can be important
From where is this coming?
<script async="" type="text/javascript" src="http://whos.amung.us/pingjs/?k=xd69ovuycv2g&t=Healthot%20%7C%20Fitness%20control.%20Better%20bodies.&c=s&y=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F23115237%2Fmy-site-doesnt-detect-viewport&a=0&r=7773"></script>
And add
<meta name="viewport" content="initial-scale=1, maximum-scale=1">