I have a page setup for Open Graph Protocol because our app is built upon Angular 1.x now when we share a URL using LinkedIn. Share Popup opens but it does not crawl open graph tags sometimes and sometimes it shows the proper crawl tags it was working fine till last week. here is the image which shows the preview area:
Scenario for sharing a link:
User comes on our site: www.example.com/event/[EVENT_ID] and clicks share to LinkedIn.
Popups opens using: https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/event/0u83s43rf6r/4295028179 where 4295028179 is event id and 0u83s43rf6r is a random key for sharing because of cache busting.
Now we are using apache mod_rewrite to redirect LinkedIn, Facebook, Twitter bot to our crawler page where Open graph tags are rendered.
Apache Mod Rewrite Settings in .htaccess file
RewriteCond %{HTTP_USER_AGENT} ^(facebookexternalhit/(.*)|Facebot|Twitter(.*)|Pinterest|LinkedIn(.*)|LinkedInBot)$ [NC]
RewriteRule ^(event)/([_0-9a-zA-Z]+)/([0-9]+)$ https://share.example.com/web/crawler/details/$3 [R=301,L]
So the end url becomes when crawler redirect based on USER AGENT where open graph tags are rendered: http://share.example.com/web/crwaler/details/4295028179
Here is the rendered html tags:
<html>
<head>
<script type="text/javascript">window.location = 'https://example.com/event/236129271' // if it's a browser then redirect it to website</script>
<meta property="og:title" content="Event Title" />
<meta property="og:description" content="Event Description" />
<meta property="og:image" content="Event Thumbnail" />
<meta name="title" content="LinkedIn Share Test" />
<meta name="description" content="Event Description" />
<meta property="og:image:width" content="188" />
<meta property="og:image:height" content="71" />
<!-- Twitter Card Working Fine-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Event Title">
<meta name="twitter:description" content="Event Description">
<meta name="twitter:image" content="Event Image">
</head>
<body>
</body>
</html>
Last week this logic is working fine on Linkedin but now somehow it's not working.
Your code seems fine, you have the right og: tags, etc..
Whenever you're not sure that you're using the LinkedIn share API, check out your website with the LinkedIn Post Inspector, and this will tell you how the LinkedIn API is looking at your webpage. It covers many things, from <title> tags, to og: tags, to oEmbed tags, etc., etc..
Worried about caching? Why not test a URL like example.com?someFakeParameter=123? This will similarly bypass the caching at the LinkedIn Post Inspector.
If you could post your actual URL that you're sharing, I could give you a better answer, but hopefully something here helps!
Related
I know similar question is asked multiple times but they do not have correct answers and none of them is working for me. I have trying to share my url, title and description on google+ but seems like its not working.
I tried everything given on the page - https://developers.google.com/+/web/snippet/
My web page has dynamic title, description and image but Google+ is not able to take all that information from Open graph parameters (og:image, og:title etc) provide
Following are my open graph parameters which will be filled during page load and I checked it through debugger, all the information is coming correctly.
<title>this is test </title>
<meta charset="UTF-8"/>
<meta name="description" content="this is test desc"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:image" content=""/>
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
and the sharing link which I have been using is : https://plus.google.com/share?hl=en&url=xxxx
Can someone please suggest how will it work with dynamic contents?
Note: Open graph is not working for facebook also but I had to explicitly provide all parameters in share link of Facebook.
Google+ Snippets do not work with dynamic apps. The info has to be returned in the HTML since Google's parser does not execute JavaScript.
the reason of this question is because I am having troubles with a route address in MVC 4 application, what is happening here is that I have an action link in this way in a view:
<li>#Html.ActionLink("Description", "Action", "Controller")</li>
And when I run the app in the HTML in the web browser appear the link generated correct
<li>description</li>
but when I click on the link in the web address bar the destination route appears as follows:
http://localhost:port/#/Controller
Is inserting a "#" char in between, is doing this for all of the links in my different views, it do the same when I deploy the App in a web server too no only in my local and this makes that the destination page don't appear correct, I don't know the reason of this, I have been searching but without success, hope you can help me, thanks in advance.
I found the reason for that behavior, it was because I have the script load for jquery mobile on the head section in the _Layout_cshtml file like this
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
#Scripts.Render("~/bundles/jquery")
#Styles.Render("~/Content/mobilecss", "~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquerymobile")
</head>
What I do was change the location of jquerymobile script to the end of the _Layout.cshtml
#Scripts.Render("~/bundles/jquerymobile")
#RenderSection("scripts", required: false)
</body>
With this change the web route was created correctly, I hope this helps to somebody.
Is there any way to capture all the redirects on the page performed in JS? For instance, let's take a look at this web page making redirect using window.location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redirect JS</title>
</head>
<body>
<script>
window.location = "http://www.example.com";
</script>
</body>
</html>
or meta tag
<meta http-equiv="refresh" content="0; url=http://example.com/">
I would like to render web page and get all urls where user has been redirected. Is it possible? How to do that in selenium?
In Python: http://selenium-python.readthedocs.org/en/latest/api.html : webdriver has property current_url. After you driver.get() the page, I would assume current_url is the redirected URL. Is it not?
Your requirement "in Selenium" will make this impossible. Selenium interacts with a browser as a human would - a human should generally not know or care about all the redirects. If you are willing to abandon Selenium for this purpose, then there are libraries such as HttpBuilder (in the Java world) and many others (for other languages) that allow you to manipulate and watch HTTP traffic, which is what you are after here.
Let's say i have a simple blog engine. I've posted a simple post with URL
http://example.org/blog/awesomr-post
Few days later i've noticed the typo and fix my URL
http://example.org/blog/awesome-post
But search engines have already indexed "awesomr-post" and if somebody follow this link he'll get 404 error. There is the same issue with bookmarked pages.
So i think the post should be accepted by two links
http://example.org/blog/awesome-post
http://example.org/permalinks/1
Now i have to specify relationships somehow. What i can do
http://example.org/permalinks/1
<!DOCTYPE html>
<html>
<head>
<link rel="canonical" href="http://example.org/blog/awesome-post">
</head>
<body>
page content
</body>
</html>
http://example.org/blog/awesome-post
<!DOCTYPE html>
<html>
<head>
<link rel="bookmark" href="http://example.org/permalinks/1">
</head>
<body>
page content
</body>
</html>
Is it right solution? And should i use the canonical or permalink URL when linking from another site pages?
One of the way is to have 301 (permanent) redirect from http://example.org/blog/awesomr-post to http://example.org/blog/awesome-post
In my page, I have this:
<meta property="og:image" content="<?php echo $picURL; ?>"/>
Which when executed is rendered like this:
<meta property="og:image" content="http://a3.sphotos.ak.fbcdn.net/hphotos-ak-ash3/556898_400257580012798_100000856787624_1059515_311974781_n.jpg"/>
But the Facebook scraper is seeing it like this:
<meta property="og:image" content="">
It seems it is not considering images from Facebook.
See my answer here but you can't have images hosted on Facebook set as your meta tags. It used to give you a clearer error message that you couldn't hotlink Facebook images.