CODEWITHSUNDEEP
htmlfacebooktwittershare
Alex Mercer
Alex Mercer

Reputation: 27

Trying to set the image in sharing at google+, facebook, twitter via HTML

I am trying to make google+, facebook and twitter to show the image I've selected when sharing. I wrote an html code as it should be, but it doesn't work for some reason. That's in the body:

<a href="https://www.facebook.com/sharer/sharer.php?u=incodedURL" target="_blank">
    <img src="other/facelog.png" alt="Facebook Logo" id="facelog"></a>

<a href="https://plus.google.com/share?url=incodedURL" target="_blank">
    <img src="other/googlog.png" alt="Google Plus Logo" id="googlog"></a>

<a href="https://twitter.com/intent/tweet?url=incodedURL" target="_blank">
    <img src="other/twitlog.png" alt="Twitter Logo" id="twitlog"></a>

In the head I've tried Open Graphs, meta tags and item props from 1, 2, 3, and 4.

and from many others, but none of them works. My image, title and discription is not displayed. I am using 450x450 px .jpg image. HTML.

Upvotes: 1

Views: 687

Answers (1)

Chun
Chun

Reputation: 2270

You need to use meta tags for this.
The following is a list of meta tags for all the 3 social networks:

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.jpg">

<!-- Facebook - Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="fb:admins" content="Facebook numberic ID" />

On the Facebook case, you can use the Debugger tool to check if these meta tags are being implemented correctly.

Upvotes: 1

Related Questions