I am new to this. We have a wedding photography web site.
http://www.DawnKellyPhotography.com/fbshare/FBalbum/
I have used the Facebook developer page to generate the code to put on the put a Like button on each image's individual page, using the iframe method.
<iframe src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdawnkellyphotography.com%2Ffbshare%2FFBalbum%2F%3Fshow%3Dslides%2FNodownLoad.html&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:250px; height:80px;' allowTransparency='true'></iframe>
I have also added the meta og tags to the image's html wrapper file.
<meta property="og:type" content="website">
<meta property="og:sitename" content="Dawn Kelly Photography">
<meta property="og:url" content="http://www.DawnKellyPhotography.com /fbshare/FBalbum/?show=slides/NodownLoad.html">
<meta property="og:image" content="http://www.DawnKellyPhotography.com/fbshare/FBalbum/slides/NodownLoad.jpg">
<meta property="og:title" content="Facebook Test Gallery">
I was expecting that the Like click would post the og:image and the og:url. Instead, just a link to the web site's base url is being posted along with the home page's image. The gallery is generated using JAlbum and a custom skin, and runs on the web site using a custom javascript. I have access to change any of these as needed.
Thanks in advance.
Any help will be appreciated.
You are missing og:image tags from your link you specified in your iframe.
Fix the warnings you have on the linter tool.
Inferred Property: The og:url property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The og:title property should be explicitly provided, even if a value can be inferred from other tags.
http://graph.facebook.com/10150531249004372
http://developers.facebook.com/tools/debug/og/echo?q=http%3A%2F%2Fdawnkellyphotography.com%2Ffbshare%2FFBalbum%2F%3Fshow%3Dslides%2FNodownLoad.html
Related
For example, the URL of a page has the og: <meta property="og:image" content="https://url.com/wp-content/uploads/2016/09/image.png">
If I write that URL in LinkedIn that previous image is shown, but if I write the URL https://url.com/suburl no image is shown, and the og is the same: <meta property="og:image" content="https://url.com/wp-content/uploads/2016/09/image.png">
Why does LinkedIn do that? In fact both pages have the og meta data. What am I doing wrong?
See answer here:
https://stackoverflow.com/a/43567627/3644967
In short, it's likely because you're missing the OG prefix on your page:
<html lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
Either add it manually, or if you're using a WordPress theme, use a plugin like Complete Open Graph to manage that for you:
https://wordpress.org/plugins/complete-open-graph/
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..." />
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 build a new wordpress site and installed the Yoast SEO plugin.
My homepage defined as some of my pages.
When i post the link on facebook i can't see any description/title/image that i want
checked on - https://developers.facebook.com/tools/debug/og/object/
i got:
og:type article
(i think that In order to work should appear : website)
maybe someone knows Where I'm wrong?
Thank you!
Facebook uses OpenGraph, a protocol for which if no default values are defined (and you have no standard HTML <meta> values defined,) you can set certain properties so that your site will appear as you want it when you share it socially.
It should be noted that Opengraph will, by default, attempt to interpret these properties by their corresponding <meta> elements (stuff like <meta name="description" content="describe my site">).
If you don't have these, I suggest you add them, but the OpenGraph properties can be defined explicitly, too. The process for adding properties like this involve the use of the <meta> tag, typically in your header.php.
There are a lot of properties you can define
I think most pertinent to your situation would be:
<meta property="og:image" content="path/to/image">
<meta property="og:title" content="My cool website">
<meta property="og:description" content="Description of site">
These work for sites that use OpenGraph, but it's no substitute for having proper <meta> tags in the <head> of your document.
here's a bit of reading you can do on defining site meta
Hope this helps!
I would like to hide a page from search engine using meta tag. Is there any meta tag for the same?
use
<meta name="robots" content="noindex">
to prevent all robots from indexing the page.
Additionally, you can define rules for specific robots by referencing them by name:
<meta name="googlebot" content="noindex">
See google webmasters pages.
You can use META tags though it may not be your best bet. The best resource I can think off for all your options here is: http://www.robotstxt.org/