├── .editorconfig
├── .gitignore
├── README.md
├── app-metadata.html
├── bower.json
├── demo
└── index.html
├── index.html
└── test
├── app-metadata.html
└── index.html
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # http://editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 | # Change these settings to your own preference
9 | indent_style = space
10 | indent_size = 2
11 |
12 | # We recommend you to keep these unchanged
13 | end_of_line = lf
14 | charset = utf-8
15 | trim_trailing_whitespace = true
16 | insert_final_newline = true
17 |
18 | [*.md]
19 | indent_size = 4
20 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://vaadin.com/directory/component/CaptainCodemanapp-metadata)
2 | [](https://vaadin.com/directory/component/CaptainCodemanapp-metadata)
3 |
4 | _[Demo and API docs](http://captaincodeman.github.io/app-metadata/)_
5 |
6 | ##<app-metadata>
7 |
8 | `app-metadata` is a singleton element used to manage page meta-data for Search Engine Optimization (SEO).
9 | It will add and remove `` elements to the page `` section based on the JSON object passed
10 | to it.
11 |
12 | In order to make use of the meta data manager, it is best to request it's availability in the app element.
13 |
14 | Example:
15 |
16 | Polymer({
17 | is: 'my-app',
18 | attached: function() {
19 | // this will create the singleton element if it has not been created yet
20 | Polymer.AppMetadata.requestAvailability();
21 | }
22 | });
23 |
24 | After the `app-metadata` has been made available, elements can update the meta by firing bubbling `app-metadata`
25 | events.
26 |
27 | Example:
28 |
29 | this.fire('app-metadata', {
30 | title: 'This is the page title',
31 | description: 'This is the page description',
32 | keywords: 'these,are,keywords'
33 | });
34 |
35 | Alternatively, create an instance of the `app-metadata` element and set it's `data` property.
36 |
37 | Example:
38 |
39 | var meta = document.createElement('app-metadata');
40 | meta.data = {
41 | title: 'This is the page title',
42 | description: 'This is the page description',
43 | keywords: 'these,are,keywords'
44 | };
45 |
46 | ##Demonstration
47 |
48 | To demonstrate this approach does work I've created a very [simple test site](http://app-metadata.appspot.com/)
49 | using the polymer-cli and added some content with the meta html headers set for each view using this `` element.
50 |
51 | Here's the meta data set for the main view:
52 |
53 | this.fire('app-metadata', {
54 | title: 'Why use Agile Project Management?',
55 | description: 'How Agile Project Management Methodologies help compared to the old Waterfall approach to Project Management',
56 | keywords: 'scrum, scrum master, agile, training, certification, professional, certified, CSM, PSM'
57 | });
58 |
59 | This view has been successfully indexed by Google and [appears correctly in the search results](https://www.google.ca/search#q=site%3Aapp-metadata.appspot.com):
60 |
61 | 
62 |
63 |
--------------------------------------------------------------------------------
/app-metadata.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
45 |
46 |
138 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "app-metadata",
3 | "version": "0.0.6",
4 | "description": "Manage page meta tags for SEO",
5 | "authors": [
6 | "Simon Green "
7 | ],
8 | "main": "app-metadata.html",
9 | "repository": {
10 | "type": "git",
11 | "url": "git://github.com/github.com/CaptainCodeman/app-metadata.git"
12 | },
13 | "homepage": "http://captaincodeman.github.io/app-metadata/",
14 | "keywords": [
15 | "polymer",
16 | "web-components",
17 | "app",
18 | "meta",
19 | "metadata",
20 | "seo"
21 | ],
22 | "dependencies": {
23 | "polymer": "Polymer/polymer#^1.4.0"
24 | },
25 | "devDependencies": {
26 | "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
27 | "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
28 | "web-component-tester": "^4.0.0",
29 | "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
30 | },
31 | "license": "MIT"
32 | }
33 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | app-metadata demo
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
16 |
17 |
18 |
19 |
20 |
Basic app-metadata Demo
21 |
22 |
23 |
24 |