I have a wordpress website with a few simple pages and a facebook share button in the header. As it is now, facebook uses the wordpress page name as the title for the share, but I'd like it to use the html title instead (or just specify my own). How would I go about this?
Check this plugin. It allows you to add open graph tags on page or post basis or default settings for your site.
http://wordpress.org/extend/plugins/open-graph-protocol-in-posts-and-pages/
Just set the <meta property> tags in your HTML. Notice the indented lines:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Your Title</title>
<meta property="og:title" content="Your Title" />
<meta property="og:image" content="http://www.example.com/myimage.jpg" />
...
</head>
...
</html>
You have a wide variety of properties to choose from: Open Graph Protocol Official Documentation. Ultimately, this is just a problem of using the right HTML.
Related
I was wondering if someone could explain how social media rich previews define which og:title to pick.
I use wordpress and for certain pages I insert php echo strings to inject them into the <head>. I choose to do that to change certain titles and descriptions into more commercial texts. What obvisouly happens is that there are 2 og:title meta tags; my injected one and the Wordpress backend page title.
Once I was told that the first meta tag in the top of the <head> will be picked as thé meta tag to be picked up for rich previews for example, but this seems not to happen (anymore).
Below is my current situation and exact order of meta tags in the <head>:
<html>
<head>
<meta charset="UTF-8">
<title>EXAMPLE</title> // my injected and used by Google
<link rel="canonical" content="https://example.com">
<meta name="description" content="description">
<meta name="subject" content="example">
<meta name="og:image" content="/image.jpg"> // my injected and used by Social Media
<meta property="og:title" content="og:title #1"> // my injected og:title, but ignored
<meta property="og:description" content="description">
<meta property="og:url" content="https://example.com">
<meta name="twitter:title" content="EXAMPLE">
<meta name="twitter:description" content="description">
<link rel="alternate" href="https://example.com" hreflang="nl-nl">
<link rel="alternate" href="https://example.com" hreflang="nl-be">
<title>EXAMPLE</title> // default by Wordpress
<meta property="og:title" content="og:title #2"> // default by Wordpress and being used
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta name="og:image" content="/image.jpg"> // default by Wordpress
</head>
</html>
What happens is that Whatsapp and Facebook are taking the 2nd og:title meta tag, which doesn't make sense in my opinion.
Changing the title page in the backend is not a solution, because it becomes something like Check out our wonderful shop!, this is not user friendly. Also I'm not a fan of Yoast, because Yoast loads extra code into the pages, which I don't want.
Who knows a solution to this, or can explain why this is happening?
Update & Answer
Thanks to Chris I understand that og: meta tags are being scanned from top to bottom in the <head>, and updates the 2 identical properties with the last one that is being scanned. This RDFa process is typical for apps like Facebook, Whatsapp, Twitter. One exception: og:image seems to be needed in the top, it doesn't override a second or third one below it.
Google Search related tags are being picked up by the first one in the top of the <head> and keeps that one as "first come, first serve".
Solution: I will inject og: tags into the bottom of the <head> and the other ones will be kept in the top. Tested it and it works.
Facebook and other apps generally use their own slimmed down versions of RDFa parsing, which from my understanding is a way to parse meta data from xml and html documents. From what I was reading, it seems that as the parser goes through your html page, it will add the first metadata piece it finds to it's "current subject", and if it finds another one with the same name, it will then overwrite the "current subject" with the updated info.
It seems like a pretty complicated topic, so I suppose the simple answer would just be that their parser will always take the last meta data tag and use that.
To fix the issue, I would see if you can inject your custom og:title/metadata below the one autoinjected by Wordpress.
You can read more about RDFa parsing here
I'm developing a website in Weebly platform. I'm having issues with the meta-tags because without them I can't publish/advertise the website on Facebook which is a must for the organization.
So, I have already went to Settings > SEO and than added:
<link rel="canonical" href="https://www.website.com" />
<meta property="og:url" content="https://www.website.com" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://www.website.com/files/theme/facebook-logo.png"/>
Because that didn't work I also added on the Pages > Index > SEO Settings the same code excerpt to the header of the page. That also didn't work.
When I go inspect the page on Chrome I verified that there are 3 repetitions of the meta tag
<meta property="og:url" content="https://www.website.com" />
which one of them is http...
What am I missing here? Is Weebly filling out meta tags by default? Is it some mechanism?
Thanks in advance
Weebly adds Open Graph meta tags for the site automatically and fills them out by default using the information you supply while defining/building your site.
If you want to change the values for these automatically injected, Open Graph meta tags, you will want to change the settings and SEO for your site/pages.
I've been searching high and low for an answer for my question. With no luck.
If I run a website on https://www.x.com, can my og:image be from https://www.y.com?
<meta property="og:image" content="https://www.y.com/images/thumb.jpg" />
Yes, all og meta tags can showcase a different domain, even the url, as was purportedly discovered by Barak Tawily last month. The og meta tags are meant to indicate what content is available on a website, though there is no way to know what is actually there until a user clicks on the links. Note that while this can be used legitimately, it can also be used to for nefarious purposes.
According to TheHackerNews:
Interestingly, Tawily found that Facebook does not validate if the link mentioned in 'og:url' meta tag is same as the page URL, allowing spammers to spread malicious web pages on Facebook with spoofed URLs by just adding legitimate URLs in 'og:url' Open Graph meta tag on their websites.
Tawily's video showcases spoofing og:image at the same time as spoofing other og tags:
All you need to do is set the content attribute to the secondary domain.
Hope this helps! :)
Yes, it can be.
An example from the documentation from fb:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
The content can be whatever you want it to be.
Reference: http://ogp.me/
I'm having issues with sharing a website I'm working on on LinkedIn: LinkedIn doesn't fetch any data from the page. The site's metadata follows the recommendations in their docs. I tried all these suggestions.
In addition, I investigated the following:
Serving content over HTTP instead of HTTPS, but a lot of other sites served over HTTPS, such as https://stripe.com/no and https://www.facebook.com/, work perfectly fine.
Posting as a company page. This didn't make any difference, other than allowing manual data entry (which is handy as a makeshift solution).
Posting as a different user. Didn't make any difference.
Posting new content on the website to make sure that the metadata hadn't been cached by LinkedIn. This also didn't make any difference.
This was also a problem before I added the Open Graph meta tags.
This might be a problem caused by LinkedIn, but – considering that this works for other sites – I'm open to the possibility that I'm the one doing something wrong.
I don't think you will see any changes in the data that LinkedIn grabs from your website for about a week:
The first time that LinkedIn's crawlers visit a webpage when asked to share content via a URL, the data it finds (Open Graph values or our own analysis) will be cached for a period of approximately 7 days.
This means that if you subsequently change the article's description, upload a new image, fix a typo in the title, etc., you will not see the change represented during any subsequent attempts to share the page until the cache has expired and the crawler is forced to revisit the page to retrieve fresh content.
https://developer.linkedin.com/docs/share-on-linkedin (scroll to the bottom)
In my case it seemed that LinkedIn Parser is really poor to the point that if your HTML file doesn't have the <head> tag (which is not required by the spec) It will simply ignore everything where the bellow wouldn't work
<!doctype html>
<meta charset=utf-8>
<meta property=og:title content='My Shared Article Title'>
<meta property=og:description content='Description of shared article'>
<meta property=og:image content=http://i.imgur.com/12345.jpg>
<meta name=description content='Nice description'>
<title>TEST 15</title>
<p>content here</p>
But simply adding the opening <head> tag (still valid HTML), did the trick
<!doctype html>
<head>
<meta charset=utf-8>
<meta property=og:title content='My Shared Article Title'>
<meta property=og:description content='Description of shared article'>
<meta property=og:image content=http://i.imgur.com/12345.jpg>
<meta name=description content='Nice description'>
<title>TEST 15</title>
<p>content here</p>
I was having the exact same issue. Clear your cache history. Then add this 'prefix="og: http://ogp.me/ns#'" to each metadata tag, and it will work immediately:
<meta prefix="og: http://ogp.me/ns#" property='og:title' content='Content Title'/>
<meta prefix="og: http://ogp.me/ns#" property='og:image' content='https://images.url...'/>
<meta prefix="og: http://ogp.me/ns#" property='og:description' content='Description'/>
<meta prefix="og: http://ogp.me/ns#" property='og:url' content='https://site_url/'/>
This will fix it for you just enter your website into here and it seems to clear their cache which in my case was about 3 years old cache ???
https://www.linkedin.com/post-inspector/inspect/
As in all things programming, let's first look at the Official LinkedIn Sharing Documentation! The LinkedIn share API will respect the following og: tags in your HTML...
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
Want to be sure you're using it right? That's easy -- check out the Official LinkedIn Post Inspector to have your share URL debugged, checked, and verified.
I'm trying to have a share button on my site that can share on behalf of YouTube. Let's say the page is http://www.mysite.com/test.html.
test.html
<!DOCTYPE html>
<html>
<head>
<meta property="og:url" content="http://www.youtube.com">
<meta property="og:description" content="My custom YouTube share">
<meta property="og:title" content="YouTube Share">
<meta property="og:image" content="http://www.mysite.com/preview.png">
</head>
<body>
<a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.mysite.com%2Ftest.html">Share</a
</body>
<html>
But it's completely ignoring my meta properties when I click the Share. How can I get it so that Facebook looks at all of my declared meta properties? Or is it impossible to share on behalf of another site?
EDIT:
Here's a sample screenshot of what I'm trying to do:
To get custom text on another site's content share, you could use a URL on your site as the og:url, serve facebook's crawler the meta tags with the title, description etc that you want, but redirect other browsers to YouTube
(i.e share a link to a URL on your site, then on that URL have logic which says
if user agent == Facebook's crawler serve meta tags, else HTTP 301 redirect to youtube