I want to be able to use Meteor template helpers to dynamically specify the content of a <meta> tag. It seems like there is no way to do this.
If I put the <meta> tag in a free-floating <head> element (i.e. not in a template), both will be included correctly in the HTML, but I can't use template helpers.
If I move the <meta> to a template, and try to render the template within a free-floating <head> element, it complains.
And if I move the whole <head> element into a template, now I have a <head> block nested within the <body>, which is ugly, and I suspect invalid HTML (though Chrome seems to handle it gracefully).
Is there a solution?
It is not currently possible to this without post load insertion due to they way Meteor parses templates
Just to bump an old thread as this is now possible on initial page load, you can try out this package https://atmospherejs.com/pip87/initial-iron-meta not tested it outside my environment much but seems to work well. Was hacked apart from kadiras fast render to handle og tags etc getting inserted onto initial page load only so it, doesn't handle switching between pages at the moment only renders for the initial page load which was what I wanted for seo bots. Also needs iron router to work.
Data gets injected from the server side call to the route in the same way the iron routers fast-render package works
I wouldn't recommend this on its own as some bots like Google will penalise if the content isn't available so having ssr or spiderable for seo bots is defiantly advisable to offer a fully rendered page to the bot, this package was meant as more of a fallback for non ajax supporting bots and those only interested in head tags
Related
In my Angular app, my menu component html code is displayed briefly when the page is loading. Even if I hide the menu html root element with a display none css, the html is still displayed when the page start loading.
I have read a lot of thing about ng-cloak (https://docs.angularjs.org/api/ng/directive/ngCloak) but it seems Angular 4 not have ngCloak.
So I don't know how to prevent this unpleasant effect.
does Angular 4 have an equivalent directive for ng-cloak?
How can I display properly page without display unstyled html on load?
The index.html file should not contain any application specific HTML code. But just some headers and the root tag of the application. It may contain a placeholder text like "Loading" inside the root tags.
All the html code of the application should be inside the app.component.html and or other components.
#angular/cli generates an index.html "template" file that looks like this:
<!doctype html>
<html>
<head>
...
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
The browser immediately displays the "Loading..." text. After Angular was initialized, it is replaced with the actual application. To get a white page, just removed the text.
I would have gone with #HendrikBrummermann's answer: place a "Loading..." tag.
From your comment, "...which component includes the header... the unstyled html of the header is displayed", I believe you already have your answer: there is no CSS loaded that can style the HTML of the header yet.
Hendrik's answer keeps the tag to a minimum, so this effect is not apparent.
If you really need to style the header immediately, I fear that you need to use an inline style (and with no images or fonts - those won't be loaded yet either). Keep that to the bare minimum is all:
<!doctype html>
<html>
<head>
...
<style>
...
</style>
</head>
<body>
<app-root>(styled header)</app-root>
</body>
</html>
Then upon loading you can remove the placeholder.
You can also try (but it's messy and difficult to maintain) an incremental approach with two "loaders": a very, very minimal one that needs next to no CSS/images, then as soon as the fonts and other very few basic assets are onLoad'ed you can maybe replace it with a simple animation, and from there you load all the rest and activate the full Angular app.
There are also "packager" utilities that will compact most of your HTML, CSS and JS into a single minified SPA bundle; some of them (I'm sorry, I saw a couple of them used, but never used myself and can't reference them) also supply a minimal loader as described above. This might take care of some maintenance for you, and it's perhaps worth a shot. I know this because for one project a colleague of mine had to replace a Flash "Please wait" loader with a HTML5 one (it wasn't an Angular project, but I don't think it matters).
Those are things which you could give a try:
(In my opinion best solution) You can use Angular Universal, for serverside rendering. Workflow is:
User sends request to example.com
Server is not responding with pure HTML (example above), but runs Angular on the server side and render output HTML
This HTML (together with <script> tag pointing to compiled app is send to users browser
On the first look, the user sees HTML + CSS formatted by his browser. Then browser launches *.js file, and after a while replace "static page" with "single page app"
Angular can deal with all action done on "static page" (before JavaScript launch), thanks to BrowserModule.withServerTransition(); More about Universal can be read here.
You can make one step further from Universal, and serve your Angular Universal App as a Progressive Web App (PWA). More about PWA can be read here
Go one more step further, and introduce Accelerated Mobile Page (AMP), from the Google Cache. More about AMP can be read here.
You should never ever place anything more than application root node in your index.html:
<!doctype html>
<html>
<head>
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
If you really want to have something "nice" while the user is waiting for Angular, you could create some kind of loader with ie css animation:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="loader.css">
</head>
<body>
<app-root>
<div id="css-loader"></div>
</app-root>
</body>
</html>
Regarding points 1 & 2 & 3: Here you can find an example of Angular Universal & PWA & AMP combined.
I think this behaviour is inevitable. Best you can do is speed it up as much as possible. Using the lastest versions, AOT and lazy-loading helps a lot.
Alternatively you can add some css to your index.html
This is a feature, not a bug.
You can do one of twothree things:
Let UAs get information as soon as they can and assume people can tell when things are loaded fully, or
Make people wait for information, and show it to them only after it has all loaded
Some kind of absurd gray area unicorn implementation that ensures part of the page is loaded before displaying it but doesn't bother for other parts
Historically, #2 has been the most derided approach, especially as so many people want to do it. I suggest not even pursuing it.
I have a scenario in which I want to test four different versions of a page, each with different javascript content loaded in the HTML head section.
I would like switching between the templates to behave as though the page has been re-loaded, clearing the state and re-running the JS in the head and body of the HTML file.
Can I do this with four different Meteor templates?
The way I'd do this is to append the JS to the head from within the template's onRendered method, like so:
Template.templateName.onRendered(function() {
$('head').append("insert your script here");
});
So I'd keep the default head free of any of these js files, and just add them in depending on what template the user is on. You can also manipulate the user experience from within the onRendered method as well, using things like $(window).scrollTop(0) to make it appear as though the page has refreshed.
I have been handed a project that will combine CodeIgniter with AngularJS. Since i have no real world exp. with angular, I have been going through the tuts. I have noticed sporadic issues with where the html script tag that locates the angular.js file. Some of the tutorials have the script tag within the html tag and some of the tuts have the script tag down at the bottom (before the closing tag). When inserted within the head tag, it works every time. But when placed down at the bottom, my tut app has issues. Like it wont recognize the {{variable}} and do what its supposed to. Should angular work at both locations?? I was always taught that the only javascript reference that goes in the head is Respond.js and the modernizr.js. Everything else can be located at the bottom of the html page I am using the most recent stable version of angular.
Tony
You can choose the way you want, since it's a SPA => loaded once so no poor performance if in head.
If you declare angular.json the bottom part of the page, there's a good way to avoid the case
for missed interpolated variable:
You should use the ng-bind directive in your home template instead of the direct interpolation notation:
<div ng-bind="model.value"></div>
instead of {{model.value}}
You should place it just before the closing body tag. This way the JavaScript is executed after loading the html.
I want my website to become eligible for Google+ Direct Connect.
So after googling a bit I found this Google Support page, which has since been edited.
View Google Support page providing these instructions via WayBack Machine:
You can directly link your website by inserting a small snippet of
code on your website and then listing that website as your Google+
page's primary link in the About section of the profile. For example,
if your Google+ page’s primary link is set to www.pagewebsite.com,
you can create a bidrectional link by placing the following code snippet in the <head> tag of the site’s HTML:
<a href="https://plus.google.com/{+PageId}" rel="publisher" />
What gives? An anchor tag within the head?
I thought only title/meta/link tags are allowed in the head.
Is it legal to place that above snippet in the head tag?
I think there's an error in Google's documentation and this should be a <link>-tag, like this:
<link href="https://plus.google.com/{+PageId}" rel="publisher" />
You can test it on https://developers.google.com/structured-data/testing-tool/ if it works. Include the <link>-tag into your website and see what Google detects with this tool. There's a section "Publisher" where you can see if Google detects the correct information.
I'm using <link> on my sites and Google detects the correct values.
An a element inside head is of course invalid according to any HTML specification. I have no idea why Google tells you to do so, but presumably their software actually looks for such tags.
What happens in practice in browsers is that the a tag implicitly closes the head element (you can see this if you look at the document tree in Developer Tools in a browser). This isn’t as bad as it sounds, since the rest of elements meant to be in the head will still be processed normally. For example, even a title element works when placed inside body. To tell truth, the division of a document into head and body is just a formality.
The tag <a href="https://plus.google.com/{+PageId}" rel="publisher" /> will be taken as a start tag only, potentially causing naughty surprises, since the start of the document will then be inside a link (which might extend to the end of the document!). Only if the page were served with an XML content type would the tag be taken as “self-closing”. So if you have been forced into using such an element, at least write it with a real end tag;
It will still be bad for accessibility and usability, since empty links may still participate in tabbing order etc.
Using link tag is the right (and valid!) way to go in the header:
<link href="https://plus.google.com/{+PageId}" rel="publisher" />
If you stick with the verbatim anchor tag when following the instructions (Link your brand page to your website), then you'll be setting yourself up for something to blow up down the road.
We just experienced it, in fact. It seems starting with iOS 8.x, mobile Safari will see this anchor tag and move it (along with the code below it!) to the body. This broke a smart banner we had in place.
We switched to using a link tag and verified that Google still detects the correct values.
Is iframe should not be used ever?
how screen reader behaves with
iframed content?
Without iframe how we can embed any
PHP page into asp.net based site?
What are cross browser alternatives?
I don't see why using an iframe is a problem.
If you can't use it then you could either use javascript to download and insert the generated html from the php page, or you could download the html in your asp.net server-side code and insert the html in a control.
Either approach should work well, but using javascript across domains is difficult.
If you go for the asp.net server-side approach you could do the following:
First insert an control where you want to include the html from the php page
In your Page_Load event use the WebClient to download the html as a string
Remove the <html>, <head> and <body> tags so that you only have the pure html markup. You may want to add any script- and css-references to your page if they are needed.
Assign the cleaned html to the Label controls Text property.
This will work, but there are a few points to make:
First you should consider if you trust the source of the php page. If you don't then you will want to do some extra cleaning of the html before displaying it
Second, you will probably want to cache the downloaded html so that you don't have to download it for each page view.