StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Some properties can have extra metadata attached to them. These are specified in the same way as other metadata with <code>property</code> and <code>content</code>, but the <code>property</code> will have extra :</p> <p>The <code>og:image</code> property has some optional structured properties:</p> <ul> <li><code>og:image:url</code> - Identical to og:image. </li> <li><code>og:image:secure_url</code> - An alternate url to use if the webpage requires HTTPS. </li> <li><code>og:image:type</code> - A MIME type for this image. </li> <li><code>og:image:width</code> - The number of pixels wide.</li> <li><code>og:image:height</code> - The number of pixels high.</li> </ul> <p>A full image example:</p> <pre class="lang-html prettyprint-override"><code><meta property="og:image" content="http://example.com/ogp.jpg" /> <meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" /> <meta property="og:image:height" content="300" /> </code></pre> <p>So you need to change <code>og:image</code> property for your HTTPS URLs to <code>og:image:secure_url</code></p> <p>Ex:</p> <p><strong>HTTPS META TAG FOR IMAGE:</strong></p> <pre class="lang-html prettyprint-override"><code><meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" /> </code></pre> <p><strong>HTTP META TAG FOR IMAGE:</strong></p> <pre class="lang-html prettyprint-override"><code><meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" /> </code></pre> <p>Source: <a href="http://ogp.me/#structured" rel="noreferrer">http://ogp.me/#structured</a> <-- You can visit this site for more information.</p> <p>Hope this helps you.</p> <p><strong>EDIT:</strong> Don't forget to ping facebook servers after updating your codes - <a href="http://developers.facebook.com/tools/lint/" rel="noreferrer">URL Linter</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload