meta-tags

I'm working on the iPad version of a web project and am using Safari's web inspector to work with CSS layout etc. However I've tracked my bug to the viewport meta tag. When an iPad Air with iOS 9.0 - 9.2 is in portrait mode the viewport meta rules are broken/ignored. Here is a screenshot of the issue from an iPad air iOS 9.2: The Problem: When in portrait the computed width for the html and body tag is 768px yet there is a white space to the right that is about 300px. Also user-scalable=no does not apply. Fixed items like the nav and footer appear as 100% as seen in the image. Landscape is

I'm trying to share http://gbgtechweek.com/ on my LinkedIn profile. I have this meta tag: <meta property="og:image" content="http://gbgtechweek.com/img/gbgtechweek_img.png" /> However, LinkedIn chooses to show another image from the page ( http://gbgtechweek.com/img/goteborg00.jpg ) Is this because of the size, and how do I fix it? I tried to update by using "?!" in the end, so LinkedIn would re-fetch the Open Graph data, but didn't work. Any solutions? LinkedIn (shockingly and sadly!) only use official partners from http://embed.ly/providers for 'projects' on your profile. Open Graph only

The preview of my website's pages is displaying in FaceBook and LinkedIn but no preview appears when I paste the link in WhatsApp. 来源： https://stackoverflow.com/questions/49647727/theres-no-preview-for-links-to-my-website-in-whatsapp

I'm trying to override the Content Security Policy using a specific meta tag for some pages. I've been trying for a couple of hours, but I've not succeed yet. Is there a way to override CSP from the page itself (using JavaScript or meta tags) without having to modify the server configuration? Thank you. No. For security reasons the meta tag can only make the policy more strict, not to relax the policy defined in the headers. If the meta tag could relax the policy, CSP would have no teeth. Any malicious party could just add a meta tag to disable the policy and avoid all of the restrictions that

I have a page with the following meta tag: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> I thought this would set the default character set to UTF-8 and indeed it appears to in Chrome and Safari, but not in Firefox. I have a PHP script on the page which generates a playlist of audio files for jPlayer, and filenames with accents in characters aren't working/playing in Firefox. Here is the error message I am seeing in the Firebug console: As you can see the characters in the filename aren't getting read correctly. The filename should be "Guessi-Guéré-Guessi (Pop Bariba)"

I am building an angular universal + angular 2 website and i want to add the social media share button. I implemented the server side rendering and i also update the meta tags necessary using the following code : constructor(private dataService: DataService, private activatedRoute: ActivatedRoute, private auth: AuthService, private router : Router, private meta : Meta) { this.currentUrl = window.location.href; // testing if it changes something to add that outside of the service : it didnt this.meta.updateTag({ property: 'og:title', content: "my new title" }) let id= this.activatedRoute

I moved my site to Angular universal SSR, during my move I encountered some problems that I thought ng-universal would fix. I want to add meta tags such as description, keywords etc (different for each page). Using the titleService as angular suggests works just fine, it changed the title of the pages. However if I land on homepage and then navigate from there to other pages, the title is not changing, but when I look on source I see the change in the source but no on the tab of VIEW. If I land on the page (or hit refresh) the page is updated with the correct title. I tried to add in

The iPhone X landscape default safe area and notch solution. I added this Question to help others avoid a headache I head trying to fix my website on the new iPhone 10 Basically, the problem is white bars The solution is to use viewport-fit=cover <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> This will use the full screen but what about the notch. create a class .iphoneX{ padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); } and add it to the website wrapper and done?