I used this https://stackoverflow.com/a/20537386/744040 solution to define the content of the Facebook sharing window.
I can't find a similar solution for Google +.
I am working on this website http://sportnews.codeskeleton.com/ and if you go to an article page and try to G+, it'll take a wrong image as thumbnail and for the title it takes the AngularJS code : Sportnew7-24 - <% Page.title() %> (I use <% instead of {{ to avoid collision with blade ).
I tried the solution with schema.org but the google popin seems to ignore them.
Thank you
Google+ share details are populated by Google making an HTTP request to the specified URL and parsing the HTML. Since you are making a SPA site Google is just parsing the default template details without executing your JavaScript. If you want Google+ sharing details to work you will have to render the HTML with the title/image in it.
Google does have a method for telling crawlers about AJAX pages and how to crawl them but I can't speak to if the Google+ bot supports the standard.
Related
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...).
My website is a Single Page Application written with AngularJs.
I am trying to add AdSense for some pages. After submitting, my site was rejected because of the following reason: "Insufficient Content".
My question here is: were adSense crawlers able to access and view my website considering that we use escaped_frangment and phantomJs to render the pages? (This works pretty fine for google bots.)
What can I doto make my website approved by adSense?
Thanks in advance.
I've used Prerender successfully in the past. It was a bit of a pain to set up, but works very nicely.
Search engines and social networks are always trying to crawl your
pages, but they only see the javascript tags...
We render your javascript in a browser, save the static HTML, and you
return that to the crawlers!
I have a personal project which consumes my free time and effort for about a year without significant profit. I have problems with it appearance in Google and would really appreciate to get help here.
This project (http://yuppi.com.ua - similar to craiglist in US) is WEB-based AngularJS 1.2 application that uses PHP rest API hosted on GoDaddy. And in order to make this application popular it have to be very visible in internet and very searchable in Google and users have to be able to share pages via social networks or skype.
According to Google specification, google crawlers doesn't run javascript to get content of a web page before index, so I've added _escaped_fragment_ page that displays content of web page without javascript. For example:
Page: http://yuppi.com.ua/#!/items/sub/18/_
Dirty : yuppi.com.ua/?_escaped_fragment_=/items/sub/18/_
This dirty page will be redirected here where google will see content.
http://yuppi.com.ua/server/crawler_proxy/routee.php?path=/items/sub/18/
So basically I have two versions on HTML file for that page. One version is the one that available to users, which has styles, a lot more HTML tags etc. And the second is the version for Google crawler - very light-weight without any styles. And I am expecting to see clean link to my site in Google, not dirty.
So, If to search all links to a web site in Google you will see that one of the links displays it's "dirty" state.
Another problem is sharing links in Skype.
When I send a link to someone, I am expecting that this link will be transformed to thumbnail image but it is not happens. Instead I see ungly link to my web site.
Please help me to understand how to make happy everyone: users, google crawler, GoDaddy and me.
I was encountering the same problems last year with a big project and we ended to use : https://prerender.io/.
It's a prerendering system that work with a phantomjs browser to detect bot request and render a full html template. It does also instanciate a cache service to not render again a template that haven't change.
Hope it help's.
I am making a website using AngularJS, I am curious to know that is there any disadvantage of hash in url with respect to seo ?
e.g. http://www.website.com/#about-us
I'll appreciate any contribution.
Thanks
If we go back to the basics, HASH # means a DIV ID in your HTML, and to talk in more details Google ignores anything after the HASH.
Example, this page www.mydomain.com is similar to www.mydomain.com/#about-us
This is an advanced technique some marketers are using it to track their campaign without using parameters like UTMs to avoid content duplication.
To make sure your page is loading without any errors, try to disable the JS from your browsers using "Web Developer Tool" and then load your page, i think you will get a white page without content and this is the way Google and most of the search engines see your pages.
Also there is another way to test it by going to Search Console "Webmaster tool" and use fetch as Google, here you will see exactly how Google view your page.
I'm making a project on Google App Engine and in one of my jsp files, I want to search an entry in my datastore. I normally do this search by clicking on a button on this jsp page, then I make the connection to datastore in a servlet and then I send the query results to jsp back . Well, I want to query datastore without clicking this button. When I load the page, I want to see the query results on my page. When I was using EL tag lib, I could do that by just typing <% %>, now I'm using jstl tag lib. So is there any way to do ? After using jstl tags, I'm not able to use EL tags.
Well, I want to query datastore without clicking this button
Create a servlet which performs the job in doGet() method, forwards to a JSP which presents the result and just call the servlet's URL instead of the JSP's URL. It's exactly the same as you would do in a doPost() when a form was submitted, but then without the need to pass/collect request parameters.
See also:
Our Servlets wiki page - the 2nd Hello World example does exactly what you want.
Unrelated to the concrete problem, those <% %> things ("scriptlets") have definitely nothing to do with EL. EL is those ${} things.
See also:
Our JSTL wiki page
Our EL wiki page