Angular.js: Is there any disadvantage of hash in url with respect to SEO? - angularjs

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.

Related

How to modify HTMLElement in index.html before page gets returned to requestor

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...).

AngularJS application problems appearance in Google search

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.

SEO: Does Google recognize dynamically inserted text via Angular?

I've created an angular SPA that dynamically inserts text all over the place but more specifically it has a service that dynamically changes the title tag for each page. Is Google able to index this properly?
See ps101.com for it in action.
You will find some information here:
http://mono.software/2016/02/18/SEO-for-javascript-applications/
http://searchengineland.com/can-now-trust-google-crawl-ajax-sites-235267#.Vq9umCaPP-Y.twitter
#eywu from twitter did also some tests on www.jscrawlability.com.
As you can see, the site is not properly indexed on google.
I would recommend you SEO4Ajax to index reliably your website. You can test it, it's free for small sites.

Hashtag urls in mobile devices? How do they work?

Ok, probably a stupid question. But here goes... I know on regular websites a hashtag is an anchor to an element on the page, however, how does this work in mobile devices? It seems to me that mobile devices can use hashtags to slide to another section on the same page, sort of like another page.
How do urls work like that in mobile devices?? I've been to the jquerymobile.com site and noticed the webapp builder on the homepage, offers the ability to change features to slide, slideup, slidedown, fade, pop, etc. etc., however, the only URL to choose from is always "HOME" for these features. And home points to #page1, which is odd that it has a hashtag in it. How do mobile devices work with these hashtags? More importantly, how do I add the ability to slide to that hashtag, as in the way jquerymobile.com implies in the webapp builder?
I've tried doing my own research on this via google, but no luck, as mobile hashtags keeps bringing up other results, not what I am asking for here.
There's no difference between handling of the hash parts of URL in desktop vs. mobile browsers. The key point is that Javascript has access to the URL, including the hash part, and can do any programmatic thing based on the contents of the URL. So if the page author wants to slide in another section in response to changing the hash part of the URL, they can do that. People do the same thing on "desktop" sites, too.

Is there any way to handle silverlight deep linking without '#' showing in the url?

I want to have two separate interfaces to my website, one that is silverlight, and one that is normal html for people who don't have Silverlight, and for search engines. They would have exactly the same content, the Silverlight one would just be a richer experience.
If someone with Silverlight copies the URL to a certain page, it will have a '#' in it (app#page1). If they then want to link to that page on their blog or something, it will have the # in it, and a search engine probably wouldn't consider it as a separate page from app#page2.
Is there any way to make the navigation from within Silverlight update the URL with a '/' instead of a '#', without actually loading a separate page? This way the URLs in the address bar appear like a normal websites' URLs ('app/page1', 'app/page2').
Is there any way to make the navigation from within Silverlight update the URL with a '/' instead of a '#', without actually loading a separate page? This way the URLs in the address bar appear like a normal websites' URLs ('app/page1', 'app/page2').
Unfortunately, no. The reason that Silverlight navigation URLs use # is that you can move around within a page by moving to an anchor location. If you used a full URL with '/' separators, it would cause the browser to navigate to a new page, which would reload your Silverlight application. This would basically unload your Silverlight application, and load a new one with the new URL.
The reason they use the # sign is because this is interpreted by the browser as moving to a location in the page, otherwise would reload the page.
As far as search engine implications I'm not sure either way. Maybe someone more experienced with SEO can chime in on that.
However I'm sure you can get the behavior you're looking for, just may take some trickiness on your end. Another way pass information to the Silverlight client runtime is using Query String parameters. You can access query string params using the System.Windows.Browser.HtmlPage.Document.QueryString collection, you could then load the Page or User control with the content you desire based on that parameter.
As far as mimicking a folder structure using '/'s. I know there are ways to do this using custom web server settings / HTTPModules. I assume you're using IIS/ASP.Net, I would look into this from Guthrie:
http://weblogs.asp.net/scottgu/archive/2007/02/26/tip-trick-url-rewriting-with-asp-net.aspx
Takes a bit of hackery, but if you're really set on doing it I'm sure you could. You will also face the things the above poster mentioned, if you attempt to do use the same logic during a session. This may work though for just the deep linking aspect you're looking for.

Resources