Hello how are you? My problem is the following: I have a blog made with styled components and nextjs, server side rendering.
The problem I have is, that the Head tag (next/head) that I apply in my post pages, loads after the page (so I think)
What happens is that the post title (title, og:description) does not appear when I share the link (I need SEO optimized), my assumption is that it is being applied after page rendering as when I am in browser the page title appears (but it doesn't appear when I give a view-source)
how can i solve the problem? how can i make sure that Head will be applied correctly?
I've applied a Head to _app.tsx, and I've also applied a few different Heads to other pages. This Head that is in app.tsx works correctly, but not in other pages (the way I expected)
Related
I need some advice on CSS placements for the sake of website load times
I read that it's best to have 'critical CSS' in the head and the rest can be placed in their respective page's body via the tag.
Is it good practice if I loaded all the CSS or at least the 'Generic' styles that many pages share while I kept page specific styles in a tag in the page's body?
One side question, some of my pages use jQuery, should I only load that at the bottom of those pages or leave it in the template head?
I tried both and the site loads just fine, but I know under the hood results may vary. I'm not sure how to even check. I tried websites that test a website's load performance and I got mixed results. So I'm not sure how to optimize my website's performance.
Usually all CSS files are called in the head, one thing you can do to improve performance is to modularize, let's say that you have the global styles in one file called global.css and it contains your font specs, global components used in all pages such as navbar, footer, layouts, etc... And in another file you can only put the styles regarding your specified page such as contact section that's another page called contact.css and there you can have overrides to global file and specific styles that you only use in this page.
This way you can serve less heavy files regarding the page that user's requiring.
Regarding you jQuery question I suggest that don't load jQuery library if you're not using it, it's useless. Only load it in the pages that you're using the library. Hope it helps!
Our website is hosted on blogger and is beta.planthro.org
Template code is available at
https://github.com/planthro/biblio
file name: plantho_biblio_main_template.xml
All that we need are:
Header (same for posts and pages),
body (different for posts and pages),
right-sliding-sidebar (same for posts and pages),
left-sliding-sidebar (similar to the right-sidebar; currently not implemented)
footer (same for posts and pages; footer link should open modal windows of the size of the body).
Aim is to keep a responsive template, that enforces landscape view and is optimized for 100% zoom on all landscape screen sizes.
How can I get rid of macros (macro:include) in the blogger template. If I do so, I can't make the template work.
We are looking to simplify the current template. Its 2650 lines long and has a myriad of divs and sections and specially the macros.
For example, in the last line of the code, even if I delete the completely unnecessary
<b:section-contents id='footer-2-1'/><b:section-contents id='footer-2-2'/>
I get a problem and this re-appears (macro at work I am sure, but why I don't know).
This may not be specific enough. All advice will go a long way helping us.
There are three sections you need to remove:
<macro:includable id='some_section' var='some_var'> ... </macro:includable>
<b:section-contents id='some_id'> ... </b:section-contents>
<macro:include id='some_id' name='sections'> ... </macro:include>
You need to remove all three of these macro sections in order for Blogger to allow you to save your theme HTML.
I'm having a problem with scripts in Angular 4. Let me explain: I'm building an Angular app that will be included in a greater web application. So my app is only one among other apps inside this greater web application. In my app I need to include some HTML code representing common areas of this web application. They would be the head, header, menu and footer of the app. My app would be placed in the remaining space. Thus, I retrieve these HTML codes, turn them into SafeValue by bypassing sanitizing and include them by using the innerHTML property of some divs. After that I can see these HTMLs rendered with styling and all.
So this is the context. The problem is that the scripts in these HTMLs don't run. Even though they are not removed (you can examine the page's HTML and see the scripts there), they do not run. I need them to run as they are needed to perform some important tasks such as to fill the menu with links, animate menu expansion and god knows what else.
I have already tried to include these HTMLs in the index.html using the document DOM object to replace a div I've put in index.html as a placeholder, but I've had the same problem: it renders, but the scripts don't run. Something interesting is that if I put the script tag that is not running in the index.html directly (hardcoded, not dynamically) it works.
So, the scripts would have the following form:
<script type="text/javascript" src="//some_external_source"></script>
Only a remark: I have no control over these common HTMLs that I receive. I just receive them and have to use them for the sake of visual identity of the web application.
Sorry if it has already been answered. I have been looking for an answer for days now and I still didn't found one (I did found something similar for AngularJS though), so I posted.
This is not the way angular 2 intended such problems to be solved, if you want to divide your app into separate parts like: content, header, footer you should probably take a look at named router-outlets, or transcludion.
But if you want to do this your way, then do this:
#Component({.your metadata..})
export class SomeComponent{
constructor (private domSanitizer:DomSanitizer){
this.domSanitizer.bypassSecurityTrustScript(yourScript);
}
}
My question is for learning the most efficient way of including HTML templates in multiple HTML pages. Currently I'm trying to develop a web-site which has a lot of pages. Simple things like header&footer will be the same in all the pages. I wonder how can we implement these templates to the pages efficiently where google bot will see the page with all its content including templates.
Most of the CMS did use the PHP function include(), include_once(), or their variant require() and require_once(). But there are different way for using them.
Theorically, you can nest multiple sub-page this way : a main page calling a header, content, footer. The content page being just made of some include, to get i.e. homeslider page , corp overview page ... the corp overview itself being made of multiple page for each member ... to infinite.
It's up to you to find the good nesting level to achieve your goals, while staying simple.
In most classic cases, you can just set your page content (home,corp overview, team, contact) and include_once the header on top, the footer on bottom.
About Google bot, as users, it won't see the sub-page you are including this way, so there is little chance for your lone footer to be referenced.
To be sure, use robots.txt !
Hiho,
There's an existing website that i need to include into another site which goes like this:
a.mysite.com
and i need to fetch content from this site in my
www.mysite.com
website...
As i need to access the content of the iframe the Same origin policy produces a problem here.
What i did was to configure mod_proxy on Apache to proxy pass all requests from
www.mysite.com/a
to
a.mysite.com
This will work fine...but my problem is that im not sure what the best way would be to include those pages.
1. Idea
As the content of the iframe is a full featured site with a top navigation...left navigation etc....i would need to change the page template to only show the content box to be able to integrate that page in the iframe.
2. Idea
I could just load the DIV where the content lies through JQuery.load() and integrate it into my site.
What is the best way to accomplish such a task? How bad is both ideas from the SEO point of view?
Unless it involves significant rework, the best solution is to combine the two into a single HTML page on the server side (using server-side includes).
Advantages:
No problems with SEO as it's delivered as a single page. Content in iFrames and content loaded via AJAX (with an associated link in the HTML) are traversed, but only the link, not the content itself is associated with the main page. See: http://www.straightupsearch.com/search-marketing/best-practices/seo_iframes_a_g/
Faster page load - either of your suggestions will cause the main page to be loaded first before the other content is loaded.
No reliance on Javascript - your second method will fail completely if javascript is not supported / turned on.
Include all JS and CSS only once - your first method will require these to be duplicated in the <head> of each page. This is more of a long term advantage if you wish to achieve full integration of site "a". However, it can be a disadvantage initially, see below.
Disadvantage:
May cause conflicts with scripts and CSS between the two pages. However, this same problem exists with your second method.
If you must choose between either of the two options you proposed, I would not select the second as others have suggested. Significant amounts of static content should never be loaded via Ajax, and in this scenario gives you no additional benefits. At least iFrames guarantee no JS and CSS conflicts.
Use the 2nd approach (jQuery.load) and if you're working with HTML5, for browsers that support the History API you can change the URL to whatever the content is for that div.
Check out https://github.com/blog/760-the-tree-slider for an example of how github did it for their tree slider.
EDIT:
I am not sure how using an iFrame whose src points to your own domain affects search rankings but at best it's a grey area. I would assume that possibly some pagerank would trickle from the parent to the child but I have no clue how it would work for instance if a blogger linked to your page with the iframe that pointed to another page. This would be a pretty good question to ask at the Webmaster Help Forum
Always say no to iframes. jQuery+Ajax all the way.