Simplifying the blogger template (stripping macros and possibly more) - javascript

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.

Related

Head problems with NextJs

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)

CSS Generic vs Page Specific loading

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!

HTML Page - same top menu (header) and footer in all HTML pages?

I am developing a static website (don't need any server-side support. I have Basic HTML and JAVAscript) which have a number of pages.
all pages have the same top menu (header) and footer.
what is the best practice considering SEO?
I have two options :
Option 1. Should I copy header.html & footr.html code on every HTML page?
Option 2. Should I include header.html & footer.html on every HTML page?
which Option is better? Does any of them affect SEO?
if Option 2 is the right solution then my follow up question is "How to include common header.html and footer.html ?" I don't want to use PHP/ iframe.
For easy client end work , I could have suggested jquery or javascript for client end rendering of header and footer, but you are looking for SEO friendly web pages.
Considering SEO you need to have rendered HTML pages with header and footer so crawlers can read it (and above solution won't work for that as it renders extra stuff after page load). So either you go for copying and pasting header footer to each page or use PHP/.NET etc for server end rendering that will handle header and footer while rendering.
How often do you change the content of the header? When I was starting with web design I used to include the whole menu with/copy paste, and then do search/replace across all files. But this was before PHP and JS were around.
Content-wise, it should be the same. There could be a difference in the number of HTTP requests and load time if you are including something from another file.
These are so small speed differences that I don't think that it will make any difference SEO-wise.
I personally like to use PHP to include content but you have said that this is not an option for you. Depending on whether you want to use jquery, pure JS, or some other way there is a bunch of different approaches.

HTML template including

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 !

Loading external content with jquery or iframe?

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.

Categories

Resources