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.
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!
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 !
I want to add twitter card meta tags to my website. i cannot add static tags since the content attribute in the meta tag has to change dynamically.
Plz help if someone has a solution.
You can't, at least not in any way that Twitter is going to recognise.
When Twitter fetches the page, it is always going to get the meta elements that are in the HTML, never ones added with client side JavaScript.
If you are changing content dynamically then make use of the history API to update the URI, and make sure that the server will generate all the content for each URI when the URI is used as an entry point (you can still use JavaScript to generate the content when moving from another page on the site).
You can generate pages dynamically (server side) as long as you don't intend to change them after. Think about the process in the same way you would build landing pages for SEO purposes. Twitterbot is in many ways really similar to Googlebot and similar indexers.
See https://dev.twitter.com/blog/twitter-cards-tips-tricks for a few examples of sites doing this.
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.