I am using Open Graph for image sharing but it picks up the wrong image that I’ve already deleted from the database. In the Inspect Element tab of Web Inspector, it shows the correct image path but it does not share the correct image.
PHP code:
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Profile Share by user." />
<meta name="author" content="I" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="http://mydocs.com/">
<meta name="twitter:title" content="User profile">
<meta name="twitter:image" content="<?php echo $SITE_PATH.$meta_userimage;?>" />
<meta property="og:title"content="User profile" />
<meta property="og:image" content="<?php echo $SITE_PATH.$meta_userimage;>"/>
I’ve already referred to this link but it doesn’t help me.
When Facebook queries the open graph data for a page, it gets cached until you flush it or 24 hours are up.
If you visit this facebook debug page and try scraping the page; you will find an option to refresh the scrape by clicking the "Fetch new scrape information" button
Related
I am trying to post the link to my portfolio onto linkedin and it always shows up with "Web site created using react app" as the description, which definitely doesn't make it look professional. It is deployed on my domain but is there any way I can get rid of all the create-react-app default stuff on my domain link?
change the description and the title from your index.html file in the public folder then Rebuild your app
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700" rel="stylesheet">
<title>React App</title>
You need to change the index.htm file in the public folder the title and meta tags will contain this default title.
You'll need to add these meta tags into the header of your index.html
Also the image size should be minimum 1200x627 (as per the linkedin documentation)
<head>
<meta property="og:title" content="*TITLE*" />
<meta property="og:image" content="%PUBLIC_URL%/linkedin.png" />
<meta property="og:description" content="*DESCRIPTION*" />
</head>
If you're still having issues with LinkedIn recognising the new headers insert the url again but with a random parameter at the end of the url.
So if your site url is:
https://www.example.com
Try adding the link again with the empty parameter:
https://www.example.com?1
This should force linkedin to pull the new head data.
There is a function for every page in wordpress so if we share link in other websites then it fetches title, description and featured image of that page / post, but i wanna make this functionality in core php not in wordpress, how can i make it so when i share link to other website then it fetches only that one featured image ? without featured image functionality it fetches only logo.
please could you help me?
If I understand correctly, all you need to do is add OpenGraph on your PHP/HTML header.
<meta property="og:title" content="Your desired title" />
<meta property="og:description" content="Some sentences here" />
<meta property="og:url" content="https://www.yourdomain.com/filename.php" />
<meta property="og:site_name" content="rumahweb.com" />
<meta property="og:image" content="https://www.yourdomain.com/featured-image.png" />
Insert above code (and adjust the value as necessary) inside your HEAD section of your HTML/PHP file.
I am trying to make a button share google+ with title, description and image. Everything works fine but only image that google+ pick wrong.
Here my code:
<meta property="og:type" content="website" />
<meta property="og:title" content="{title}" />
<meta property="og:image" content="{image}" />
After that I test and know that Google+ will pick image with largest size in your page.
Do you have any solution?
my app is a chrome extension
I have a content-script injected to Facebook share pop-up.
I successfully manage to add text to the input via DOM manipulation,
but when I click share, it clears the input and then share the link.. any idea why?
Best practice for FB share is via Open Graph, http://ogp.me/
<!-- Facebook Open Graph Meta Tags -->
<meta property="og:title" content="OG title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://domain.com" />
<meta property="og:image" content="http://domain.com/fb-image.png" />
<meta property="og:description" content="OG description" />
You can also try FB sharer, but keep in mind that it's deprecated and not advised to use.
fb share
I have a page on my website that is located at domain.com/mypage.html
I would like to do a link share with this link so that the ad is displayed but the whole image is still a link to our actual web page. The problem is that Facebook will still display the image in a small thumbnail like before they added the new larger link shares last year.
I have added all the og meta tags for the image, I have made sure the image has an aspect ratio of 1.91:1 with an actual size of 1200x627. The titles and description tags all have very little text so they are within the character limit.
I have refreshed the Facebook crawler's copy of the page with the Facebook Debugger/Linter tool.
Nothing I do changes how Facebook will display this link-share. It will never display in the larger format.
Here are meta-tags in mypage.html:
<meta property="og:image" content="http://www.domain.com/images/fb_ad.jpg"/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:url" content="http://www.domain.com/mypage.html"/>
<meta property="og:title" content="My Title"/>
<meta property="og:description" content="My Description"/>