SEO: Does Google recognize dynamically inserted text via Angular? - angularjs

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.

Related

What is the best way to integrate a small angular.js application into Wordpress?

I am working on adding a small one-page AngularJS application to my friend's Wordpress site. The application will take some user input and generate on-screen output using that input. It will also log the user input for analysis purposes.
I will need to be able to host the files for that page on my friend's site as well as create a back-end script that can capture the user input and store it to a MySQL database.
I have worked with WordPress sites before but have never customized them or written a plugin. How would you go about making this happen?
I will select the answer that leads me down the most efficient / effective path. Thanks!
After poking around for a while, I ran across the Advanced Custom Fields plugin. Using this helped me add custom JavaScript to the specific page that needed Angular support.
Here is information on how to use ACF to add JavaScript support:
https://www.godaddy.com/garage/3-ways-to-insert-javascript-into-wordpress-pages-or-posts/
Here is the plugin itself:
https://wordpress.org/plugins/advanced-custom-fields/

Using Angulartics, Google Tag Manager and Analytics, with dynamic codes

I'm working on an Angular (1.6.8) app in which we've implemented the Angulartics library in combination with Google Analytics and Google Tag Manager extensions. This is all working quite well when I follow the instructions that are provided.
But we seem to have a bit of a special situation, the application that we're building is going to be used by multiple people, and based on who is visiting we fetch user settings from our api (using url parameters to know who is visiting at that time).
These users can manage their settings in a different Angular app, it's in this second app that they provide us with they Tag Manager tag, and their Analytics code.
Now comes the hard part (for me at least), Google Tag Manager requires a script tag in the head of our html, but at that time the user settings have not been loaded from our api yet, so we can't provide Google's script with the correct Tag Manager tag (this format: GTM-XXXXX).
Does anyone know of a way to load these scripts correctly when we have dynamically loaded tracking codes? Or is this just not possible?
Thanks for anyone who can provide some insights.
Alright it's been a while and I've figured out a solution that does the job (a while ago), I'll display how I got there in case someone else stumbles upon my question.
It ended up being quite simple, I have the following in my html
<!-- Google Tag Manager -->
<script ng-bind-html="googleTagManagerScript"></script>
<!-- End Google Tag Manager -->
And then in my app.js I fetch the settings through an ajax call and when I have the results I do the following
$rootScope.pixels.tagmanager = value; // store the retrieved Tag Manager code in a variable
$rootScope.googleTagManagerScript = $sce.trustAsHtml("(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','"+$rootScope.pixels.tagmanager.code+"');");
$rootScope.googleTagManagerNoScript = $sce.trustAsHtml("<iframe src='https://www.googletagmanager.com/ns.html?id="+$rootScope.pixels.tagmanager.code+"' height='0' width='0' style='display:none;visibility:hidden'></iframe>");
So basically I put the entire Google script in a variable as soon as everything is available, and ng-bind-html takes care of the rest.
I hope that makes sense.

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.

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

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.

Pre Poulate a Text Field with a URL

I have a mobile simulator at http://businessmobilewebsite.com/tester/ and was wondering if there is a script or way to populate the text field so that I can send a sampole of the customer mobile website to them.
Maybe I need to change it to a php file or something.
So I would like to send them to say
http://businessmobilewebsite.com/tester/?url=http://speedie.mobi/luchetti/#
Quentin
That website uses javascript within the page to load the entered URL within their "emulator" and does support passing parameters as the web page is not a "real" web form.
If you have a specific question about the functionality of a specific website, then why not contact them http://businessmobilewebsite.com/contact/
There are alternative online mobile emulators which do support the funcitonality you require, such as:
http://iphonetester.com/?url=http%3A%2F%2Fspeedie.mobi%2Fluchetti%2F
or
http://emulator.mtld.mobi/emulator.php?webaddress=speedie.mobi/luchetti/&emulator=sonyK750

Resources