So,
I use Advanced Custom Fields on Wordpress to set an featured image that i host on flickr, this way i can query it perfectly in the template i am building.
But this image isn't in the content(text) of the post, so for example Facebook or Twitter or any social media to share posts to don't see this image.
So in posts wherefore i only have one image. Which i show on top of the post as background for the title won't be shown inside the content and therefore social media don't recognize it.
Bullet points:
Wordpress Advanced Custom Fields plugin to add a field to a post where in i paste the url of the picture on flickr.
I can perfectly query the URL and implement it in the template i am building.
But this means that this picture isn't in the post content(text). Therefore social media don't seem to see this picture and don't show a picture if users want to share a article from my website.
I really don't know how to solve this and i hope that somebody has a solution.
English isn't my first language so excuse me in case of any spelling or grammar errors.
I don't really get why you want to host your featured image outside WP or, more specifically, on Flickr... but if you can get its URL via ACF (I guess you're using an URL field) and the issue is Facebook or Twitter doesn't retrieve your image when you share your page, maybe you should implement Open Graph and Twitter Card meta tags.
That's, in your header.php inside <head>:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="#youraccount" />
<meta name="twitter:creator" content="#youraccount" />
<meta property="og:title" content="The title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/your-page" />
<meta property="og:image" content="http://www.example.com/your-flickr-image-url" />
<meta property="og:description" content="Content description..." />
Related
When using Facebook Sharer, Facebook will not shw the post title and image.
But I add open graph in my site and some post work good and some post not work good.
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
in my facebook page we show post like :( http://prntscr.com/h7gwjl )
But I need to show like :( http://prntscr.com/h7gx7e )
As Wizkid say you can use developers.facebook.com/tools/debug for debug your site. You will paste the url in debugger and facebook will clear the cache from your url. If this not work, i suggest you try install a plugin that do this for you.
You can try YOAST SEO.
Here are an article about this.
https://kb.yoast.com/kb/getting-open-graph-for-your-articles/
I already have the social-share button for whatsapp on my webpage, but when you choose a contact to send, it only writes "title_content url" on the writing box. It seams that whatsapp doesn't see the meta tags of the webpage to create a nice box with the image, title and description.
I am using the following open-Graph meta tags and it is working fine with facebook social sharing:
<meta property="og:type" content="website" />
<meta property="og:title" content="{{event.name}}" />
<meta property="og:description" content="{{eventDescription event.information}}" />
<meta property="og:url" content="{{eventUrl url}}" />
<meta property="og:image" content="{{eventImage event}}" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
<meta property="fb:app_id" content="#####" />
I do not have a icon for my event, so I can't set up the tag:
<link rel="shortcut icon" href="###.ico" type="image/x-icon">
I tried to set it with a .png image but it didn't work. So, what else can I do to whatsapp see my website and render that box with the image, title and description?
I just found out what was happening. When you try to feed information to facebook or twitter crawlers you need a special way to do it. So you have to create a crawler route with filter and dynamic content (as you can see on this tutorial that i created: Tutorial ).
With whatsapp you don't need to worry about server side rendering. When I created my open-graph meta tags direct on the <head>.
Eddited:
Because I need meta tags that work dynamically, I had to stop using direct on the <head>. But the docHead() or any of the packages were not working for me. So I realised that whatsapp can work from server side and use the same og: tags that I already have for facebook.
I just needed to find its user-agent that is WhatsApp/2.17.107 A and add the permition like I did for the other ones on the server side route.
I am having some difficulty implementing a solution that I found via my research here (the actual accepted answer is not helpful and has been downvoted to Bolivian).
Problem: Facebook doesn't seem to recognize the OpenGraph meta tags that I have added to my Header.
What I know (or think I know): It is my understanding that by adding some appropriate opengraph meta tags, the content, such as YouTube video, should appear in the body of the "post" on Facebook.
What I have tried so far: Referring to the solution linked above, I have tried to implement this method.
In my examples, I'm embedding this video
https://www.youtube.com/v/BQBjVr1iHH4 in the following page
https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40 I
would like Facebook to show the YouTube video whenever anyone shares
my page on Facebook.
Option 1: setting the og:video to https://www.youtube.com/v/YOUTUBECODE
The meta tag will look like
<meta property='og:video' content='https://www.youtube.com/v/BQBjVr1iHH4' />
Further, I have attempted to disable plugins which may conflict with this -- any plugins which appear to add OG meta tags.
On the code side: I have hard-coded the following meta tags in the Header (this will eventually become a PHP function or something, but not until/unless I can make it work on a single post):
<meta property='og:image' content='http://agnarchy.com/wp-content/uploads/2014/11/2014-11-01-22.02.37.jpg' />
<meta property='og:video' content='https://www.youtube.com/v/dt6pPdz5eqg' />
<meta property="og:video:height" content="854" />
<meta property="og:video:width" content="510" />
<meta property="og:type" content="video">
Observed behavior:
All I see is the post's featured image. When I schedule or submit this link to my facebook page, Facebook does not recognize the OpenGraph tags and does not render the embedded video as part of the content of this Facebook post:
Desired behavior:
This is at odds with the suggested method, which if I use the URL provided in that answer, I can see the embedded video player:
I am implementing various meta tags within my site. Many are aimed at social networks such as Facebook and Twitter. To manage these tags easier I have grouped the related tags.
For instance:
<!-- DESCRIPTIONS -->
<meta name="description" content="Page description. No longer than 155 characters." />
<meta itemprop="description" content="This is the page description">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta property="og:description" content="Description Here" />
This will make it much quicker to insert the descriptions for each meta tag.
My question: Is there any reason Open Graph, Schema.org, Twitter Cards, or any other meta tags need to be:
grouped together and/or
be in a specific order?
Of course this assumes the meta tags are in the <head> of my site.
Most documentations don't mention a required or recommended order (Twitter, FB, OG).
According to this source the order matters for the Google+ button. I'm not sure if that is still true.
The order of the tags is not critical. But schema.org markup should be placed on the page itself, not in the head section with meta tags.
<script type='text/javascript' src='http://test.groundguitar.com/wp- includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://test.groundguitar.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<meta property="og:type" content="article" />
<meta property="og:url" content="" />
<meta property="og:title" content="" />
<meta property="og:site_name" content="" />
<meta property="og:locale" content="en_US" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
</head>
These are lines added by wp_head();. For some reason it adds og tags, and I can't figure out why.
I'm using the Yoast SEO plugin, but have previously used All In One SEO, and they both had og tags disabled, yet this still appeared in the header. Rest of the plugins I'm using are: Facebook Comments by Fat Panda, Contact Form 7 and Any Mobile Theme Switcher. Disabling any of them didn't remove the tags.
Could this be a leftover from a plugin used in the past, which didn't uninstall correctly, and how can I remove it, or at least find out what's causing it?
That definitely looks like something a plugin would add.
First thing I would do is check the header.php file of your theme just to make sure they are not hard coded in there, never hurts to eliminate the obvious first.
Next, do you have JetPack enabled? If so do you have it's Social Links module enabled? Those og tags might be generated from there.
Last but not least if they still are showing up you will need to turn of EVERY plugin and check, might be something that another, not so obvious plugin might be doing.
Good luck!
Yoast plugin provides Opengraph for Facebook and Twitter so that if someone shares your post/page, the desired image with custom title can forward to those social media. You can check https: //www.facebook.com/kumarsn11/posts/747660215383716 this link which redirects user to your website. Its always helpful. Read some basic info about opengraph, you will get basic idea what you are actually using. Read This https: //blog.kissmetrics.com/open-graph-meta-tags/
You can disable it by SEO-> Social-> Add Opengraph Metadata. Disable This.
but I will recommend you not to disable, but use it properly with more customization.
When you click this social icon, you can use custom title other than original or keep the same for Facebook and Twitter.