veliovgroup / flow-router

🚦 Carefully extended flow-router for Meteor
https://packosphere.com/ostrio/flow-router-extra
BSD 3-Clause "New" or "Revised" License
202 stars 29 forks source link

What do I need to get SEO Right?? #34

Closed shizznet closed 6 years ago

shizznet commented 6 years ago

Hi, I'm following the document pretty much and so far I haven't got any problems besides the SEO issue. I'm using flow router meta to set all the Meta. Can someone please guide me what I need to do in order to get SEO working.

Here is my Route file

@dr-dimitru Can you help me with this??

FlowRouter.route('/', {
    title: 'Title is Here',
    meta: {
        url: {
            property: 'og:url',
            itemprop: 'url',
            content() {
                return document.location.href;
            }
        },
        title: {
            property: 'og:title',
            name: 'title',
            itemprop: 'title',
            content: 'Title is Here',
        },
        sitename: {
            property: 'og:site_name',
            name: 'sitename',
            itemprop: 'sitename',
            content: 'Site Name Here',
        },
        keywords: {
            name: 'keywords',
            itemprop: 'keywords',
            content: 'keywords, will, go, here',
        },
        description: {
            property: 'og:description',
            name: 'description',
            itemprop: 'description',
            property: 'og:description',
            content: 'Description here',
        },
        image: {
            property: 'og:image',
            name: 'image',
            itemprop: 'image',
            property: 'og:image',
            content: 'http://example.com/assets/images/fb.png'
        }
    },
    link: {
        canonical() {
            return document.location.href;
        },
        /*'icon': {
            rel: 'icon',
            type: 'image/png',
            href: 'http://example.com/image.png'
        }*/
    },
    action() {
        this.render('mainLayout', 'Home')
    },
    whileWaiting() {
        this.render('mainLayout', 'Spinner');
    },
    waitOn() {
        return [
            import ('../components/Home/HomeComponent.js'),
            Meteor.subscribe('getContent', Session.get('data'))
        ]
    }
})
dr-dimitru commented 6 years ago

Hello @shizznet ,

Have you installed ostrio:flow-router-meta?

shizznet commented 6 years ago

Yes I have installed flow-router-meta.

These are my packages installed for my app.

Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base@1.1.0             # Packages every Meteor app needs to have
mobile-experience@1.0.5       # Packages for a great mobile UX
mongo@1.2.2                   # The database Meteor supports right now
blaze-html-templates@1.0.4 # Compile .html files into Meteor Blaze views
reactive-var@1.0.11            # Reactive variable for tracker
tracker@1.1.3                 # Meteor's client-side reactive programming library

standard-minifier-css@1.3.5   # CSS minifier run for production mode
standard-minifier-js@2.1.2    # JS minifier run for production mode
es5-shim@4.6.15                # ECMAScript 5 compatibility for older browsers
ecmascript@0.8.3              # Enable ECMAScript2015+ syntax in app code
shell-server@0.2.4            # Server-side component of the `meteor shell` command

http
u2622:persistent-session
check
dferber:prerender
browser-policy
fourseven:scss
ostrio:flow-router-extra
ostrio:flow-router-meta
meteorhacks:picker

I tried using pretender.io by setting prerender token using settings.json. So when I cache the url in Prerender and view the raw html cached it is showing the complete page but the Facebook and twitter doesn't pickup the tags. Haven't tried google yet since it was not working with Facebook and Twitter.

It was working in my earlier setup where I used iron router and meteorhacks-ssr and kadira dochead.

For my current project flow router suited the best so I wrote my application from scratch making it like a boilerplate with reference of other boilerplates present on the internet. If you want I can share that with you and you can have a look where have I gone wrong with the SEO thing.

@dr-dimitru I hope this helps you understand my problem.

dr-dimitru commented 6 years ago

@shizznet ,

  1. Does tags appear in a browser?
  2. Are you telling to prerender when page is ready?
  3. Have you tried this Prerendering service? prerender.io may not work with some Meteor apps due to ES6/7 usage in NPM packages
dr-dimitru commented 6 years ago

Hello @shizznet ,

Any progress on this one?

dr-dimitru commented 6 years ago

Closed due to silence at issue owner end. Feel free to reopen it in case if the issue still persists on your end.