I am setting up a simple app to save links of interesting articles. I'd like to be able to retrieve the description of the meta tag from the website of the URL or at least the first headline or text that appears in the page that is accessed when accessing that URL, to display this next to the URL:
This is the app so far:
http://ux.machinas.com/mux-feed/
Is there a way to do this in angular?
I am facing a similar problem. I am getting a cross-browser script error when trying to get page info with $http.get(), ie $http.get('http://www.stackoverflow.com').
I think the best solution is to get the page info on the server, then send to the browser, ie.
$http.get('./api/getPageInfo.php?url=www.myUrl.com/whatever').then....
this thread explains how to get page info in PHP - Get Facebook meta tags with PHP
Related
Is there any way that I can make Gatling to follow a link after page load, On click this link redirects to a new page which gives login page ?
Gatling doesn't automate web browsers.
You have to parse the network traffic in order to find where the link comes from.
Such parsing really depends on how your application works.
If HTML content is generated server side, there's an example based on css selectors in the tutorial.
If it's generated in Javascript, you probably have to parse some JSON payload, eg with a JMESPath check.
i want google bot to recognize titles and descriptions of my pages, the title and descriptions are coming from the database..
i used
document.title = $scope.dataFetchedFromDB.title;
and
document.querySelector("meta[name='description']").content = $scope.dataFetchedFromDB.description;
and it does change the title and description in the browser, but not in the snippets fetched by google or facebook or slack.... the old title and description remains.
i know about ng-meta npm package, but i dont have my pages on static route, the route is determined by the page ID (every page has its ID and its description and title)
i also read
Remember that while Google says that they use JavaScript to crawl pages, Facebook, Twitter, etc., do not. You can test Google's render of your page from the links here.
But Google takes a while to index these changes in their snippets. I would recommend creating a Google Search Console account and having it fetch-and-render the pages you want it to re-index. Even then, public results make take days or weeks to reflect your changes.
Also, it seems that the Googlebot with Javascript doesn't have a lot of patience. Try to make sure you are changing your Title and Description within mere moments of the page loading, and not at the end. In little tests, it appears that the Googlebot renderer may time-out after a few seconds, and only capture the original Title and Description.
In order to get other sites like Facebook/Twitter to render the proper metadata, you'll need to server-side render these pieces of data. Whatever appears when you say "View Source..." will be seen by these simplified crawlers. Consider updating to Angular (from AngularJS) and try server-side rendering for your metadata.
I am trying to scrape data from a public site PINNACLE page.
The page contains a div which when I fetch from Apps Script shows empty. I understand that it is because the data is loaded over ajax after page is loaded.
On checking the page, I came to know that they using AngularJS. I checked using Chrome Developer Tools but could not find the ajax URL for the same.
Could anyone help me on this. I need to fetch the data shown in table below using Google Apps Script.
Thank you all for looking into it.
I figured out the URL as shown in below image. The URL is https://www.pinnacle.com/webapi/1.17/api/v1/GuestLines/Deadball/4/487?callback=angular.callbacks._0
Based on my custom URL parameters I process, I am trying to modify dynamically a meta tag I have id'ed in index.html like so:
<meta name="og:image" content="http://example.com/someurl.jpg" id="ogImage"/>
The code below in my home.ts seems to be working
document.getElementById('ogImage').setAttribute("content", Media.ImageURL) ;
I can verify it is via the browser dev console/elements.
However, when I view from facebook via their ojbect graph debugger at
https://developers.facebook.com/tools/debug/og/object/
It appears to see the default
http://example.com/someurl.jpg
as if the index.html is shipped before my home.ts gets chance to make the update.
Perhaps, my understanding is flawed and there is better way to do this.
Thank you.
Note1: initially, I was thinking I had to make some angular binding between index.html and one of my services but I could not locate any sample code, the closest I came to was this post
How can I update meta tags in AngularJS?
But I don't know how to apply it for my ionic2/3 code, so I opted for the document.get approach.
Note2: the ultimate goal here is to share a link into a social media (web or app) like facebook, a messenger like viber/skype, etc... and have it resolve to meaningful images, title, description to drive the visit back to the site via browser, or app if the user clicking on the link is on a mobile device with my app version of the site installed on his device.
Note3: if you decide to point me to ionic deeplinking please provide code to match above, because I could not understand how to apply to my case.
If you are trying to implement dynamic open graph meta tags values in your pages, you will need a server-side scripting language like php. Such a script will run on the server, update the pages as needed, then the pages will be served to the requesting site or application.
client-side scripting (ie. JavaScript) is usually ignored when a site or app is merely visiting your site/link for the purpose of extracting (aka scrapping, parsing html) information such as the one provided by the open graph meta tags (og:title, og:description og:image...).
I have an issue with share/like button from Angular app. I finally made it working correctly with links but share/like preview if completely wrong. I tried XFBML.parse(), switching to html 5 mode, etc.
There are two complete enigmas:
1. I got "Given URL is not allowed by the Application configuration..." despite adding all possible variants to fb app setting.
When share preview appear - it has "Angular", but I never added it anywhere.
Here is the link
Would be grateful for any ideas...
Thx
The Facebook Scraper only looks at the HTML code your server delivers, it does not execute any JavaScript.
So if you want to share different articles, you need an individual URL for each article, that delivers the relevant meta data when requested from the server.
You can find some more explanation and hints on how to implement this in this article, http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app