what is the best practice to do SEO in Polymer?

Peng Kim

unread,

Apr 19, 2015, 2:43:38 AM4/19/15

to polym...@googlegroups.com

My site only has one entrance index.html where is the only place has <head> <body> tags,i know <meta> tag can help to do SEO,but how to do in other pages contain custom-element?

Kevin Ashcraft

unread,

Apr 19, 2015, 10:04:10 AM4/19/15

to polym...@googlegroups.com

I use the history API to handle SEO for custom element "pages". Mozilla History API Doc

It does the following:

Updates the URL and browser history
Can fire a new analytics event
Updates the title in the browser history

Also, my favorite part is that it creates the feel of never leaving the original page since the browser never has to reload the initial data so if you're hovering over a menu item and click, the main content can change and the url and title can change, but that menu never gets reloaded so you're still hovering over the same element.

Peng Kim

unread,

Apr 21, 2015, 6:43:22 AM4/21/15

to polym...@googlegroups.com

let me look into it,how it works with your site,are there any drawbacks?

Arthur Evans

unread,

Apr 23, 2015, 6:57:59 PM4/23/15

to Peng Kim, polymer-dev

If you're doing a one-page app like this, you can replace the contents of the <title> and <meta> tags when you navigate between pages.

From our experience on polymer-project.org, this seems to work well. The Google indexer executes JavaScript. We made changes a few weeks back to correct the titles for the element reference pages, and have seen SEO for those pages increase significantly.

The other fix was to a separate URL path for each page, instead of using a hash. So:

.../elements/core-elements.html#element-name

Became:

.../elements/element-name.html

For Google, you can use Webmaster Tools to see what pages look like to the indexer. I suspect other search engines have similar tools.

I recommend anyone do this, whether you're using Polymer or not. In the case of pp.org, we found that our SEO issues were unrelated to Polymer.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/35c8ce29-5535-4935-81ab-f01c0aa230ed%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Peng Kim

unread,

Apr 24, 2015, 12:42:15 AM4/24/15

to polym...@googlegroups.com, lomoonm...@gmail.com

This is my site:www.moonmoonbird.com , i use app-router and all my pages are separate from backend ,that is using ajax-core to fetch any data and bind them,so it is not SPA,also ,my URLs are separated ,and they dispatch via app-router, but i wonder that if it can replace the contents of <title> and <meta> tags within polymer-elements or custom elements,because my data was fetched asynchronously within custom element,i am not familiar with this,can you look into my site and point out where i was doing wrong please?and write some sample codes?Thanks in advance!

Peng Kim

unread,

Apr 24, 2015, 1:14:59 AM4/24/15

to polym...@googlegroups.com, lomoonm...@gmail.com

Are javascript codes in Polymer({}) can be executed by google indexer? because my codes to change the content of <title> and <meta> tags are in Polymer({domReady:function()}{}).

On Friday, April 24, 2015 at 6:57:59 AM UTC+8, arthure wrote:

Peng Kim

unread,

Apr 24, 2015, 3:02:09 AM4/24/15

to polym...@googlegroups.com, lomoonm...@gmail.com

Here is one of my app structure:

content-page.html :

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">




  <meta itemprop="name" content="">
  <meta itemprop="description" content="">
  <meta name="description" content="">
  <title></title>


  <script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="/bower_components/polymer/polymer.html">
  <link rel="import" href="/layouts/article/content-layout.html">
  <link rel="import" href="/bower_components/app-router/src/app-router.html">
  <link rel="import" href="/bower_components/font-roboto/roboto.html">
</head>
<body unresolved>
  <app-router>
    <app-route path="/article/:category/:articlename" import="/layouts/article/content-layout.html"></app-route>
  </app-router>
</body>
</html>

content-layout.html:

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="/bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="/bower_components/core-ajax/core-ajax.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/core-media-query/core-media-query.html">
<script src="/layouts/scripts/jquery.js"></script>
<link rel="import" href="/elements/disqus-comments.html"></link>
<script type="text/javascript" src="/layouts/scripts/Markdown.Converter.js"></script>
<script type="text/javascript" src="/layouts/scripts/Markdown.Sanitizer.js"></script>
<script type="text/javascript" src="/layouts/scripts/Markdown.Editor.js"></script>
<script type="text/javascript" src="/layouts/scripts/highlight.pack.js"></script>
<polymer-element name="content-layout" attributes="articlename category">
 <template >
 <link rel="stylesheet" href="/layouts/css/markdown/github-markdown.css">

 <core-ajax id="catalogajax" auto method="GET" params='{"category":"{{category}}", "articlename":"{{articlename}}"}' headers='{"Access-Control-Allow-Origin":"*","X-Requested-With": "XMLHttpRequest"}' url="http://moonmoonbird.com/api/v1/article/content" handleAs="json" response="{{response}}"></core-ajax>
 <core-header-panel mode="waterfall-tall" tallClass="medium-tall" >
 <div class="core-header ">{{response[0].title}}</div>
 <div layout horizontal center-justified flex class="contentcontainer">
 <div flex?="{{!phoneScreen}}"></div>
 <div vertical flex four style="background:#ffffff;box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19); color: #555;">
 <div flex id="content" class="markdown-body"></div>
 <div flex><disqus-comments shortname="moonmoonbird"></disqus-comments></div>
 </div>
 <div flex?="{{!phoneScreen}}"></div>
 </div>
 </core-header-panel>
 <content></content>
 <core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
 </template>

 <script>
(function(){
 Polymer('content-layout',{
 domReady:function(){
 this.markdown = Markdown.getSanitizingConverter();

 this.metatitle = document.querySelector('title');
 this.itemproptitle = document.querySelector('meta[itemprop="name"]');
 this.metadescription = document.querySelector('meta[name="description"]');
 this.itempropdescription = document.querySelector('meta[itemprop="description"]');

 },
 responseChanged:function(){
 content = this.markdown.makeHtml(this.response[0].content);
 this.injectBoundHTML(content, this.$.content);
 this.metatitle.innerHTML = this.response[0].title;
 this.itemproptitle.content = this.response[0].title;
 this.metadescription.content = this.response[0].description;
 this.itempropdescription.content = this.response[0].description;
 },
 })
})();

 </script>


</polymer-element>

when it is done this way,i checked the devtools and inspect the dom element:

am i doing right?and in this way google and other search engine can search it and collect it?

On Friday, April 24, 2015 at 6:57:59 AM UTC+8, arthure wrote:

Arthur Evans

unread,

Apr 24, 2015, 3:33:26 PM4/24/15

to Peng Kim, polymer-dev

It looks alright to me. Are the title and description showing up in devtools the correct ones?

I'd encourage you to set your site up on Webmaster Tools so you can get a better idea of how the indexer sees it:

https://www.google.com/webmasters/tools/home

It takes a while for a site to be reindexed after you update it. You can use Webmaster Tools to notify the indexer that there are changes to your site, but there are still no guarantees how soon it'll be recrawled. (The more traffic it gets, the more often it's crawled, I think.)

The other thing you should do is just run test searches in whatever search engines you commonly use. (You can usually restrict the search to your site using site:my-site.com, which lets you see data that's indexed, but not ranked high enough to show up on a regular web search.)

I couldn't access your site at all (timed out trying to reach it), so I can't give you any direct feedback from looking at it. Note that if your site is only intermittently available, it's going to be harder to get it indexed.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/8eb55ab9-6775-4372-85b4-8ec0675a86b3%40googlegroups.com.

Peng Kim

unread,

Apr 24, 2015, 8:31:03 PM4/24/15

to polym...@googlegroups.com, lomoonm...@gmail.com

Sure, the title and description show up correct in devtools ,i just shut down my server about 9 hours ago,my bad,now ,you can access it,won't be a problem.and Thank you for your help,i will check out these tools ,seeing what i can do with them.

Peng Kim

unread,

Apr 24, 2015, 11:48:24 PM4/24/15

to polym...@googlegroups.com, lomoonm...@gmail.com

www.moonmoonbird.com please access my site ,and give me some directly feedback and advise , so i can improve it later,again ,thanks for your time!

On Saturday, April 25, 2015 at 3:33:26 AM UTC+8, arthure wrote:

Peng Kim

unread,

Apr 28, 2015, 4:46:51 AM4/28/15

to polym...@googlegroups.com, lomoonm...@gmail.com

@arthure,hi ,it's been almost two weeks,the search result on google search engine seems not work great,i built webmaster and dynamically change the <title><meta> tags as you can see,i typed my website name in google input,it showd my site at fourth page,and when i typed my article title and description into google search input,but i can't find my site even at the last page.how to improve that?

On Saturday, April 25, 2015 at 3:33:26 AM UTC+8, arthure wrote:

Arthur Evans

unread,

Apr 28, 2015, 5:03:56 PM4/28/15

to Peng Kim, polymer-dev

Hi Peng,

I'm not sure what else to suggest. I'm not an expert on SEO. From my (limited) knowledge, it looks like you're doing the right thing.

In Webmaster Tools, I'd check the HTML Improvements (under Search Appearance) and see if it suggests any improvements. Note that if your site had a problem in the past (like duplicate <title> tags), it may take a _long_ time for Webmaster Tools to decide the problem is fixed. Before we fixed this on polymer-project.org, all of the API doc pages showed up with the same title, and a number of weeks later, the number of duplicate titles reported by webmaster tools dropping _very slowly_. So it takes time, especially if your web site doesn't get a lot of traffic and/or doesn't change very often.

But definitely look through the tools and docs available on the webmaster tools site.

Good luck!

Arthur

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/e263aeb3-e9f6-492c-bc2a-e99d48fc7925%40googlegroups.com.

Peng Kim

unread,

Apr 28, 2015, 10:55:11 PM4/28/15

to polym...@googlegroups.com, lomoonm...@gmail.com

Hi,arthure

Thanks for your explanations ,maybe it just looks like waht you say

My site was just built up,not a long,so maybe it has not enough traffic or updated very often, also i didn't go further about webmaster tools.

So, I should be patient ,and most important is that i should put attention to the content of my site,to attract more people.