As the title implies I&#39;m trying to generate Facebook Open Graph meta tags dynamically, but I can&#39;t get it working. Is it even possible?&lt;br&gt;

&lt;h1&gt;UPDATE:&lt;/h1&gt;
&lt;p&gt;Finally I got it working with the help of @saccharine. The following code is working for me: &lt;/p&gt;

    &lt;?php
    
    $params = array();
    if(count($_GET) &gt; 0) {
    	$params = $_GET;
    } else {
    	$params = $_POST;
    }
    // defaults
    if($params[&#39;type&#39;] == &quot;&quot;) $params[&#39;type&#39;] = &quot;restaurant&quot;;
    if($params[&#39;locale&#39;] == &quot;&quot;) $params[&#39;locale&#39;] = &quot;en_US&quot;;
    if($params[&#39;title&#39;] == &quot;&quot;) $params[&#39;title&#39;] = &quot;default title&quot;;
    if($params[&#39;image&#39;] == &quot;&quot;) $params[&#39;image&#39;] = &quot;thumb&quot;;
    if($params[&#39;description&#39;] == &quot;&quot;) $params[&#39;description&#39;] = &quot;default description&quot;;
    
    ?&gt;
    
    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;en&quot; xml:lang=&quot;en&quot;&gt;
    	&lt;head prefix=&quot;og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#&quot;&gt;
    		&lt;title&gt;&lt;/title&gt;
    		&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;/&gt;
    	
    		&lt;!-- Open Graph meta tags --&gt;
    		&lt;meta property=&quot;fb:app_id&quot; content=&quot;MY_APP_ID&quot; /&gt;
    		&lt;meta property=&quot;og:site_name&quot; content=&quot;meta site name&quot;/&gt;
    		&lt;meta property=&quot;og:url&quot; content=&quot;http://mysite.com/index.php?type=&lt;?php echo $params[&#39;type&#39;]; ?&gt;&amp;locale=&lt;?php echo $params[&#39;locale&#39;]; ?&gt;&amp;title=&lt;?php echo $params[&#39;title&#39;]; ?&gt;&amp;image=&lt;?php echo $params[&#39;image&#39;]; ?&gt;&amp;description=&lt;?php echo $params[&#39;description&#39;]; ?&gt;&quot;/&gt;
    		&lt;meta property=&quot;og:type&quot; content=&quot;MY_APP_NAME_SPACE:&lt;?php echo $params[&#39;type&#39;]; ?&gt;&quot;/&gt;
    		&lt;meta property=&quot;og:locale&quot; content=&quot;&lt;?php echo $params[&#39;locale&#39;]; ?&gt;&quot;/&gt;
    		&lt;meta property=&quot;og:title&quot; content=&quot;&lt;?php echo $params[&#39;title&#39;]; ?&gt;&quot;/&gt;
    		&lt;meta property=&quot;og:image&quot; content=&quot;http://mysite.com/img/&lt;?php echo $params[&#39;image&#39;]; ?&gt;.png&quot;/&gt;
    		&lt;meta property=&quot;og:description&quot; content=&quot;&lt;?php echo $params[&#39;description&#39;]; ?&gt;&quot;/&gt;
    
    	&lt;/head&gt;
    &lt;/html&gt;

The url I&#39;m putting into the Facebook debugger now can include any of the dynamic parameters or even none, all or only a selection and in any order like so:&lt;br&gt;
http://mysite.com/index.php?type=restaurant&amp;title=luigis&lt;br&gt;
or this:&lt;br&gt;
http://mysite.com/index.php?locale=de_DE&amp;description=hi&amp;type=bistro &lt;br&gt;

Having that accomplished: I can now publish actions to the user&#39;s stream:

    function postRestaurant() {
    	FB.api(&#39;me/MY_APP_NAMESPACE:have_lunch?\
    	start_time=2000-12-12T04:00:00&amp;\
    	expires_in=7200&amp;\
    	restaurant=&#39; + encodeURIComponent(getRedirectURI() + &#39;?type=restaurant&#39; + &#39;&amp;description=arnold&#39; + &#39;&amp;title=stalone&#39;), &#39;post&#39;, function (response) {
    		if (!response || response.error) {
    			console.log(&#39;postRestaurant: Error occured =&gt; &#39; + response.error.message);
    		} else {
    			console.log(&#39;postRestaurant: Post was successful! Action ID: &#39; + response.id);
    		}
    	});
    }

Works like a charm! : ]

Generating Facebook Open Graph meta tags dynamically

In head, which comes first: meta or title?

I was reading this:

&gt; This [meta] tag should be the first in the
&gt; HEAD section, because the server will
&gt; process the text above as ASCII with
&gt; no specific format that it only known
&gt; once the tag is analyzed.

http://www.xul.fr/en/html5/html.php

Does the standard specify the order?

Are there disadvantages in either order?

In &lt;head&gt;, which comes first: &lt;meta&gt; or &lt;title&gt;?

How can we include an image in our website to display in WhatsApp when we share a link like this?

[![enter image description here][1]][1]

  [1]: https://i.stack.imgur.com/ERx58.jpg

Provide an image for WhatsApp link sharing

The information I need is in a meta tag. How can I access the `&quot;content&quot;` data of the meta tag when `property=&quot;video&quot;`?

**HTML:**

    &lt;meta property=&quot;video&quot; content=&quot;http://video.com/video33353.mp4&quot; /&gt;

How do I get the information from a meta tag with JavaScript?

I have some big size PDF catalogs at my website, and I need to link these as download. When I googled, I found such a thing noted below. It should open the &quot;**Save As...**&quot; popup at link click...

     &lt;head&gt;
        &lt;meta name=&quot;content-disposition&quot; content=&quot;inline; filename=filename.pdf&quot;&gt;
        ...

But it doesn&#39;t work :/ When I link to a file as below, it just links to file and is trying to open the file.

        &lt;a href=&quot;filename.pdf&quot; title=&quot;Filie Name&quot;&gt;File name&lt;/a&gt;

---
**UPDATE (according to answers below):**

As I see there is no 100% reliable cross-browser solution for this. Probably the best way is using one of the web services listed below, and giving a download link...

 - http://box.net/
 - http://droplr.com/
 - http://getcloudapp.com/


Force to open &quot;Save As...&quot; popup open at text link click for PDF in HTML

I have this extract of website source code:

    &lt;meta content=&quot;This is a basic text&quot; property=&quot;og:title&quot; /&gt;

What does this **property attribute** stand for, and what is its purpose?

What is the attribute property=&quot;og:title&quot; inside meta tag?

Is it possible to use jQuery to read meta tags. If so do you know what the basic structure of the code will be, or have links to any tutorials.

Is it possible to use jQuery to read meta tags

I&#39;ve created a small HTML5 web application for my company.

This application displays a list of items and everything works fine.

The application is mainly used on android phones and Chrome as browser. Also, the site is saved on the home screen so Android manage the whole thing as an app (&lt;strike&gt;using a WebView I guess&lt;/strike&gt;).

Chrome &lt;strike&gt;Beta (and I think also the Android System WebView)&lt;/strike&gt; has introduced a &quot;pull down to refresh&quot; feature ([See this link for example][1]). 

This is an handy feature but I was wondering if it can be disabled with some meta tag (or javascript stuff) because the refresh can be easily triggered by the user while navigating the list and the whole app is reloaded.

Also this is a feature not needed by the application.

&lt;strike&gt;I know that this feature is still available only in Chrome beta, but I have the sensation that this is landing on the stable app, too.&lt;/strike&gt;

Thank you!

Edit: I&#39;ve uninstalled Chrome Beta and the link pinned to the home screen now opens with the stable Chrome. So the pinned links starts with Chrome and not with a webview.

Edit: today (2015-03-19) the pull-down-to-refresh has come to the stable chrome.

Edit: from @Evyn answer I follow [this link][2] and got this javascript/jquery code that work.

&lt;!-- begin snippet: js hide: true --&gt;

&lt;!-- language: lang-js --&gt;

    var lastTouchY = 0;
    var preventPullToRefresh = false;

    $(&#39;body&#39;).on(&#39;touchstart&#39;, function (e) {
        if (e.originalEvent.touches.length != 1) { return; }
        lastTouchY = e.originalEvent.touches[0].clientY;
        preventPullToRefresh = window.pageYOffset == 0;
    });

    $(&#39;body&#39;).on(&#39;touchmove&#39;, function (e) {
        var touchY = e.originalEvent.touches[0].clientY;
        var touchYDelta = touchY - lastTouchY;
        lastTouchY = touchY;
        if (preventPullToRefresh) {
            // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove.
            preventPullToRefresh = false;
            if (touchYDelta &gt; 0) {
                e.preventDefault();
                return;
            }
        }
    });

&lt;!-- end snippet --&gt;

As @bcintegrity pointed out, I hope for a site manifest solution (and/or a meta-tag) in the future.

Moreover suggestions for the code above are welcome.

  [1]: http://www.phonearena.com/news/Chrome-Beta-for-Android-updated-with-a-quite-handy-pull-down-to-refresh-feature_id65360
  [2]: http://jsbin.com/qofuwa/2/quiet

Disabling android&#39;s chrome pull-down-to-refresh feature

If I put a div in the head and display:none, than use JavaScript to display it, will this work?

Edit:

I have stuff loaded in AJAX. And as my AJAX changes the &quot;main&quot; portion of the site, I want to change the meta-tags as well.

Is it possible to use JavaScript to change the meta-tags of the page?

Tried to follow this question : https://stackoverflow.com/questions/19778620/provide-a-picture-for-whatsapp-link-sharing

[![enter image description here][1]][1]


I have created a simple HTML webpage with the basic Facebook metatags:

    &lt;!--FACEBOOK--&gt;
    &lt;meta property=&quot;og:title&quot; content=&quot;San Roque 2014 Pollos&quot; /&gt;
    &lt;meta property=&quot;og:description&quot; content=&quot;Programa de fiestas&quot; /&gt;
    &lt;meta property=&quot;og:image&quot; content=&quot;http://pollosweb.wesped.es/programa_pollos/play.png&quot; /&gt;        

The Facebook linter validate correctly and in Facebook it shows perfect, but when I try to share by WhatsApp the image doesn&#39;t show.

I&#39;m trying it on **WhatsApp on Android**

→ [This is the URL of the Sample Webpage][2]


  [1]: http://i.stack.imgur.com/PahaD.jpg
  [2]: http://pollosweb.wesped.es/whas.html

Showing Thumbnail for link in WhatsApp || og:image meta-tag doesn&#39;t work

I&#39;m adding Facebook Open Graph meta tag to my site. For example:

    &lt;meta property=&quot;og:image&quot; content=&quot;../images/aa.jpg&quot;/&gt;

Does Open Graph take relative URLs?

Otherwise, how can I convert a *relative url* to an *absolute url* in **asp.net mvc3** - Is there any available function to do so?

Open graph can resolve relative url?

I&#39;m using the Google Maps JavaScript API V3 and [the official examples](http://code.google.com/apis/maps/documentation/javascript/tutorial.html#HelloWorld) always have you include this meta tag:

&lt;!-- language: lang-html --&gt;

    &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, user-scalable=no&quot; /&gt;

Most of the 3rd-party examples I&#39;ve seen also do it. I wrote a plugin using it, though, and one of my users [told me it&#39;s preventing him from being able to zoom in and out on his mobile device](http://wordpress.org/support/topic/plugin-basic-google-maps-placemarks-meta-viewport-set-to-non-scaling?replies=2). I don&#39;t have a mobile device to test with, and none of my searches revealed any helpful information.

So, what&#39;s the point of the tag? Should I leave it in? Should I try to detect the browser agent and only show it for desktop browsers?

If you want to examine the plugin, you can [download it](http://wordpress.org/extend/plugins/basic-google-maps-placemarks/), [browse the source](http://plugins.svn.wordpress.org/basic-google-maps-placemarks/tags/1.1.2/) or [see a live example](http://washingtonhousechurches.net/).

What&#39;s the point of &#39;meta viewport user-scalable=no&#39; in the Google Maps API

There seems to be huge number of [meta tags][1] you can set. I&#39;m guessing that some of them are more important than others. 

What are the most important metatags to supply and why?

Do I even need meta tags? (looking at the stackoverflow homepage there are none)

  [1]: http://www.metatags.info/all_meta_tags

What are the important meta tags I must put in my website?

I was going through the source code of a website and found this piece of code.

    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0&quot;&gt;

I want to know what this initial scale, user-scalable, minimum-scale, maximum-scale are and what does those values mean? And also tell me what all values they accepts.

What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

I work on a large scale, high volume, public facing web application. The successful operation of the application is very important to the business, and so there are a number of MI tools that run against it.

One of these MI tools essentially looks at the html that is sent to the browser for each page request (I&#39;ve simplified it quite a lot, but for the purpose of this question, its a tool that does some analysis on the html)

For this MI tool to get the data it needs, we put meta data in the head element. Currently we do it as html comments:

    &lt;!doctype html&gt;
    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot; class=&quot;&quot;&gt;
    &lt;head&gt;
    	&lt;!-- details = 52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009] --&gt;
    	&lt;!-- policy id = 1234567890 --&gt;
    	&lt;!-- party id = 0987654321 --&gt;
    	&lt;!-- email address = user@email.com --&gt;
    	&lt;!-- error = 49 --&gt;
    	&lt;!-- subsessionid = bffd5bc0-a03e-42e5-a531-50529dae57e3--&gt;
    	...

And the tool simply looks for a given meta data comment with a regex

As this data is meta data, I&#39;d like to change it to html meta tags because it feels semantically correct. Something like this:

    &lt;!doctype html&gt;
    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot; class=&quot;&quot;&gt;
    &lt;head&gt;
    	&lt;meta name=&quot;details&quot; content=&quot;52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]&quot; /&gt;
    	&lt;meta name=&quot;policyId&quot; content=&quot;1234567890&quot; /&gt;
    	&lt;meta name=&quot;partyId&quot; content=&quot;0987654321&quot; /&gt;
    	&lt;meta name=&quot;emailAddress&quot; content=&quot;user@email.com&quot; /&gt;
    	&lt;meta name=&quot;error&quot; content=&quot;49&quot; /&gt;
    	&lt;meta name=&quot;subsessionid&quot; content=&quot;bffd5bc0-a03e-42e5-a531-50529dae57e3&quot; /&gt;
    	...

This feels more semantic, and I can get the MI tool to work with it no problem - just a case of changing the regexes. However it now gives me a problem with the w3c validator. It wont validate because the meta names I&#39;m using are not recognised. I get the error &quot;Bad value details for attribute name on element meta: Keyword details is not registered.&quot; and it suggests I register these name values on the WHATWG wiki.

Whilst I could do this it doesn&#39;t feel right. Some of my meta tags are &#39;generic&#39; (such as error and emailAddress) so I could probably find an already registered name value and use that. However, most of them are industry/organisation specific. It feels wrong to register a public name value called subsessionid or partyId as these are specific to my organisation and the application.

So, the question is - what is considered best practice in this case? Should I leave them as html comments? Should I use meta tags as above and not worry that w3c validation fails? (though that is increasingly important to the organisation) Should I attempt to register my meta name values on WHATWG wiki, but knowing they are not very generic? Or is there another solution?

Appreciate your thoughts, cheers

Nathan



----------------------------------------
Edited to show the the final solution:

The full answer I&#39;m going with is as follows. Its based on Rich Bradshaws answer, so his is the accepted one, but this is what I&#39;m going with for completeness:

    &lt;!doctype html&gt;
    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot; class=&quot;&quot;&gt;
    &lt;head&gt;
    	&lt;meta name=&quot;application-name&quot; content=&quot;Our app name&quot; 
    		data-details=&quot;52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]&quot; 
    		data-policyId=&quot;1234567890&quot;
    		data-partyId=&quot;0987654321&quot;
    		data-emailAddress=&quot;user@email.com&quot;
    		data-error=&quot;49&quot;
    		data-subsessionid=&quot;bffd5bc0-a03e-42e5-a531-50529dae57e3&quot;
    	/&gt;
        ...

This validates, so all boxes ticked :)

Best practice for meta data in a html document?

I am building a responsive page and the media queries are firing at the wrong width size. I am using Chrome.

    @media screen and (max-width: 1200px) {
	 .logo-pic {
		display: none;
	}
    }

For example, this rule works it just fires at wrong size. This rule fires at 1320px and not 1200px.
I have the meta tag for html in place. It seems to be firing the media query 100 or so pixel wider than it normall should.

    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

I checked the previous responsive site I made and those breakpoints are firing correctly. I&#39;ve tested the browser on different websites and the media queries are fine as well. 

I found a similiar question on stack overflow but it went unanswered.

https://stackoverflow.com/questions/23133609/media-queries-breakpoint-at-wrong-value

Not sure what the problem is?


Media Queries firing at wrong width

In order to define charset for **HTML5 Doctype**, which notation should I use?

 1. Short:

        &lt;meta charset=&quot;utf-8&quot; /&gt; 

 2. Long:

        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;




&lt;meta charset=&quot;utf-8&quot;&gt; vs &lt;meta http-equiv=&quot;Content-Type&quot;&gt;

What is the difference between the following two HTML meta tags, for specifying spanish web page content:

    &lt;meta name=&quot;language&quot; content=&quot;Spanish&quot;&gt;

and

    &lt;meta http-equiv=&quot;content-language&quot; content=&quot;es&quot;&gt;



HTML meta tag for content language

How do I initialize an automatic download of a file in Internet Explorer?

For example, in the download page, I want the download link to appear and a message: &quot;If you download doesn&#39;t start automatically .... etc&quot;. The download should begin shortly after the page loads.

In Firefox this is easy, you just need to include a meta tag in the header, `&lt;meta http-equiv=&quot;Refresh&quot; content=&quot;n;url&quot;&gt;` where n is the number of seconds and `url` is the download URL. This does not work in Internet Explorer. How do I make this work in Internet Explorer browsers?


How to start automatic download of a file in Internet Explorer?

I read Chrome Frame closed last month, I thus tried to understand what it&#39;d mean for the X-UA tag and after 3 hours of research I still didn&#39;t find the answer I&#39;m looking for, my question is the following :

Is it still valid nowdays to use IE=edge,chrome=1 or should I stop at IE-edge from now on ? Or what would be the best pratice to do regarding X-UA, should it be avoided ? 

Is it still valid to use IE=edge,chrome=1?

I am working on a ASP application and the code, template and files are organized in a way that does not allow me to alter anything outside the body tag. So I am thinking about inserting the meta tags inside the body -- like this:

    &lt;!-- FEW ASP INCLUDES --&gt;
    &lt;html&gt;
        &lt;head&gt;
        &lt;!-- FALLBACK TITLE AND DESCRIPTION --&gt;
        &lt;title&gt;Default Title&lt;/title&gt;
        &lt;meta name=&quot;description&quot; content=&quot;Default Description&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;!-- SOME HTML MARKUP --&gt;
        &lt;div class=&quot;dynamic-content&quot;&gt;
            &lt;!-- InstanceBeginEditable name=&quot;dynamic-content&quot; --&gt;
            &lt;!-- THIS IS WHERE I CAN WRITE ASP CODE --&gt;
            &lt;title&gt;&lt;%= Page.Meta.GetTitle( yada, yada ) %&gt;&lt;/title&gt;
            &lt;meta name=&quot;description&quot; content=&quot;&lt;%= Page.Meta.GetDescription( yada, yada ) %&gt;&quot;&gt;
            &lt;!-- InstanceEndEditable --&gt;
        &lt;/div&gt;
        &lt;!-- SOME MORE HTML MARKUP --&gt;
    &lt;/body&gt;
    &lt;/html&gt;

I am wondering how good it is to put meta tags inside the body of an HTML document. How does it affect:

 1. search engines
 2. browsers

What happens if the meta tags are present in the document body?

I want to try figure out how to get the

    &lt;title&gt;A common title&lt;/title&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;Keywords blabla&quot; /&gt;
    &lt;meta name=&quot;description&quot; content=&quot;This is the description&quot; /&gt;

Even though if it&#39;s arranged in any order, I&#39;ve heard of the PHP Simple HTML DOM Parser but I don&#39;t really want to use it. Is it possible for a solution except using the PHP Simple HTML DOM Parser. 

`preg_match` will not be able to do it if it&#39;s invalid HTML?

Can cURL do something like this with preg_match?

Facebook does something like this but it&#39;s properly used by using:

    &lt;meta property=&quot;og:description&quot; content=&quot;Description blabla&quot; /&gt;

I want something like this so that it is possible when someone posts a link, it should retrieve the title and the meta tags. If there are no meta tags, then it it ignored or the user can set it themselves (but I&#39;ll do that later on myself).

Getting title and meta tags from external website

I have a added to the `&quot;viewport&quot;` meta tag `&quot;width=device-width,initial-scale=1.0&quot;` and on an iPad the page loads up fine in landscape mode, the it switches nicely to portrait and when I rotate it back to landscape it scales the page up and I have to pinch zoom it back to a 1 scale.

I can fix this by adding the `&quot;maximum-scale=1.0, user-scalable=no&quot;`, but I was wondering if there is a way I could fix this without taking away from the user the ability to zoom in the page.

If you have any suggestions I would love to hear them,  
Thanks!

iPad layout scales up when rotating from portrait to landscape

Is there a way I can put some code on my page so when someone visits a site, it clears the browser cache, so they can view the changes?

Languages used: ASP.NET, VB.NET, and of course HTML, CSS, and jQuery.

All Meta Tags Solutions on Gang of Coders

Total of 24 Meta Tags Solutions

Generating Facebook Open Graph meta tags dynamically

In <head>, which comes first: <meta> or <title>?

Provide an image for WhatsApp link sharing

How do I get the information from a meta tag with JavaScript?

Force to open "Save As..." popup open at text link click for PDF in HTML

What is the attribute property="og:title" inside meta tag?