I have a review box on my website that has 10 or more reviews. Since it's all text it's getting crawled and indexed. I'd rather it didn't get crawled and I've placed the google:off and google:on idea that I discovered. However that may only work for a googlebot crawl, if at all. I was thinking if the review box could link to the text in an external htm page, like you can to a css page, then that might prevent it from being crawled and still load into the space accordingly. I don't know, is this possible?? Thanks for any response.
I have found an excellent solution on my own, and would like to share it...
I created an iframe for my review box and styled it for width, height, and border in my css. Within the iframe tag I put src="reviewstext.htm". I then created this htm page and copied and pasted all my reviews. Within the head tag of the page I put...
meta name="robots" content="noindex,nofollow"
link rel="stylesheet" href="styles.css" type="text/css"
Also, for some reason the iframe tag takes on the same background color as the body of your site. In my case it was a blue colour. I wanted my iframe to have a white background instead. The css styling didn't seem to work but styling the body tag in my reviewstext.htm file did the trick... like below.
body style="background-color: transparent;"
So, I now have a reviews box that refers to an external page. Not only does the text on that external page not get crawled, but the text is not on my homepage either for crawlers to see. With this change my keyword ratios are back in line and not obscured by all the review text... :o)
Related
I have an SVG of the US states, and need anchor links to scroll to the state info on the page below. The anchors work fine on desktop and android, but not on IOS. The state changes to to hover color when clicked and does not link, and the hover color remains.
I found some suggestions to use xlink:href, but that is depreciated. I did try it to see if it worked and it did not. I have also tried some suggestions providing jquery code, but it did not work and also stopped the links from working on desktop.
The SVG is set up with hrefs wrapping each path like this:
<svg viewbox="0 0 959 593"> <a href="#ak"> <path id="AK" ...">
<title>Alaska</title></path></a>
(I've removed the long string of code for the path)
Here is the link to the page with the map. The anchor links work on desktop and android and not IOS:
https://www.automatictrap.com/pages/trappable-species
I have never posted here before, so I apologize if this is not enough info.
This has been resolved. Some of the anchor links on iPhone only seem to work when "a id" is used, and the links from the SVG only work when "a name" is used.
I'm designing an app using phonegap, and I wanted to use jquery mobile's ThemeRoller for making theme's for the different pages of the app. Anyways, my issue, first of all, is that the theme I create is not showing up on the pages. I removed the original jquery structure .css file and replaces it with the correct structure file, along with my theme .css file. Like this:
<link rel="stylesheet" href="css/themes/TestTheme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
I tried different things, like adding data-theme="a" into each of the different data-role's, but that didn't make any difference. Another thing that is confusing me however, is that when I download the .zip file, and I open up the index page to make sure the theme is being applied correctly, it doesn't have any kind of jquery structuring to it, it's just a plain white page with black text, with no input slider at all, and the buttons look like I've traveled back in time to Windows 95. Any ideas of what's happening?
I have faced a pretty strange issue. I'm trying to display pdf files using iframe. Little documents, consisting of 1-2 pages, are displayed correctly. But when it comes to documents consisting of for example 5 "heavy" pages, the iframe doesn't display the whole document - the document is cropped and as a result about 2-3 pages are displayed only.
Below is my code. As you can see it's pretty straightforward.
<html>
<head>
<title>Testing iFrames on iPad</title>
</head>
<body>
<iframe id="iframe" name="iframe" height="100%" width="100%" scrolling="no" src="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf" />
</body>
Can anyone help me to find out what is the reason for such strange behavior?
From what I understand iframe's height is what's responsible for the page cutting off, as you're actually scrolling the frame, and not the pdf inside the frame (i.e. setting height to "400%" will potentially give you the space you need, but it's sloppy).
This solution uses JavaScript to scroll the pdf contents itself, and may help:
how to properly display an iFrame in mobile safari
I've tried adjusting my meta viewport tag on a jQM beforepageshow etc it simply doesn't work and I guess that's pretty obvious why. I have one page with a highcharts chart on it and I need to have nothing inside my viewport tag which normally has width=device-width, initial-scale=1,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0
and that's because I want the app to zoom out when the chunky chart goes in, has anyone had any brilliant ideas on how to have one page with different viewport settings? I could link to it without AJAX and then output the right meta tag conditionally but I'd rather not do this.
I dynamically changed the meta viewport tag on a couple of my mobile websites when I want to enable zooming for an image or something else that requires the user looking at small text:
var $viewport = $('meta[name="viewport"]'),
default_viewport = $viewport.attr('content');
$(document).delegate('#page-id-one, #page-id-two', 'pageshow', function () {
//these are the pages that you want to enable zooming
$viewport.attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=5.0');
}).delegate('#page-id-one, #page-id-two', 'pagehide', function () {
$viewport.attr('content', default_viewport);
});
This code expects to be included after jQuery and the meta viewport tag. You can obviously change the contents of the viewport element as you see fit (I believe that Safari will allow a maximum-scale of 10).
I love the way jquery mobile renders a form, is it possible to embedded a jquery-mobile-form in a table, div or any container in my webpage?, to be clear: I have a html5 webpage anf the layout is done by divs and css, is it possible to include a jquery-mobile-form in one of the divs.
I have been tried to do that but jquery-mobile-form always takes the 100% of the page, I want to use the form in an specific high/with div container, is that possible?
Thanks!
Yes, you can adjust the size of this forms like any other div elements.
Just wrap the form in a block element and apply the css "width"-attribute on it.
I created a Fiddle for that:
adjust jQueryMobile form size fiddle