so... Is this a safe way to use internal links on your site.. By doing this i have the index page generating the usual php content section and handing it to the div element.
THE MAIN QUESTION: Will google still index the pages using this method? Common sense tells me it does.. But just double checking and leaving this here as a base example as well if it is. As in.
EXAMPLE ONLY PEOPLE
The Server Side
if (isset($_REQUEST['page'])) {$pageID=$_REQUEST['page'];} else {$pageID="home";}
if (isset($_REQUEST['pageMode']) && $_REQUEST['pageMode']=="js") {
require "content/".$pageID.".php";
exit;
} // ELSE - REST OF WEBSITE WILL BE GENERATED USING THE page VARIABLE
The Links
<a class='btnMenu' href='?page=home'>Home Page</a>
<a class='btnMenu' href='?page=about'>About</a>
<a class='btnMenu' href='?page=Services'>Services</a>
<a class='btnMenu' href='?page=contact'>Contact</a>
The Javascript
$(function() {
$(".btnMenu").click(function(){return doNav(this);});
});
function doNav(objCaller) {
var sPage = $(objCaller).attr("href").substring(6,255);
$.get("index.php", { page: sPage, pageMode: 'js'}, function(data) {
("#siteContent").html(data).scrollTop(0);
});
return false;
}
Forgive me if there are any errors, as just copied and pasted from my script then removed a bunch of junk to simplify it as still prototyping/white boarding the project its in. So yes it does look a little nasty at the moment.
REASONS WHY:
The main reason is bandwidth and speed, This will allow other scripts to run and control the site/application a little better and yes it will need to be locked down with some coding. --
FURTHER EXAMPLE-- INSERT PHP AT TOP
<?php
// PHP CODE HERE
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div class='siteBody'>
<div class='siteHeader'>
<?php
foreach ($pageList as $key => $value) {
if ($pageID == $key) {$btnClass="btnMenuSel";} else {$btnClass="btnMenu";}
echo "<a class='$btnClass' href='?page=".$key."'>".$pageList[$key]."</a>";
}
?>
</div><div id="siteContent" style='margin-top:10px;'>
<?php require "content/".$pageID.".php"; ?>
</div><div class='siteFooter'>
</div>
</div>
</body>
</html>
No, this is not search engine friendly. You're using JavaScript to get content from the server and display it on the page. Although search engines are getting better with handling JavaScript generated content they still can't handle this (unless you follow Google's crawlable Ajax standard but sites have been moving away from that most notably Twitter this past month).
So this is bad for SEO. Plus you're not saving as much bandwidth as you think. The savings are minimal and with bandwidth being so cheap this is completely unnecessary. In fact, you spent more money making your site inaccessible by taking a normal action (page load) and made it convoluted by using JavaScript to do it then you would have saved in bandwidth costs.
Yes, this is search engine friendly and a good example of progressive enhancement. Because the links are still crawlable and load the same content as with JavaScript so Google, and any user without JavaScript enabled, can still find the content just fine. Your users with JavaScript will get the added benefit of a faster page load since they don't need to wait for the whole page to load when they click the link.
It is unclear what the SEO impact is. Google now interprets some javascript. So it is possible - but not guaranteed - that Google can still read these links. Usually people want to hide the links to pages like "About". So if Google can't read these links you may actually get an SEO advantage. That is more pagerank gets concentrated on pages you care about. Some big sites actually generate links to such pages using javascript for this reason.
Once live you can check if Google found the links by looking at links to the about us page in Webmaster tools.
i think the anchors are okay, but you should improve the server-side script as it outputs just the main content, not the whole page.
by checking $_SERVER['HTTP_X_REQUESTED_WITH'] you can distinguish between an ajax-call and a "normal" request. this is a header set automatically by jquery.
if an ajax-call is made, output the main content, otherwise output everything: the doctype, the html-tags and all the fun stuff that's between them. so everybody gets the content, even crawler and other visitors without javascript.
further info: http://davidwalsh.name/detect-ajax
example:
<?php
$pageID = isset($_POST['page'])
? $_POST['page']
: "home";
if ( !$_SERVER['HTTP_X_REQUESTED_WITH'] ) {
require('content/components/header.php');
}
require "content/" . $pageID . ".php";
if ( !$_SERVER['HTTP_X_REQUESTED_WITH'] ) {
require('content/components/footer.php');
}
?>
with content/components/header.php:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div class='siteBody'>
<div class='siteHeader'>
<?php
foreach ($pageList as $key => $value) {
if ($pageID == $key) {$btnClass="btnMenuSel";} else {$btnClass="btnMenu";}
echo "<a class='$btnClass' href='?page=".$key."'>".$pageList[$key]."</a>";
}
?>
</div>
<div id="siteContent" style='margin-top:10px;'>
and content/components/footer.php:
</div>
<div class='siteFooter'></div>
</div>
</body>
</html>
Related
I have looked a bit here, but could only find solution for wordpress or similar.
I have a rather minimal website that features two entirely different approaches for mobile and desktop users.
Ideally, I would like to serve two completely different websites to these two categories of users. Less ideally, I would settle for serving two different landing pages to the two users.
How can I achieve this? Either php, or javascript, or any other solution would do, as long as it is fully working (i.e. I can reproduce it from here without going too crazy with learning new things). The simpler the better as I am not the most skilled in web development (and that's fine, this is a minor artsy project that I'm doing for fun).
EDIT:
An attempt using jquery and the code suggested
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyPage</title>
<style type="text/css">
html,body {height:100%;width:100%;margin:0;padding:0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="mobile-container">
mobile
</div>
<div id="desktop-container">
desktop
</div>
<!-- This script switches based on the detected screen-->
<script>
$(document).ready(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
jQuery('#mobile-container').show();
}else{
jQuery('#desktop-container').show();
}
});
</script>
</body>
</html>
You should use two different container with different html according to desktop or mobile view. By default make both container display:none
Then use jquery for change the view.
jQuery(document).ready(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent) ) {
jQuery('#mobile-conatiner').show();
}else{
jQuery('#desktop-conatiner').show();
}
});
I apologize if this seems stupid or redundant, I've search and read related pages with little understanding.
I use this function to call my chat widget to each page. (In case I would like to switch chat server.)
<?PHP include "newchat.php"; ?>
I would like to refresh newchat.php at an interval of 20 minutes. (To prevent chat time out.)
I use this code on newchat.php, which results in the entire main page to refresh. (ie. index.php)
<html>
<head>
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
// -->
</script>
</head>
<body onload="JavaScript:timedRefresh(10000);">
*chat script here*
I think I may need to put script/ajax on each template page, which tells browser to refresh only that element, however I do not understand this code and am not sure if it applies.
Thank you for reading and help you may provide.
Try putting your newchat.php file into a iFrame on your pages instead of directly including it. ie:
<iframe src="newchat.php" id="chatFrame" frameborder="0" width="YOUR-WIDTH" height="YOUR-HEIGHT">
Then you can refresh from with-in the newchat.php file. Or if you want control over it from each page you can use the iframes id to control a refresh from the parent:
document.getElementById('chatFrame').contentDocument.location.reload(true);
I'm the first to admit that I'm green when it comes to PHP coding. However many years ago, a colleague gave me a pattern to use for joining PHP with HTML to create web pages. Now, I am looking to revamp the site but I want to know if there is a better way to write it? Currently, I have an index.php page which has a layout similar to this:
<?php
if (! isset($HTTP_GET_VARS['content']) || ! $HTTP_GET_VARS['content']){
$content="home";
}
else
$content=$HTTP_GET_VARS['content'];
//1
if ($content == "home"){
$page_title="Page Title";
$keywords="Keywords found in Meta";
$desc="Description found in Meta";
$style="scripts/style.css";
$popupjs="none";
$storbutnjs="none";
$retreatjs="none";
$rolloverjs="scripts/rolloverjs.js";
$readform_chkjs="none";
$logo="req-files/logo.html";
$sidebar="req-files/sidebar.html";
$main="home.html";
}
//2
if ($content == "about"){
$page_title="Page Title";
$keywords="Keywords found in Meta";
$desc="Description found in Meta";
$style="scripts/style.css";
$popupjs="none";
$storbutnjs="none";
$retreatjs="none";
$rolloverjs="none";
$readform_chkjs="none";
$logo="req-files/logo.html";
$sidebar="req-files/sidebar.html";
$main="about.html";
}
include ("req-files/head.html");
include ($logo);
include ("req-files/navbar.html");
include ($sidebar);
include ($main);
/*include ("scripts/analytics.js");*/
include ("req-files/footer.html");
?>
So, if a person typed http://yourwebsite.com/?content=about They would get the whole About page built in the browser with all required meta, header, sidebar, footer, javascript, css, analytics, etc. Each of those required parts are html files, some may have php scripts for some of the $ callouts like Page Title, Keywords, etc.
One of my problems is when my client wants to change the name of one of the '($content == " ")' to something else. First, I can change the variable, but then I have to redirect the old name to the new name so that we don't lose page ranking.
For instance, http://yourwebsite.com/?content=about needs to be redirected to http://yourwebsite.com/?content=about-us.
Eventually, the client will redirect all or most pages to be more direct, http://yourwebsite.com/about-us. It is believed that this will make the rebuild go more smoothly when the site is turned into a WordPress website.
So, is there a better way to write this? Is there a better way to redirect URLs?
Thank you...
$HTTP_GET_VARS is deprecated. Please try to learn PHP from the official docs.
To answer your problem, another commonly used system is like this:
File: include.php
<?php
function topbanner($title) { ?>
<!doctype html>
<html>
<head>
<title><?php echo $title; ?></title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<header>
Site name, Logo, etc.
<header>
<?php }
function footer() { ?>
<footer>
©2012. Your company name. Best viewed in Mozilla Firefox.
</footer>
</body>
</html>
<?php }
Now, create html pages as you would normally do, but make sure the extensions are .php. In those pages, do this.
<?php require_once('include.php'); topbanner("Title of this page"); ?>
<h3>Welcome to this site</h3>
<p>Content content content</p>
<img src="image.jpg" />
<?php footer(); ?>
This is for simple pages. If you need more complex setup, follow the style of fork-cms to redirect pages using .htacess. Either way, pages are renamed means they lose indexing. Why do pages need to be renamed often?
http://php.net/manual/de/function.file-get-contents.php
so you can include html sites in php (var)
$page = file-get-contents('myHTMLSite.html');
and
str_replace('{header}', $header, $page);
I have a small script that redirects users to main site if they come from a banner on my/other remote sites.
<?
.
..
...
....
header("location:$golink");
?>
But google analytics will not show the referrer site (where the script is working) instead it shows the url where the banner is clicked. Obviously I can not keep a track of all sites where banner appears and dont want to. I want the refferer to be the site where the script is working. How do I have to use the $_SERVER['HTTP_REFERER']; in order to do this ?
GA has a method that will let you to override the default referring URL (document.referrer) with a specified value.
So if you want to keep the redirect server-side, you can append the referring URL as a query string param in your header() call, and then look for it on the target page and specify it as the referring URL.
I don't know how you are building your $golink variable, but basically you would add something along the lines of:
$golink .= "?ref=" . $_SERVER['HTTP_REFERER'];
Use a & instead of ? if there are already URL params, and the code above assumes using ref as the URL param, so use whatever var you want.
Then on your target pages, before your _trackPageview call, you would add
_gaq.push(['_setReferrerOverride', ref]);
ref would be a javascript variable with the value of the ref=xxx query string param. For some weird reason Javascript does not have a native way to grab URL param values, nor does GA provide an (exposed) solution. If you already have a solution on your pages for grabbing URL params (like something from a framework or a function you've already made) then use that. Otherwise it's pretty easy to find a javascript function that will do it for you.
There are a couple benefits to doing it this way:
You don't have to worry about the visitor seeing an interstitial page.
You don't have to worry about GA not getting a chance to fully load before redirect
You can see the referrers tied directly to your landing pages, because with the interstitial page, you will always see that interstitial page as the referrer, and will have to look at referring url reports for the interstitial page.
Yes, G.A is blind to this kind of server-side stuff. And their PHP Api is not helpful either.
However, you could have a short redirection page, holding the GA tag inside like this :
<html>
<head>
<title>A web page that points a browser to a different page after 2 seconds</title>
<meta http-equiv="refresh" content="2; URL=<?php echo $golink; ?>">
<meta name="keywords" content="automatic redirection">
<script>var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>
</head>
<body>
If your browser doesn't automatically go there within a few seconds,
you may want to go to
the destination
manually.
</body>
</html>
Notice the $golink variable in the meta tag.
If you use this, do not forget to replace UA-XXXXX-X by your real account number.
Credits : optimized GA tag goes to Mathias Bynens
[EDIT : javascript only version]
<html>
<head>
<title>Redirecting you...</title>
<script>var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>
<script>
<!--
if (window.addEventListener)
window.addEventListener('load', function() { window.location="<?php echo $golink; ?>"; }, false);
else
window.attachEvent('onload', function() { window.location="<?php echo $golink; ?>"; });
// -->
</script>
</head>
<body>
</body>
</html>
My issue is following: My Partner's have websites and I want that partners can include a script from my server that dynamically generates a link and an image.
i.e.
myscript.php (on my server) generates following output:
<a href="http://www.myserver.com/apples.php?12345">
<img src="http://www.myserver.com/images/12345.png" />
</a>
I don't want my partners to be bothered with any php scripting, hence the best solution for now is to supply them with an iframe, where the src is the link to my script on my server that generates the output above.
However I clearly don't have any control over my partner's website and i.e. opening a lightbox out of the iframe certainly won't work.
Because of that I tried a different approach. I used Ajax to dynamically load my script, however this also doesn't work due to ajax security features (you cannot call an external script via ajax - only if you do a php workaround).
So basically, my question is: Is there any good solution to call my script on my server on the partner's website and display the generated code on my partner's website without the use of php?
Have your PHP generate JavaScript (don't forget the content-type header). Then they can include it with a <script> element.
Make a PHP file, like
<?php
$url = "http://www.myserver.com/apples.php?12345";
$img = "http://www.myserver.com/images/12345.png";
echo "document.getElementById('divthing').innerHTML = '<img src=\"" . $img . "\" /> '";
?>
Your partner's page would be like:
<html>
<body>
Hey, check this site out: <div id="divthing"></div>
<script type="text/javascript" src="http://yoursite.com/script.php"></script>
</body>
</html>
(I know, not really clean code (innerHTML etc), but you should get the idea :))
Could you make it with javascript file which replace/creates that anchor where ever you put the javascript link.
picture.js:
$('#image').ready(function(){
var image = 'http://host/url/to/image.jpg';
$('#image').load(image);
});
on you partners site:
<div id="image">
<script type="text/javascript" src="http://yourhost/picture.js"></script>
</div>
I don't know if it possible, but.. :) and this needs jQuery. And im slow.