Setup
I'm using GitHub Pages to host my website statically. To generate SEO data I'm using the native head() method supported by the Nuxt framework. Here is a sample of my setup.
export default {
head() {
return meta({
title: 'Page title here',
description: "Page description here",
image: this.image, // programmatic image
})
}
}
Issue
As expected with a single page application, the metadata is being rendered into the DOM as the page is loaded. The initial data in the HTML comes from the nuxt.config.js, information designated for my homepage. This is causing an issue that when any page gets scraped they all have the same metadata.
Goal
Is it possible to render each page's metadata in their respective HTML files when running nuxt generate? This way the appropriate metadata is available when Google, Facebook, Instagram, and other platforms scrape metadata.
With some help from #kissu, the issue was caused by the fact that in my nuxt.config.js I had the Server Side Rendering turned off with the following property being st ssr: false when it should have been ssr: true. There were subsequent issues with Node JS that needed to be resolved along the way.
You need to use ssr: true if you need some SEO, otherwise it will only stay as an SPA.
target can be either server (default) or static.
Related
Is there a way in django to update the same page with the response without totally rendering it. I am trying to create a code editor to test. But when I am returning the results my contents are removed. I understand it is because I am rendering the page . I need the contents to retain. How can I do it using redirect? I am including the render statement I used and a screenshot of how it looks here:
Steps:
Handle post request
Program execution code
Save the result in a variable called "message". Then I used
return render(request, 'editor.html', {'message': message})
I want to redirect the message to the same page without rendering a new page.
[Before submission][1]
[After submission][2]
[1]: https://i.stack.imgur.com/BxoLU.png
[2]: https://i.stack.imgur.com/uiEOU.png
Any help will be appreciated. Thank you.
it is possible. using ajax in front-end and render or render_to_string in back-end(Django). using ajax you're able to call a url (with/without data you want to send), then in the views.py you can do anything needed and return render(request,'template.html, context). then in ajax you have success: function (res) { $('#id_of_element').append(res)}. this function in ajax will append the recived response which is a rendered HTML template to the target element.
For that, you have to switch to a different web software paradigm called "single page application", which implies that both, backend and frontend, are functional software components on their own, instead of having a "dumb" HTML frontend that only displays what the backend renders.
In a regular web application, the front end is served from a backend with all the information that is going to display. In a Single Page Application, the front end is served by a server independent of the backend server, and the frontend and backend interact through an API served by the backend.
With this architecture, the frontend component is responsible for requesting and providing data from and to the backend, as well as for displaying the data and getting user's interaction, and the mean for interchanging data with the backend is called an ajax, that is an asynchronous request.
The only language accepted by web browsers is javascript, but there are many frameworks and second level languages that can render a javascript application, like React, Angular, Vue, and many others.
My organization is using Ember addons to develop a set of shared components between our applications. Let's call this repository app-components. Currently the components application's primary responsibility is to distribute CSS, fonts and images.
We are also building a living styleguide that will ingest our shared components and present them in a neutral way for developers to reference. Let's call this repository app-styleguide. Our goal is to deploy app-styleguide using ember-deploy to deploy this solution to Github Pages. The url follows this pattern:
https://organization.github.io/app-styleguide/
When the app-styleguide application makes it to the gh-pages branch and is served as a webpage, all of the fonts and images being delivered by app-components are giving us a 404. I have referenced a handful of different solutions to this problem, but I keep coming across the same solutions that we have tried.
I have tried using the following two ember addons that automate the deploy to github pages:
https://github.com/poetic/ember-cli-github-pages
https://www.npmjs.com/package/ember-cli-deploy-gh-pages
In the end we went with a vanilla ember-cli-deploy solution, as those two addons are quite old...
I have followed the instructions here to add rootUrl andlocationTypeproperties to ourenvironment.js` file, which has not worked:
https://github.com/ember-cli/ember-cli/issues/398
Our environment.js file looks like this:
if (environment === 'production') {
ENV.rootURL = '/app-styleguide';
ENV.locationType = 'hash';
}
And our requests continue to not add app-styleguide to the request URL's for assets coming from the Addon. Here is an example of a failed request from the Chrome DevTools Network tab:
Request URL:https://organization.github.io/assets/images/thumbnail-icons/person.svg
Request Method:GET
Status Code:404 Not Found
As you can see, app-styleguide is not added to the request.
Any help is greatly appreciated!
I was able to receive some help over on the Ember Slack Community
(special thanks to #alexspeller). It turns out I needed to update a couple of settings in the fingerprinting of assets.
Using the included broccoli-asset-rev library I had to modify my ember-cli-build.js to include the following:
var app = new EmberApp(defaults, {
fingerprint: {
extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg', 'ttf', 'woff'],
prepend: '/app-styleguide/'
}
});
I needed to update the options to account for SVG, TTF, & WOFF, as well as the proper prepended url segment.
You can read about the functionality here:
https://ember-cli.com/asset-compilation#fingerprinting-and-cdn-urls
Available options:
https://github.com/cibernox/broccoli-asset-rev?files=1#options
Folks,
I am pretty sure I am not the first one to stumble on this problem. But somehow I am unable to find any relevant resources out there.
Here is my issue, I have a backend in Django and my front completely written in Reactjs- React Router - Redux (nice combo right).
when entering the url webhost.com/, django provides me with a page with links to a bundle that is my whole react application and different stylesheets
The problem arise when I want to refresh a page, the browser still tries to query the server even though a route exists in my react-router configuration.
I had a look at the answer here (catch-all option) React-router urls don't work when refreshing or writting manually , but I don't quite understand it and I am afraid to have a new redux state everytime Django will provide the user with a new page.
You can setup up a wildcard url pattern that will render the same view that gets rendered when a request is sent to webhost.com. I don't know if that's going to retain your store though.
I'm adapting an old JS (no framework) + Rails app as an Ember learning exercise. The idea of the application is that I'm producing a pdf from some data input. In the initial version, there was no user persistence - you could modify the data provided to you in the tables, and then download the PDF of it.
As part of this, I decided to run with a decidedly non-standard ember framework - I'm essentially using Ember Data to load the initial value of the tables. Ember has been a really natural fit for the models I have on the Rails side, and it's made a lot of the more complicated calculations a lot easier. The issue I have is that my initial idea was that when I came to download the PDF, I'd respond to the "save" action on Ember Data with binary data (with an application/pdf header), which I could then use something like FileSaver.js to serve up to the client. Then, I found that EmberData needs JSON return value.
So I base64 encoded my PDF response and fired it back..but it didn't fit the model schema. I thought I'd then do a manual AJAX save -
CalculateYourTV.RostersShowController = Ember.ObjectController.extend({
actions:{
download: function(){
var roster = this.get("model");
var team = roster.get('team');
return this.ajax('*URL GOES HERE*', record.toJSON(), "PUT").then(function(data) {
console.log('called')
console.log(data)
});
},
}
})
And this is where I'm currently stuck. Is there any way to access the URL that EmberData is posting to? I could hard-code a route in the Rails side of things, but I don't like hardcoding routes in here, and I'd like to keep it as reusable as possible (I'm planning to eventually allow data persistance).
Just open chrome dev tools (or firebug) and monitor what's going on in the network tab. You should see any ajax request your application sends out, including the EmberData's save request.
You can change the URL that a specific model will hit by creating custom Ember Data adapters per model.
For example, say you have a person model that needs to not hit the default /persons URL.
App.PersonAdapter = App.ApplicationAdapter.extend({
pathForType: 'special/custom/endpoint/for/folks'
});
That said, Ember Data may not be the best tool here for your PDF "model". You can always use Ember Data for the majority of your models, but use a quick $.ajax for other stuff that doesn't fit your definition of a true model.
You can ask the adapter to build a URL for you -
adapter = #store.adapterFor('application')
url = adapter.buildURL(type, id)
where type is the name of the model, and id is its id.
If want to look up the adapter directly in the container it is
#container.lookup('adapter:application')
I am concerned about page ranking on google with the following situation:
I am looking to convert my existing site with 150k+ unique page results to a ember app, off the route. so currently its something like domain.com/model/id - With ember and hash change - it will be /#/model/id. I really want history state but lack of IE support doesn't leave that as a option. So my Sitemap for google has lots and lots of great results using the old model/id. On the rails side I will test browser for compatibility, before either rendering the JS rich app or the plain HTML / CSS. Does anyone have good SEO suggestions with my current schema for success.
Linked below is my schema and looking at the options -
http://static.allplaces.net/images/EmberTF.pdf
History state is awesome but it looks like support is only around 60% of browsers.
http://caniuse.com/history
Thanks guys for the suggestions, the google guide is similar to what I'm going to try. I will roll it out to 1 client this month, and see what webmasters and analytics show.
here is everything you need to have your hash links be seo friendly: https://developers.google.com/webmasters/ajax-crawling/
basically You write Your whole app with hashlinks, but You have to add "!" to them, so You have #!/model/id. Next You must have all pages somewhere generated and if google asks for them, return "plain html" as described here: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
use google webmaster tools to check if Your site is crawlable.
I'm not sure if you're aware that you can configure Ember to use the browser history for the location API and keep using your pages the way they are reference now. All you need to do is configure the Route's location property
App.Router.reopen({
location: 'history'
});
See more details about specifying the location api here