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/
Related
I am trying to add og:type, og:title, og:image, og:description, and og:url meta tags to my laravel page but none of them are being properly scraped by the Facebook Sharing Debugger.
I’ve already tried moving these meta tags around but the result from Facebook never changes.
Here’s a part of the HTML meta tags I have added:
The meta tags I have added are not being scraped properly and the debugger returns the following:
P.S.
For some reason, Facebook seems to be scraping my main page instead of the link I have provided. I am sure my link is publicly accessible.
For some reason, Facebook seems to be scraping my main page instead of the link I have provided.
Facebook is just doing what you’re telling it to:
<meta property="og:url" content="http://dev.mafindoor.com">
From the Open Graph docs:
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
When the Facebook crawler finds this tag, treats it like a <link rel="canonical"> tag - by treating the crawled page as an alias for the linked URL.
The og:url meta tag should be set to the preferred URL of the current page, not the entire website.
You can see this behaviour in the Facebook Sharing Debugger (link):
PS:
As it stands, one of your OG meta tags uses mixed single and double quotes, rendering it and all subsequent tags invalid:
<meta property="og:type" content='website">
<meta property="og:title" content='Mafindoor - SM City Legazpi">
<meta property="og:image" content="http://mafindoor.com/img/pages/screen2.jpg">
<meta property="og:description" content="Thanks Mafindoor for helping me find my ways inside SM City Legazpi">
<meta property="og:url" content="http://dev.mafindoor.com">
<meta property="fb:app_id" content="329159957633823">
This is only a guess based on your images but try to use double quotes content="" and so on. I would place your og tags at the end of head section. OG title can possibly be ovverriden with <title> and og description with standard meta description tag.
I read og documentation and they advise to provide image dimensions:
<meta property="og:image" content="fav/og-thumb.png">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
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
Does anyone else have this problem or can you see what may be wrong on my end?
Problem: If I go to LinkedIn (business or personal) and post a link to one of my websites:
https://inventivewebdesign.com/
https://www.revealio.com/
I get the image, but I don't get the title or description. Both sites are using WordPress with the latest version of Yoast SEO. I asked LinkedIn and they just said that my meta og tags need to be added to my site, but when I look at the source code for each page on either site I can see them there. Is there something that I am missing?
This is what LinkedIn Customer support said:
You'll need to make sure the source code complies with Open Graph
Protocol (OGP) and certain image requirements specific to LinkedIn.
Our developer website contains more details on setting display tags
for shares (available in English only). Below are the og: tags that
must exist and their correct format:
<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" />
Here are the image requirements specific to the LinkedIn sharing
module:
Max file size: 5 MB
Minimum image dimensions: 1200 (w) x 627 (h) pixels
Recommended ratio: 1.91:1
These are the OG tags on my site:
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.revealio.com/features/" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:site_name" content="REVEALiO" />
<meta property="og:title" content="How To Make Your Message Come Alive With REVEALiO" />
<meta name="twitter:title" content="How To Make Your Message Come Alive With REVEALiO" />
<meta property="og:image" content="https://www.revealio.com/wp-content/uploads/BC_phone_scan-iPhone-wText-1.jpg" />
<meta name="twitter:image:src" content="https://www.revealio.com/wp-content/uploads/BC_phone_scan-iPhone-wText-1.jpg" />
<meta property="og:description" content="REVEALiO Is a Video Marketing Technology That Makes Your Promotional Materials COME ALIVE With A Personal Video Message and Call To Action Buttons" />
<meta name="twitter:description" content="REVEALiO Is a Video Marketing Technology That Makes Your Promotional Materials COME ALIVE With A Personal Video Message and Call To Action Buttons" />
<meta name="twitter:creator" content="#Revealiocards" />
<meta name="twitter:site" content="#Revealiocards" />
Am I missing something?
I'm not having any trouble with your title tag, but your description tag is definitely missing. LinkedIn provides two levels, which each are triggered in their own way, but they are mutually exclusive...
Level 1
If you supply: og:image tags.
The preview shows: title, url, image.
Level 2
If you supply: no og:image tags, but an og:description tag.
The preview shows: title, url, description.
Your site is using level 1...
The Official Microsoft LinkedIn Share Documentation makes no mention of these levels. But I have been informed by LinkedIn support staff that they exist, and experimentation seems to confirm it.
Example: Wikipedia has og:description and is missing og:image, so, sharing Wikipedia shows the description. But GitHub has both og:description and og:image, so, sharing GitHub shows the image.
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 just want to confirm can we add the normal HTML meta tags to JQuery mobile like,
<meta name="DESCRIPTION" content="description " />
<meta name="KEYWORDS" content="" />
<meta name="RATING" content="General" />
<meta name="REVISIT-AFTER" content="30 days" />
<meta name="author" content="author name" />
<meta name="robots" content="NOODP" />
<meta name="verify-v1" content="" />
<meta name="robots" content="noindex" />
Becase I don't see any where we can include this or not ? Even JQuery mobile site has not added to their site (I checked by view source thier page). Could anyone please confirm above meta tag will affect or not to the JQuery mobile site apart from their setup ?
Ya sure. Meta tags will not affect to Jquery mobile indeed they will enhance the search engine optimization(SEO) of your site.
HTML meta tags are officially page data tags that lie between the open and closing head tags in the HTML code of a document.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The META tag is primarily used to help search engines better index a document by supplying additional information about the document. The types of additional information that META tags can provide include an author's name, a description or short abstract of a document, or a set of keywords for indexing a document. Providing this type of additional information should increase the chance that users will find your documents -- the information they want -- on the Web. In addition to providing indexing information, META tags can also be used to refresh a Web page or to redirect a user from one Web page to another.