JavaScript

用 JavaScript 输出页面代码

Apr 9th, 2009 Add Comment

为什么要用 JavaScript 输出页面代码呢? 是为了不被搜索引擎找到他们. 也就是说, 不让搜索引擎关注这些内容, 而突出你网站的其他更有价值的内容. 比如, 一个做音乐的网站肯定不希望搜索引擎收录它的存档月份, 因为没有人会通过这个来搜索进来. 这我们就可以用 JavaScript 输出这部分内容.

本人正在使用的 iNove 和我发布的最大区别是在 SEO 上, 你可以查看一下页面代码, 我的侧边栏很多内容都是 JavaScript 输出的. 因为侧边栏一般起到导航作用, 但它杂乱, 不能指明中心内容, 这就是为什么将 Google Adsense 放侧边栏经常会显示 "性病广告".

那怎么用 JavaScript 输出内容呢? 下面我们以本人侧边栏的 WP-RecentComments widget 为例说明一下:

一般输出方法:

<!-- recent comments -->
<?php if( function_exists('wp_recentcomments') ) : ?>
	<div class="widget">
		<h3>Recent Comments</h3>
		<ul>
			<?php wp_recentcomments('limit=10&length=17&post=false&smilies=true'); ?>
		</ul>
	</div>
<?php endif; ?>

JavaScript 输出方法:

<!-- recent comments -->
<?php
	// 插件被激活才进行以下操作
	if( function_exists('wp_recentcomments') ) {
 
		// 逐行粘合 HTML 代码
		$html = '<div class="widget">'
			. '<h3>Recent Comments</h3>' 
			. '<ul>';
		$html .= wp_recentcomments('limit=10&length=17&post=false&smilies=true', false);
		$html .= '</ul>' 
			. '</div>';
 
		// 转义处理
		$html = str_replace('"', '\"', $html);
		$html = str_replace("'", "\'", $html);
 
		// 将 HTML 做成 JavaScript 输出代码
		$out = '<script type="text/javascript">' . "\n" 
			. '//<![CDATA[' . "\n" // 符合 XHTML 的注释开始
			. 'document.write("' . $html . '");' . "\n" 
			. '//]]>' . "\n" // 符合 XHTML 的注释结束
			. '</script>';
 
		// 输出页面代码
		print($out);
	}
?>

代码中已经有所注释, 其实很简单. 另外, 本人强烈建议将 Recent Comments, Archives, Meta 和广告都做成 JavaScript 输出.

一些朋友应该看出来了, 其实本人的博客 SEO 程度并不高, 但一些事是非做不可的, 比如部分内容用 JavaScript 输出, 加上 nofollow 等等.

这么做有没有后遗症? 是有的. 如果某人的浏览器不支持 JavaScript, 那么他将看不到这部分内容. 所以该法可用, 好用, 但请慎用.

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 用 JavaScript 输出页面代码

32 Comments

扣剑 | May 2nd, 2011 at 15:54

@mg12
谢谢，已经弄好了。自己在折腾一下最新文章输出js。o(∩_∩)o 哈哈
mg12 | May 2nd, 2011 at 14:53

@扣剑
对, 这个函数的问题.
你将 echo $output; 改成 return $output; 就好了.
扣剑 | May 2nd, 2011 at 14:46

function news_comment(){
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 10";
$comments = $wpdb->get_results($sql);
$output = $pre_html;

foreach ($comments as $comment) {
$output .= "\n"." ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."";
}

$output .= $post_HTML;
echo $output;
}

里面的函数是这样子的，是这个函数的原因吗？
mg12 | May 2nd, 2011 at 14:42

@扣剑
你确定 news_comment 方法不是打印 (print) 到页面, 而是返回 (return) 字符串?
扣剑 | May 2nd, 2011 at 14:25

PHP 代码片段如下

<?php
// 插件被激活才进行以下操作
if( function_exists('news_comment') ) {

// 逐行粘合 HTML 代码

$html .= news_comment('limit=10&length=17&post=false&smilies=true', false);

// 转义处理
$html = str_replace('"', '\"', $html);
$html = str_replace("'", "\'", $html);

// 将 HTML 做成 JavaScript 输出代码
$out = '' . "\n"
. '//' . "\n" // 符合 XHTML 的注释结束
. '';

// 输出页面代码
print($out);
}
?><
扣剑 | May 2nd, 2011 at 14:15

用了这种方法不行，我的函数是调用functions里面自定义的函数的，难道说这样子不行，页面是直接输出html代码，不是javascript里面的。求解- -
完美生活 | May 22nd, 2009 at 11:33

好像这对google已经没效了，在google快招上也能看到你的全部页面，百度还不行。
锐风 | May 7th, 2009 at 15:48

很早前有过类似的想法, 用 JS 来输出一些不想让 Google 知道的内容这也是很河蟹的做法.
就比如 Google 打击一些诱导访问者点击 GGAD 的网站, 于是某些人就开始用 JS 来输出这些带有诱导性的文字.

哈哈, 很河蟹啊.
chui | Apr 26th, 2009 at 16:22

玩法多样化
austin | Apr 23rd, 2009 at 03:03

玩法多样化
LouisMc | Apr 19th, 2009 at 13:40

LouisMc :你好！我按照以上步骤做好了反复检查可是还是没找出原因我的导航依然不能正常显示！请教下大概是哪里出问题了呢~

发现发错地方了~ 窗口打开太多搞错了~
joel | Apr 19th, 2009 at 00:33

@LouisMc
不至于吧?页面导航用js输出? ?
LouisMc | Apr 19th, 2009 at 00:24

你好！
我按照以上步骤做好了反复检查可是还是没找出原因我的导航依然不能正常显示！请教下大概是哪里出问题了呢~
mg12 | Apr 14th, 2009 at 20:59

@一米
好建议, 不过我要统计一下.

@Leeiio
看百度快照就知道了, 它还是忽略 JS 的.
joel | Apr 13th, 2009 at 09:26

玩法多样化
Leeiio | Apr 13th, 2009 at 09:09

现在很多搜索引擎对js的支持都挺好的，百度就抓了不少我js的内容文字...我用的是针对搜索引擎判断的seo哈，碰到爬虫就不显示内容。
一米 | Apr 11th, 2009 at 17:14

呵呵，Ctrl+Enter 前两天刚加了，这样做很好，但是会加重浏览器负担的吧，如果访客机器性能不佳，不是很卡？
对了，主题新版本的时候，右上部的搜索框里可不以加入说明文字啊，比如：”关键词+Enter“，只是一个框，小白可能不会搜索的啊，毕竟也就一句代码啊。
HK | Apr 11th, 2009 at 13:21

技术员出身就是不一样呀，来这里纯学习一下
YyStr | Apr 10th, 2009 at 13:43

那个啥，不是说我吧
joel | Apr 9th, 2009 at 16:25

此文一出,谁与争锋....
mg12 | Apr 9th, 2009 at 16:18

@小棒打鼓
Congrats!

@JAY
不会吧, 您老别吓唬我.

@小三
 @xCoTt.cn 正解!

@bolo
这种处理不会导致浏览器假死的.

@welee
这个对逃避 W3C 检验没有帮助的, 只能用来骗骗爬虫.

@伍少爷
我发布主题要考虑兼容性和一般性, 所以不可能集成这些.
Ctrl+Enter 会作为选项加进去的.
伍少爷 | Apr 9th, 2009 at 15:47

那请问你在发布新版的iNove主题时，能否加入这些呢？
毕竟不是每一个人都有能力进行修改的。虽然站在你的角度上看，这个教程已经很详细了，只要按部就班就没问题，但在不自觉中，你的角度是一个优秀程序员的视角；而大多数人是看不懂你的教程的，比如我……
还有你的提交评论的方式（Ctrl+Enter）也可以加入新版本的主题中。
xCoTt.cn | Apr 9th, 2009 at 15:03

@小三
在 "外观-当前主题选项-公告栏" 里可以设置
-
我找了个插件，后来才发现主题自带了，汗 --|||
welee | Apr 9th, 2009 at 14:16

我想 Javascript 输出很适合用于输出一些不符合 W3C 规范的代码。
bolo | Apr 9th, 2009 at 13:35

页面上使用太多js容易导致浏览器假死
TryLife | Apr 9th, 2009 at 13:20

收藏了
小棒打鼓 | Apr 9th, 2009 at 10:26

@小三
外观，主题选项，这个iNove内置了
Showfom | Apr 9th, 2009 at 10:17

应该没多少人的浏览器会不支持JavaScript
muyee | Apr 9th, 2009 at 10:07

以前很想知道这个，呵呵。
小三 | Apr 9th, 2009 at 09:35

我想问下，你的首页顶部的公告牌是怎么添加文字的？我不知道在哪里添加……
JAY | Apr 9th, 2009 at 09:25

貌似不久前听说，传闻Google已经可以开始抓取JavaScript的输出了哟~
小棒打鼓 | Apr 9th, 2009 at 01:02

莫非这就是太师椅？
莫非最近mg又甩了五六个女明星？
每次给你留言都整的我紧张兮兮的，经常被Spam了。⊙﹏⊙b
做完太师椅，慢慢学习中……

Add Comment Read Article

JavaScript

用 JavaScript 输出页面代码

Blog, JavaScript, SEO