Removing # from url of angularJS for SEO with backend as Django

I know removing hash from AngularJS is pretty straightforward but the problem is that the backend is in Django.

So, the app works unless the page is refreshed using "F5".

so, http://127.0.0.1:8000/account works if the button is clicked but refreshing the page gives me Page not found as the server searches for it in urls.py file

Can someone please suggest me any fix for this ?

2 Answers

Answers 1

Everything is right. When you refresh the page, firstly request gets processed on the server (and goes to django router). So server should know that it should return your angular page for this URL.

Let's assume that your page that contains Angular application lives on view called index. Then just point this url to it:

urlpatterns = [     url(r'^account/$', index),  ] 

or point all urls to your view (in case you don't need any other url's to be processed without angular):

//something like this, not really sure about the regex urlpatterns = [     url(r'^.*$', index),  ] 

or something like

urlpatterns = [     url(r'^/account/.*$', index),  ] 

You're not alone with this issue: see this and this. So as you can see, it's not Django-specific trouble, but some general client-server workflow.

Answers 2

Use Locationprovider instead of routeProvider and enable html5 to true. https://docs.angularjs.org/api/ng/provider/$locationProvider

Read More

System.Net.HttpWebException when using IIS SEO Toolkit

When running IIS SEO toolkit on my customer's site I am getting the following error:

The link to 'https://www.my-client-website.censored/' has resulted in an error. Details: System.Net.WebException: The request was aborted: Could not create SSL/TLS secure channel.    at System.Net.HttpWebRequest.GetResponse()    at Microsoft.Web.Management.SEO.Crawler.UrlDownloader.OnGetContent(CrawlerProcessContext context) 

The site is being served by nginx and rails, and I do not find any errors in the logs. Currently, I do not know how can I troubleshot this issue or what might be its cause. Does anyone has suggestions about how should I further troubleshoot this issue?

1 Answers

Answers 1

There were two issues with my website:

One was that I was redirecting https://domain to https://www.domain The other was that the IIS SEO Toolkit does not support TLSv1.2 and my nginx was configured to only support TLSv1.2. I thus had to temporarily comment the redirect rule and add TLSv1 support with corresponding ciphers in order to crawl the website.

Read More

Wrong description for my website in www.woorank.com

I was checking my website(http://pankajservers.in) here: https://www.woorank.com/en/www/pankajservers.in to check the issues for SEO and when I opened and in the left side there is Optimize SEO link.

Upon clicking SEO, it suggests the Description is of 39 chars. where as my website http://pankajservers.in has Description more then 39 chars and also it is not matching with my website index page Title.

Can someboy please suggest why it shows wrong description in the above website? It seems like it is stored somewhere.

2 Answers

Answers 1

The SEO page will be using a particular User-Agent to call the page and read the meta description and title tags.

Using cURL (and its default User-Agent) the description tag in the <head> of your page currently starts:

<meta name="description" content="Hire ... 

The text in the content section matches what is shown on the SEO page and is 39 characters.

You can check it with something like:

curl -s "http://<URL>" | grep "<meta name=.desc" 

where URL is the address of your site, for instance on stackoverflow.com:

curl -s "http://stackoverflow.com/" | grep "<meta name=.description" 

returns:

<meta name="description" content="Stack Overflow is the largest online community for programmers to learn, share their knowledge, and advance their careers"/> 

Changing the User-Agent, in curl produces a different set of meta tags:

Answers 2

Upon clicking SEO, it suggests the Description is of 39 chars. where as my website http://pankajservers.in has Description more then 39 chars and also it is not matching with my website index page Title.

Your description is 39 characters and it is true that it does not match with the title

description and title are two different things

---

title is the window title as the page is opened in a browser. It is also supposed to be the actual "title" of the page content.

When Google displays results usually shows the title (sometimes with other contents) as the first line of each result in blue.

title is specified with the omonimous tag in the head of the page.

If your page title is this:

<title>Login - Bug Management System. Manage your open/closed/pending bugs and new/changed requirements.</title> 

---

description is normally not shown by the browser when the user visits the page.

It is meant to be a short summary of the page contents.

Very often Google displays the description of one or more pages found as results of the query.

The description is specified in the head of the page source with the omonimous meta tag.

In your page description is this:

<meta name="description" content="Hire webinfosolutions at Freelancer.com"> 

And is exactly 39 characters

Read More

React Router + AWS Backend, how to SEO

I am using React and React Router in my single page web application. Since I'm doing client side rendering, I'd like to serve all of my static files (HTML, CSS, JS) with a CDN. I'm using Amazon S3 to host the files and Amazon CloudFront as the CDN.

When the user requests /css/styles.css, the file exists so S3 serves it. When the user requests /foo/bar, this is a dynamic URL so S3 adds a hashbang: /#!/foo/bar. This will serve index.html. On my client side I remove the hashbang so my URLs are pretty.

This all works great for 100% of my users.

• All static files are served through a CDN
• A dynamic URL will be routed to /#!/{...} which serves index.html (my single page application)
• My client side removes the hashbang so the URLs are pretty again

The problem

The problem is that Google won't crawl my website. Here's why:

• Google requests /
• They see a bunch of links, e.g. to /foo/bar
• Google requests /foo/bar
• They get redirected to /#!/foo/bar (302 Found)
• They remove the hashbang and request /

Why is the hashbang being removed? My app works great for 100% of my users so why do I need to redesign it in such a way just to get Google to crawl it properly? It's 2016, just follow the hashbang...

</rant>

Am I doing something wrong? Is there a better way to get S3 to serve index.html when it doesn't recognize the path?

Setting up a node server to handle these paths isn't the correct solution because that defeats the entire purpose of having a CDN.

In this thread Michael Jackson, top contributor to React Router, says "Thankfully hashbang is no longer in widespread use." How would you change my set up to not use the hashbang?

2 Answers

Answers 1

The Hash bang is not recommended when you want to make SEO friendly website, even if its indexed in Google, the page will display only a little and thin content.

The best way to do your website is by using the latest trend and techniques which is "Progressive web enhancement" search for it on Google and you will find many articles about it.

Mainly you should do a separate link for each page, and when the user clicks on any page he will be redirected to this page using any effect you want or even if it single page website.

In this case, Google will have a unique link for each page and the user will have the fancy effect and the great UX.

EX:

<a href="http://www.example.com/contact-us" onclick="fancyEffects();">Contact Us</a> 

Answers 2

The solution you're looking for is prerender.io

This will make a crawlable SEO friendly version by pre-rendering your site and integrating it with your link structure. It's very easy to install and follow.

Installation is easy and it should work fine with React. It's free for up to 250 pages.

Read More