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 !
Related
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.
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.
Working on MVC5 asp.net website.
I have a "dashboard" page that allows the user to place pre-defined "widgets" on the page. These widgets are simply MVC 5 partial pages (Razor). I really wanted each widget to be "self-contained" so all references, scripts, etc... are within the widget's cshtml file. BUT, the main "dashboard" page also needs certain references to jQuery, bootstrap, etc...
Of course, doing this, I could encounter conflicts, duplicate references (one from main page, one from widget), etc....
Question: What is the preferred method for this scenario? Should references like jQuery and bootstrap be JUST on the main "dashboard" page? What about javascript or jQuery code that is in the widget itself? Should this remain in the widget? If so, will I encounter the issue where it doesn't have jQuery defined (because it's in the parent page), etc...?
Any thoughts on this would be appreciated?
Thanks!
**** UPDATE ****
TO further clarify: If I put the scripts, references, etc (specific to the widget) at the bottom of the widget, then when the partial page is rendered on the main page, the scripts, etc.. are not rendered at the bottom of the main page. This causes my code to act funny because of the order that things are rendered. This is one reason I ask this question. Hope this makes sense. Thanks.
Put the script code and references that are global to the application , that are used everywhere and that are not specific to a widget in the most outer page.
What i would do, is i would bundle all my script references in one place and add that bundle link to the dashboard page, this makes your code cleaner and your page will have less external references thus a better client side performance.
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.
This is what I would like to do. I would like to load content dynamically.
Everything except the actual content will be rendered by javascript. I will place all the required information in a javascript variable or array at the bottom of the page. Then I will use javascript to place the content in the designated area.
These are the types of things I would like javascript to render:
Login menu
Header and logo info
Side bar info
Footer info
Dialog popups
Ads
All of the MEAT content will not be rendered by javascript. I will use the backend server to put the content in html. My logic is that more of the real content will be in HTML and all the other things will be rendered by javascript. Will this help or hurt SEO?
Yes this will hurt SEO. You want to have all your links/menus/navigation to be accessible by the SEO bots otherwise your site will not be indexed properly. What exactly is it you're trying to accomplish here? I'm sure there are plenty of ways to accomplish what you're trying to do without hurting SEO.