i'm using React & Node JS for building universal apps (). I'm also using react-helmet as library to handle page title, meta, description, etc.
But i have some trouble when loading content dynamically using ajax, google crawler cannot fetch my site correctly because content will be loaded dynamically. Any suggestion to tackle this problem?
Thank you!
I had similar situation but with backend as django, but I think which backend you use doesnt matter.
First of let me get to the basics, the google bots dont actually wait for your ajax calls to get completed. If you want to test it out register your page at google webmaster tools and try fetch as google, you will see how your page is seen by bots(mine was just empty page with loading icon), so since calls dont complete, not data and page is empty, which is bad for SEO ,as bots read text.
So what you need to do, is try server side rendering. This you can do in 2 ways either you prerender.io or create templates on backend which are loaded when the page is called for the first time, after which your single page app kicks in.
If you use prerender its paid but pre-render internally uses phantom.js which you are you can directly use. But it did not work out really well for me so I went with creating templates on the backend. So the bots or the user when come to page for first time(or first entry) the page is served from backend else front end.
Feel free to ask in case in any questions :)
Related
I am trying to wrap my head around difference of SSR vs CSR when using a framework like Vue. Wouldn't it always be CSR since you'd use Vue Router or a similar mechanism to navigate?
When I think of SSR, I think of something like Rails where the server loads up a different route and has an ERB file it loads up to show. Are there are any examples of how you would set up SSR and vue?
Vue is primarily client side framework - rendering is done by JS running in the client's browser. Your app has (usually) only one index.html. That html file contains almost NO html. It only loads tons of JS...
This brings (at least) 2 challenges:
Crawlers (Google, but also Twitter/FB etc. for sharing) do not execute JS (or if they do, there is a big "wait in queue" penalty before your site is indexed) so they do not see any content. This is problem...
When the page being loaded is non-trivial (using lots of components/components rendering huge amount of HTML/components which needs some additional data from API), the initial render can still take a considerable amount of time. This is bad user experience - page loads, user sees nothing and after some time, content appears...
To solve this problems, SSR is introduced. 1st page request is pre-rendered on the server so the client (be it crawler or user) receives something meaningful to index/see and after that, Vue takes the control and everything else happens only on the client again...
I'm thinking something like pulling in a json file and generating a page from it. I'm just wanting to know if this is a possibility in Shopify.
We're wanting to move our current site completely over to Shopify, and we're hoping we can still have much of the functionality we got from angular and node.
Yes you can do this through Application proxies.
An application proxy is a feature that fetches and displays data on a
Shopify shop page from an outside location that you, the developer,
specify. For app developers, this means that the content on these
proxy pages can be dynamic; capable of being updated as much as you
feel necessary. App developers can use application proxies to display
image galleries, statistics and custom forms, just to name a few
examples.
Basically when Shopify receives an HTTP request on a proxied path, it forwards that request to your specified URL so you can do as you wish. Even further, if you set the Content-Type: application/liquid on your response headers, Shopify will render the template for you; so you could use your very own liquid templates making this page look and behave exactly as the rest of your shop.
There's information on how to get started on the official Shopify Documentation.
I have made an angular app with rails as a backend.I have read lots of blog and articles about how to make an angulajs app crawlable.
for example - : "http://www.example.com/#!/home" Google bots will convert this url into "http://www.example.com/?_escape_fragment_=/home".
I have written logic that wherever request comes with "?_escape_fragement_=" format ,I just returns the json data in html file.
for example-:
<p>name: test</p>
<p>designation :test1</p>
so i just want to know that this much is enough for making an ajax application crawlable.if not then please suggest me the other ways to make an application crawlable.
Thanks,
You should consider creating HTML snapshots from your existing codebase rather than adding further complexity for creating pages. Google (see option 3) recommends using a headless browser to prerender your AJAX application before returning to the client.
You can also see some significant performance improvements by prerendering for all users and initialising your Angular app in its current state - especially in hybrid apps/mobile websites - this reduces XHR requests and painting in the browser. More on this here;
https://github.com/ithkuil/angular-on-server/wiki/Running-AngularJS-on-the-server-with-Node.js-and-jsdom
I was redirected here by Shopify support. I have three main questions for a project I'll be working on and wanted to see how possible some of the things would be.
We are looking to develop a plugin for use with Shopify to track purchases through the use of a link shortener (to see which link referred what purchases, etc.). I have a few questions that I'm not 100% sure on even after reading through the documentation.
The first problem that I seem to have is tracking the query string that the link shortener appends to the URL once it redirects. For this service, they use "?visit_id={hash}" and I need to be able to access this--at the very least on the "Thank You" page after an order. I saw in the docs that there is "landing_page_ref" (http://wiki.shopify.com/Order#landing_site_ref) but considering our query string is "visit_id" instead of one of the acceptable parameters, how would I be able to use that query string?
Lastly, I just have a question about how webhooks work with plugins that are on the app store. I know I can just call webhooks to wherever I want, like my personal server, but if this app gets onto the app store, I obviously don't want to hook everything to my own server. Is there a way to make it run on the store itself, and which URL should I use?
Lastly, what is the preferred method for handling configuration options for the plugin? Is there a way to hook into the admin backend or would all configuration have to be in a file within the plugin?
Thanks,
Andrew
I'll do my best to answer these for you. It sounds like you're used to building plugins for something like Wordpress - Shopify apps are a bit different.
You can't access anything on the thank you page for the order.
The thank you page/checkout process goes through a secured Shopify page that you don't have access to - so if you want information about what your URL shortener attached to the store pages, you'll need to retrieve it while they're on the page (using something like a ScriptTag + Javascript to track the query string), or hope that it's inside the Order when you retrieve it later (using the API or a webhook).
Webhooks need to talk to a server you run.
They send the information to you, and then you process it and deal with it. If you want to use webhooks, you will need to run a server with your app on it for the webhooks to talk to.
You manage your own config.
Because you're running your own server to handle those webhooks, you handle configuration for your plugin there. The apps I've worked on typically have their own database for managing configuration options, as well as an admin panel to manage them (it's what the user accesses when they click 'Log Into [Your App]' on the "Manage Apps" screen).
You'll need to run your own server to host your Shopify app.
I've no idea what it is exaclty I need, but I'll use Facebook as an example. When you load another page (for example: on the home page, you click your profile) the page itself doesn't look like it reloads.The data loads of course, and the URL changes, however the topbar and chat bar stay put.
I'm looking to do something similar to this. Is this me assuming too much and it's really a simple cache function, or is there a JavaScript way to do it, or any other?
Thanks.
It's using AJAX, which is a combination of various technologies (primarily JavaScript) to achieve this dynamic client-server interaction within the overall context of a page.
Essentially what you'd have for your setup is something like this:
A page which the user requests and is returned to the browser. This page will contain (or reference in external files, etc.) some JavaScript code to drive the interactive functionality. For example, a "link" may trigger a JavaScript function instead of navigate to another page. That function will make an AJAX call to the server.
An AJAX handler on the server. Think of it like another page, or like a web service of some kind. It expects requests to come from JavaScript code, not from humans. (Though humans can call it manually if they want, so don't return sensitive data or anything like that.) This can return data in any number of formats (JSON, XML, HTML, etc.) and the client-side JavaScript code will use that response in code.
Depending on your preferred web development technologies, there are various frameworks and tools to help with AJAX functionality. My personal favorite is just to use the AJAX methods in jQuery and to manually control the responses from the server. If you specify your development platform, I can help find some useful examples to get you started.
This is all done using AJAX. Depending on what you want, you can load entire HTML chunks, or just load the data and have the page's javascript output what's needed.