I am using Reactjs and codeigniter APIs but the problem is in react side. Here is the reactjs meta tags code which rendered when a new page load and get API response. The content of meta tags is updating but in the meta preview apps it is not shwoing the data.
<Helmet>
<title>{data.page_title}</title>
<meta name="title" content={site_settings.site_name} />
<meta name="description" content={meta_desc.meta_description} />
<meta name="keywords" content={meta_desc.meta_keywords} />
<meta property="og:title" content={meta_desc.og_title} />
<meta
property="og:descripiton"
content={meta_desc.og_description}
/>
<meta property="og:url" content={window.location.href} />
<meta
property="og:image"
content={`${site_settings.site_domain}api/uploads/images/${site_settings.site_logo}`}
/>
<meta property="og:type" content="website" />
</Helmet>
Html head
Meta preview apps response
I have used React Helmet, React Document Meta etc npm libraries. but it is not working. Is there a solution that would work without SSR? Or an easy solution with SSR?
Related
I have a problem with the recognition of the tag og:image in my site.
This is the code generated in my php app
<meta property="og:title" content="Fondazione dell'ordine degli psicologi dell'abruzzo onlus" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://www.ordinepsicologiabruzzo.it/images/img_jolly.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="243" />
<meta property="og:image:height" content="227" />
<meta property="og:url" content="https://www.ordinepsicologiabruzzo.it/news/in-primo-piano/fondazione-dell-ordine-degli-psicologi-dell-abruzzo-onlus.html" />
<meta property="og:site_name" content="Ordine degli Psicologi della regione Abruzzo" />
But in the facebook debugger tool the image is not taken quickly and fb advice me to use og:image:width and og:image:height but... these tags are here!
I have tried using the http (and not https) version of the site but is the same.
The website is: www.ordinepsicologiabruzzo.it and a lot of pages are just correctly scraped.
Any ideas?
Your website is not currently declaring og-image in the head. You can see this by visiting your site and viewing source. You'll notice that some of your OpenGraph tags are also missing their content value, including og-image:type, og-image:width, og-image:height.
If you check Facebook's Developer tools, you will be told the same thing, that you are missing og-image.
Add the og-image tag, and just use // for the beginning of content link.
<meta property="og:image" content="//ordinepsicologiabruzzo.it/images/img_jolly.jpg" />
I'm working on a webpage for a journal where people should be able to share the articles on Facebook. The sharing itself is working, but the problem is the content of the shared post.
What I know is that I have to provide the right meta for the Facebook api to work properly. So that's what I've done in PHP . It queries the database for the title, img source, description, etc... Then it fills those in <meta> tags. And I suppose the result is ok:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<meta name="app_id" property="fb:app_id" content="1056245557765877">
<meta name="ogtitle" property="og:title" content="اتفاقية تعاون لدعم طلاب الدكتوراه
بين مجلس البحوث واللبنانية الاميركية">
<meta name="ogtype" property="og:type" content="article">
<meta name="ogurl" property="og:url" content="http://alanwar.com/article.php?categoryID=6&articleID=296870">
<meta name="ogimage" property="og:image" content="http://alanwar.com/issues/2693/296870_55117_s.jpg ">
<!--meta name="ogimage" property="og:image" content="#"/ -->
<meta name="ogname" property="og:site_name" content="Alanwar">
<meta name="ogdesc" property="og:description" content="وقعت الجامعة اللبنانية الأميركية (LAU) والمجلس الوطني للبحوث العلمية اتفاقية تعاون، في إطار دعم بعض الطلاب المتفوقين لدرجة الدكتوراه، ويتم التعاون بين الطرفين من خلال مركز الدراسات العليا والأبحاث في ...">
This is online , and I made sure the meta is written before the body is loading. Also here is the output from Facebook debug tool found here
Meta Tag <meta property="fb:app_id" content="1056245557765877" />
Meta Tag <meta property="og:title" content="اتفاقية تعاون لدعم طلاب الد... See More
Meta Tag <meta property="og:type" content="article" />
Meta Tag <meta property="og:url" content="http://alanwar.com/article.php?categoryID=6&articleID=296870" />
Meta Tag <meta property="og:image" content="http://alanwar.com/issues/2693/296870_55117_s.jpg " />
Meta Tag <meta property="og:site_name" content="Alanwar" />
Meta Tag <meta property="og:description" content="وقعت الجامعة اللبنانية الأ... See More
(Content copied form the debug page)
And the shared post in the debugger is displaying just like I want it to.
Now when I click share on the webpage for a real test, it only shares a link, no title, no image ... Although I think I followed the proper procedure.
Any ideas ?
I design my website using html and php and MySQL , i use Open graph Meta tag to share my website on Facebook
<meta property="og:title" content="" />
<meta property="og:type" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="fb:admins" content="" />
I use this meta tag in all page like news and essay , my problem is for example i want to share one of website news on Facebook and i want share correct content , when i try to share , its share content i used in meta tag , i want share my news title, image and content..
my website work dynamically with MySQL and all of my website content like image and text saved in database .
My Question is how dynamically change share content of separate page using Open Graph Meta tag or another thing .
I don't understand what exacly you want from us.
This can vary depending on how your site script work.
You must set og meta content like how you show page content.
For example:
<meta property="og:title" content="<?=$page['title'];?>" />
<meta property="og:type" content="<?=$page['type'];?>" />
<meta property="og:image" content="<?=$page['image'];?>" />
<meta property="og:url" content="<?=$page['url'];?>" />
<meta property="fb:admins" content="<?=$page['admins'];?>" />
I am sharing my website video page on Facebook. I have used a high resolution image in og meta tag.
My Issue
When I use the highlight feature for my post, facebook doesn't shows the big image like it is doing in the YouTube video sharing case. I am using following code:
<meta property="og:site_name" content="MysiteName"/>
<meta property="og:url" content="Post URL"/>
<meta property="og:title" content="你好，喬，這是工作"/>
<meta property="og:type" content="video" />
<meta property="og:image" content="Image Url" />
<meta property="og:description" content="Enter Your Sub Headline Text Here"/>
<meta property="og:video" content="Video Url" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="2048" />
<meta property="og:video:height" content="1024" />
<meta property="fb:app_id" content="AppID" />
Little preview to show, what i want to achieve. http://screencast.com/t/rxCbLySMEn
Please help to resolve the error.
Which link are you passing in og:video?
YouTube does that with the use of the og:video tag.
og:image for normal image
og:video when video in highlight mode
The URL needs to be in this format:
<meta property="og:video" content="http://www.youtube.com/v/k86xpd26M2g">
I'm doing a project in which I have to show the project description to the app user and what I have is the url of the product, the url could be from any site it could be the product url from amazon, ebay etc after searching a lot I found that the facebook's linker does the same thing that I want for my project that is generating the meta tags from single url, after generating the meta tags I will get the information i needed from those tags but the question is how to generate those tags.
Below is the code in my product.php I used to debug on facebook linter
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="fb:app_id" content="xxxxxxxxxxxxxx" />
<meta property="og:url" content="http://www.amazon.com/Programming-PHP-Rasmus-Lerdorf/dp/0596006810/ref=pd_sim_b_4" />
<meta property="og:site_name" content="social" />
<meta property="fb:profile_id" content="">
<meta property="og:type" content="website" />
<meta property="og:image" content="" />
<meta property="og:title" content="" />
</head>
<body>
</body>
</html>
When I pressed the debug button, it generates the meta tags as shown below
I want to show exactly the same output that facebook linter generate to show the product image, description to my user.
thanks in advance
If I'm understanding your question right...
Your sites meta tags:
<meta name="custom_image_tag" content="http://yoursite.com/images/product_1.jpg" />
<meta name="custom_description_tag" content="The product description" />
Php code to fetch the tags
$tags = get_meta_tags('http://www.yoursite.com/some-page.html');
echo $tags['custom_image_tag'];
echo $tags['custom_description_tag'];
As for Amazon you could use their title meta tag and scrap images from the page.