I'm trying to follow the AMP guidelines suggested by Google (ampproject.org)
but as soon as I add their js script, the jQuery scroll stops working
Does anybody knows why and how to fix it?
The script tag is prohibited in AMP HTML unless:
The type is application/ld+json
It is the mandatory script tag to load the AMP runtime
It is a tag to load extended components
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags
A list of available extensions, such as amp-carousel, can be found here.
You can also use custom elements and web components according to this page.
"AMP components may have JavaScript under the hood, but it is
coordinated with other AMP components, so its composition into the
page doesn’t cause performance degradation."
The only way to include JQuery scroll is to pull it in via an AMP-IFRAME tag. But that will only give you access to it within the context of the amp-iframe so most likely that will not help you. What are you trying to accomplish with the JQuery scroll? AMP pages are meant to be simple and for displaying information very quickly. Best examples for the use of AMP pages are news sites. If you open CHROME debugger and click on the mobile view icon and then do a search for say "Trump", you'll see the carousel of AMP pages at the top. You'll notice that they are all simple news stories. Nothing to fancy.
Do you have an example of what you are trying to do that we can look at?
Related
I'm new to AMP and we only want something to happen if the current page is not an AMP page. Is there a universal property on window that we can see if it's defined in order to detect if the current view is AMP or not?
Some background: we're currently delivering a react app through a wordpress plugin and we're noticing some errors that might be from AMP pages only (even though we're not approved to run on AMP pages yet - not sure why our script is still attempting to load), so we'd like to not run our script if the current view is an AMP page.
I ended up seeing that the <html> tag tends to have an attribute amp when it's an AMP page. I'm not sure if it's always the case, but if anyone has the same question, this seems to work for my use-case:
document.getElementsByTagName('html')[0].hasAttribute('amp')
There is the "AMP" property after the initialization of the AMP page. This test is more accurate than merely checking for the amp markup.
Beware that adding any custom javascript to do such detections will invalidate the AMP page. The page may still function on its own but will not be able to exploit the AMP-cache or search engine enhancements.
Not onwindow, but the AMP spec requires the html tag to have either the ⚡ or amp attribute, that is, either <html ⚡> or <html amp>. It also requires <style amp-boilerplate> inside head. Should be easy to use JavaScript to check.
For the spec statements, see https://www.ampproject.org/docs/fundamentals/spec#required-markup
If you are using chrome browser then install below extension:
AMP Validator(https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?hl=en)
If current page is using AMP then this extension become active in browser.
I am working on vivvo template. Which is completed, now I have to integrate Accelerated Mobile Pages (AMP) in it. To reference amp js file use this
<script async src="https://cdn.ampproject.org/v0.js"></script>
but this file did't included in pages. And all reference files css and js after this line didn't loaded. I followed this link to use amp
Create Your First AMP Page
What am i missing. Please help. Thanks
Well for a start you can't use any other CSS files (inline CSS only) nor Javascript.
What do you mean "this file did't included in pages"? That piece of javascript is mandatory on an AMP page (it's what makes it an AMP page).
Also have you used the #development=1 option in Google Chrome? Append that to your URL and then reload the page with Developer tools open and look at the console to see errors.
I've blogged my own experiences creating AMP pages here: https://www.tunetheweb.com/blog/implementing-accelerated-mobile-pages/ as there were a few funnies I didn't realise until I started implementing them.
The instructions for Google Tag Manager insists installing Google Tag Manager code immediately after the opening body tag. However, this is not always possible for some websites (without a ton of modification).
Trouble is, you can install Google Tag Manager elsewhere within a page and the tags appear to fire. However, if you check the installation with Google Tag Assistant, it fires a critical issue:
"Error: tag must not be included in a <div>"
When you click on the error message, you're directed to Google's lean documentation
:
Google Tag Manager Tag should be placed immediately after the opening tag and not inside any other HTML element. The Google Tag Manager snippet must be placed directly in the page that you intend on tracking. Placing it in a hidden iframe or deploying it within another tag management system will prevent certain tags from accurately tracking the parent page.
Tags added via Google Tag Manager may not fire.
Please make sure to place the GTM snippet immediately after the opening tag.
Which sorts of tags won't fire?
Is it only for certain browsers?
Will it cause other issues?
This guideline is trying to help avoid some specific problems with using appendChild on unclosed ancestor elements in older versions of IE:
http://support.microsoft.com/kb/927917 (archive)
http://blogs.msdn.com/b/ie/archive/2008/04/23/what-happened-to-operation-aborted.aspx (archive)
You can avoid these problems by always placing your GTM snippet directly inside the body tag, not wrapped in any other elements (e.g. <div> or <td>).
For practical purposes we need to dig deeper to have the instruction easier to implement.
Firstly to differentiate between the block and the block components in the GTM Snippet
For a particular client I'm seeing their IE 6 & 7 traffic to be insignificant and dropping.
We therefore need not take those browser versions into account
Also their site is near impossible to use without JavaScript.
For other clients, their GTM container may have no tags that will function without JavaScript.
In such cases it seems quite safe to dispense with the block and implement the bootstrap code in the .
While I've done this on occasion and got desired results, I will not claim to have tested it thoroughly.
We would benefit greatly from Brian or other GTM team members providing more in depth information on this problem
I've been looking into using an iframe to sandbox some javascript for a site module. I have one core question before I start to code and test this. Could adding and then removing an iframe from a webpage prompt Google to ban a website?
I'm not even sure if this is possible but here's what I'm hoping to do in a nutshell:
All of this is necessary to ensure comparability of my module with any website. I'll load a hidden iframe on the page. The frame will handle jquery operations & ajax calls for my module. Once the iframe has loaded I hope to store a reference in the parent window to a function in the iframe. I would then like to use javascript to remove the iframe from the page, while maintaining and utilizing the function reference. I'd appreciate insight into the feasibility of this, in addition to my core question.
Thanks,
skibulk
No, google won't take action against you for dynamically creating an iframe. It's done all the time. I'm not sure whether "iframe sandboxing" works on safari though.
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.