Getting seo performance in angular meteor with ngmeta
Advance SEO with Client Side Rendering. Learn basic SEO components that tie into Javascript crawability. Enjoy!
https://atmospherejs.com/mkslt04/ngmeta
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Eric Greene
Developers can build great single page WordPress sites using AngularJS and the RESTful plugin JSON API. This session will demonstrate building a single page web site with WordPress using AngularJS and the JSON API WordPress plugin. Some knowledge of AngularJS and REST services would be helpful to those who attend.
Building WordPress sites with AngularJS and the RESTful plugin JSON APIEric Greene
Developers can build great single-page WordPress sites using AngularJS and the RESTful plugin JSON API. This session will demonstrate building a single-page web site with WordPress using AngularJS and the JSON API WordPress plugin. Some knowledge of AngularJS and REST services would be helpful to those who attend.
Doing PHP, Perl, and Python development made easy with a great tool called MAMP. This session will demonstrate how to install and configure MAMP to speed up web development using the LAMP stack on a Mac and Windows. Additionally, the session will demonstrate how to use several different IDEs with MAMP to perform debugging and testing.
An overview of the WordPress ecosystem for new users that includes a discussion of wordpress.com and wordpress.org, how plugins fit in, Coder Talk DeCoded: A guide for humans and two bonus slides - questions to ask your WordPress developer and resources for more information.
Presentation on wordrpess Multisite, how and when to use them, where it gives trouble and when to avoid using the wordpress multisite.
WordCamp Kathmandu 2016
In this presentation, I'll show you how to use WordPress' REST API to unlock WordPress' hidden potential by using it as a Headless CMS and connect it to a React front-end.
React out at: https://adamrasheed.com
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Eric Greene
Developers can build great single page WordPress sites using AngularJS and the RESTful plugin JSON API. This session will demonstrate building a single page web site with WordPress using AngularJS and the JSON API WordPress plugin. Some knowledge of AngularJS and REST services would be helpful to those who attend.
Building WordPress sites with AngularJS and the RESTful plugin JSON APIEric Greene
Developers can build great single-page WordPress sites using AngularJS and the RESTful plugin JSON API. This session will demonstrate building a single-page web site with WordPress using AngularJS and the JSON API WordPress plugin. Some knowledge of AngularJS and REST services would be helpful to those who attend.
Doing PHP, Perl, and Python development made easy with a great tool called MAMP. This session will demonstrate how to install and configure MAMP to speed up web development using the LAMP stack on a Mac and Windows. Additionally, the session will demonstrate how to use several different IDEs with MAMP to perform debugging and testing.
An overview of the WordPress ecosystem for new users that includes a discussion of wordpress.com and wordpress.org, how plugins fit in, Coder Talk DeCoded: A guide for humans and two bonus slides - questions to ask your WordPress developer and resources for more information.
Presentation on wordrpess Multisite, how and when to use them, where it gives trouble and when to avoid using the wordpress multisite.
WordCamp Kathmandu 2016
In this presentation, I'll show you how to use WordPress' REST API to unlock WordPress' hidden potential by using it as a Headless CMS and connect it to a React front-end.
React out at: https://adamrasheed.com
Un breve viaje por la concepción del Desarrollo de Aplicaciones Web desde el clásico patrón de Aplicaciones Web de Servidor con renderización en servidor e interactividad limitada en cliente a la reciente era de las Single Page Applications con renderización en cliente, foco en la interactividad y desacoplamiento del backend hasta llegar a los actuales patrones híbridos de renderización en cliente y servidor en busca de la mejor performance, la mejor experiencia de usuario y el mejor SEO.
Back to the Basics - 1 - Introduction to Web DevelopmentClint LaForest
A very beginning introduction to web development. User/Developer Viewpoint Disparity, HTTP, and the relationship between server and browsers are just a few topics covered.
Presented at the virtual ICONUS 2016 conference
Many companies run a mixed IBM Notes and Microsoft Office 365 (O365) environment. SharePoint/Outlook and Domino should be viewed as a new opportunity to create rich and engaging user experiences. Using both IBM and Microsoft REST services as the core to the solution, this presentation will show how both technologies stacks can be integrated to maximize application functionality and present a seamless experience to the user.
Mark will provide lots of demonstrations including Office Web Add-Ins, how to access O365 data from your Domino applications and many others. Come and see how your core Domino webdev skills are equally applicable to the Office 365 environment.
Pros and Cons of developing a Thick Clientside AppRavi Teja
This is a presentation/talk given at BangaloreJS second meetup.
In this talk, I talked about why and when we should use rendering and templating on the client-side rather than onthe server-side to develop a web app. Then I demonstrated the DelightCircle web app, which is centered around Backbone.js using Mustache.js templating, and some unique hacks!
Copy of the slides from the Advanced Web Development Workshop presented by Ed Bachta, Charlie Moad and Robert Stein of the Indianapolis Museum of Art during the Museums and the Web 2008 conference in Montreal
Content as a Service: What to Know About Decoupled CMSPantheon
Learn:
-How decoupled architecture can help future-proof a website
-How decoupled architecture leverages a wider set of experts by clearly delineating front and back-end
-How to use modules and patterns to build decoupled websites using Drupal 7 and WordPress
-What to expect from both Drupal 8 and the upcoming WordPress JSON API
WP 101 - Local Development - Themes and PluginsJoe Querin
Learn about Local Development Enviroments and WordPress Multisite. Learn how to create a simple plugin or custom theme. Local Development tools are also covered.
MEAN Stack technology is a full-stack JavaScript solution that helps you build fast and very light weight web application. The web application made under MEAN stack is fast because the Node js which is run time environment made by C++ which is very fast as compare to other languages.
MEAN is acronym of Mongodb, Express js, Angular js, Node js. The MEAN stack technology is very easy to learn because MEAN is completely based on JavaScript which means you don't have to learn different languages for implementing this.
SEO Training Course Online, Learn SEO, SEO for Beginners, Complete SEO TutorialDeep Mehta
This is a complete training module on SEO. Learn about SEO from the basics to advanced stages using this presentation. This SEO training course will help you to keep up to speed with the most widely used digital marketing technique - Search Engine Optimization. This SEO course is published online for beginners as well as experts.
Un breve viaje por la concepción del Desarrollo de Aplicaciones Web desde el clásico patrón de Aplicaciones Web de Servidor con renderización en servidor e interactividad limitada en cliente a la reciente era de las Single Page Applications con renderización en cliente, foco en la interactividad y desacoplamiento del backend hasta llegar a los actuales patrones híbridos de renderización en cliente y servidor en busca de la mejor performance, la mejor experiencia de usuario y el mejor SEO.
Back to the Basics - 1 - Introduction to Web DevelopmentClint LaForest
A very beginning introduction to web development. User/Developer Viewpoint Disparity, HTTP, and the relationship between server and browsers are just a few topics covered.
Presented at the virtual ICONUS 2016 conference
Many companies run a mixed IBM Notes and Microsoft Office 365 (O365) environment. SharePoint/Outlook and Domino should be viewed as a new opportunity to create rich and engaging user experiences. Using both IBM and Microsoft REST services as the core to the solution, this presentation will show how both technologies stacks can be integrated to maximize application functionality and present a seamless experience to the user.
Mark will provide lots of demonstrations including Office Web Add-Ins, how to access O365 data from your Domino applications and many others. Come and see how your core Domino webdev skills are equally applicable to the Office 365 environment.
Pros and Cons of developing a Thick Clientside AppRavi Teja
This is a presentation/talk given at BangaloreJS second meetup.
In this talk, I talked about why and when we should use rendering and templating on the client-side rather than onthe server-side to develop a web app. Then I demonstrated the DelightCircle web app, which is centered around Backbone.js using Mustache.js templating, and some unique hacks!
Copy of the slides from the Advanced Web Development Workshop presented by Ed Bachta, Charlie Moad and Robert Stein of the Indianapolis Museum of Art during the Museums and the Web 2008 conference in Montreal
Content as a Service: What to Know About Decoupled CMSPantheon
Learn:
-How decoupled architecture can help future-proof a website
-How decoupled architecture leverages a wider set of experts by clearly delineating front and back-end
-How to use modules and patterns to build decoupled websites using Drupal 7 and WordPress
-What to expect from both Drupal 8 and the upcoming WordPress JSON API
WP 101 - Local Development - Themes and PluginsJoe Querin
Learn about Local Development Enviroments and WordPress Multisite. Learn how to create a simple plugin or custom theme. Local Development tools are also covered.
MEAN Stack technology is a full-stack JavaScript solution that helps you build fast and very light weight web application. The web application made under MEAN stack is fast because the Node js which is run time environment made by C++ which is very fast as compare to other languages.
MEAN is acronym of Mongodb, Express js, Angular js, Node js. The MEAN stack technology is very easy to learn because MEAN is completely based on JavaScript which means you don't have to learn different languages for implementing this.
SEO Training Course Online, Learn SEO, SEO for Beginners, Complete SEO TutorialDeep Mehta
This is a complete training module on SEO. Learn about SEO from the basics to advanced stages using this presentation. This SEO training course will help you to keep up to speed with the most widely used digital marketing technique - Search Engine Optimization. This SEO course is published online for beginners as well as experts.
SEO 101: Obstacles, Opportunities and the FutureRichDD
An SEO 101 overview with a look at some examples of present day challenges and areas of improvement. Also a look at the future of SEO and potential areas for future optimization
How to make your product/service found by Google. Technical SEO aims the crawling and indexing phase of your website. A list of top 10 technical seo topics for 2020 with a checklist you can go through, before publishing a website.
How to Optimize Your Business Website for the Holiday SeasonKabbage
During the holidays, consumer spending is at an all-time high, and you want your business to be prepared as your customers start swiping their credit cards.
Your business website is often the first calling card that potential customers look to when deciding to spend. Even if you don’t have an eCommerce website with a shopping cart, potential customers are online researching where to shop, who has the products they’re looking for, and what discounts are available.
Whether you sell online or at a brick and mortar business, you need to optimize your business website for the holidays (and beyond). This webinar will help you with the tools to do just that. Our guest speakers, Josh Steimle, CEO of MWI and Hassan Bawab, CEO & Founder of Magic Logix, will cover:
-What every small business website must include
-How to use use past holiday website data & capture new data to spot trends
-Tips on holiday digital marketing: SEO, PPC, social media & content
-How to optimize your website for increased holiday traffic
-Must-dos to prepare your business website for the mobile revolution
-Website design tips – home page design, shopping carts
SEO in a World of AI
Presentation Description (150 words max):
Author and Adjunct Professor Steve Wiideman presents a holistic masterclass on search engine optimization for the constantly changing search engine results. Learn how to prepare your website for generative AI, increase visibility in social search, and double-down on timeless SEO principles. Disciplines covered include technical SEO, content strategy and webpage optimization, off-page SEO, and optimizing for generative AI search.
Key Takeaways:
1. Have a plan to prepare for search generative experience (SGE)
2. Discover techniques to be found in TikTok, Instagram, and YouTube for Gen Z and Gen Alpha
3. Get a foundation refresher for core SEO best practices in tech, content, and off-page SEO
How to Perform a Technical SEO Audit in 2023.docxWhopping seo
In the ever-evolving landscape of digital marketing and search engine optimization (SEO), staying ahead of the curve is essential. Technical SEO, in particular, plays a critical role in ensuring that your website is not only user-friendly but also ranks well on search engines like Google. In 2023, the rules of the game have evolved, and it’s crucial to conduct a thorough technical SEO audit to keep your website in top shape. In this comprehensive guide, we’ll walk you through the steps to perform a technical SEO audit, along with frequently asked questions to clarify any doubts you might have.
How to Perform a Technical SEO Audit in 2023.pdfWhopping seo
In the ever-evolving landscape of digital marketing and search engine optimization (SEO), staying ahead of the curve is essential. Technical SEO, in particular, plays a critical role in ensuring that your website is not only user-friendly but also ranks well on search engines like Google. In 2023, the rules of the game have evolved, and it’s crucial to conduct a thorough technical SEO audit to keep your website in top shape. In this comprehensive guide, we’ll walk you through the steps to perform a technical SEO audit, along with frequently asked questions to clarify any doubts you might have.
The In-depth Guide to Website On-page OptimizationJulia Blake
This SEO guide is for small business website owners. It shares valuable tips on website optimization and outlines the most efficient marketing tactics. Find out how to optimize web content, find relevant keywords, build a website architecture, avoid duplicate content issues, fix broken links and more.
List of best 25 SEO tools to analyze website performanceEvenDigit
This presentation will help you to get the list of best 25 SEO tools which will help in improving your website performance and help in reducing your manual efforts.
A practical guide to building SEO compliant websites before you hire an SEO agency. Understand the important aspects of technical SEO & find out the right questions to ask to make your website SEO friendly.
Similar to Getting SEO performance in Angular Meteor with ngmeta (20)
Gear up for the shopping frenzy! This presentation serves as your essential guide to conquering Amazon Prime Day 2024 as a seller. We'll explore strategies to maximize your sales and visibility during this high-traffic event. Expect to learn about optimizing product listings for Prime Day searches, crafting winning deals and promotions, and preparing your fulfillment operations to handle the surge in orders. By following these insights, you'll be well-positioned to thrive during Amazon Prime Day and capitalize on this massive sales opportunity.
This presentation tackles the challenge of maintaining profitability while advertising in the competitive beauty category. ACOS (Advertising Cost of Sale) will be a central focus, with actionable strategies to keep it under control. You'll learn about effective campaign structures, budget optimization techniques, and creative tactics specifically tailored to the beauty market. By the end, you'll be equipped with valuable insights to maximize sales in the beauty category without sacrificing advertising efficiency.
In this presentation, we'll delve into the power of storytelling as an essential skill for project managers. We'll move beyond dry presentations and explore how crafting compelling narratives can significantly boost your effectiveness. You'll discover how storytelling can be used to build stronger relationships with stakeholders, simplify complex information, and create a clear vision for your project. By the end, you'll be equipped with practical tips to harness the power of storytelling and become a more influential project leader.
Creating Win-Win Situations in Business Conflict Resolution.pdfWill Haire
This presentation offers a fresh perspective on conflict resolution, guiding you towards creating "win-win" scenarios for all parties involved. Explore effective strategies for fostering open communication, identifying underlying interests, and finding creative solutions that address everyone's needs. Learn how to build stronger relationships, enhance collaboration, and achieve mutually beneficial outcomes. Equip yourself with the tools to transform conflict into an opportunity for growth and success.
9 Strategies for Reducing Amazon Shipping Costs.pdfWill Haire
This presentation dives into 9 proven strategies to reduce your Amazon fulfillment expenses. From mastering packaging to negotiating with carriers, discover how to optimize your Amazon strategy and boost your bottom line. Access practical tips and learn how to significantly reduce shipping costs and keep more profit in your pocket.
Four Keys to Improving Your CommunicationWill Haire
This presentation will unveil the "4 Keys to Improving Your Communication" – a practical roadmap to enhancing clarity, confidence and connection in every interaction. We will also explore each key and equip you with actionable strategies to communicate with purpose and achieve your desired outcomes.
Building Bridges in a Multicultural Work Environment.pdfWill Haire
This presentation dives into fostering a thriving and inclusive work environment! We'll explore strategies to bridge cultural divides, celebrate diversity, and create a space where everyone feels valued and respected. Ultimately, this leads to stronger teams, improved communication, and a more successful workplace.
The Power of Active Listening to Address Client Needs and Building Trust.pdfWill Haire
In this presentation, you'll discover the power of active listening to truly understand your clients' needs. We'll explore techniques to improve your listening skills, allowing you to build stronger relationships and foster trust with your clients. Ultimately, this will lead to a more successful and fulfilling client experience.
Amazon Seller New Product Launch Guide - 2024.pptxWill Haire
In our presentation, we'll delve into a comprehensive strategy for launching a new product on Amazon, covering essential aspects from operational readiness, through meticulous listing optimizations, to targeted advertising efforts. We'll explore best practices in inventory management and fulfillment, the art of crafting compelling product listings that convert, and how to leverage Amazon's advertising tools to amplify visibility and drive sales. This approach is designed to equip brands with the knowledge to successfully navigate Amazon's competitive landscape and achieve scalable growth.
Introduction to digital marketing and seoWill Haire
The purpose of the slide show is to introduce basic Search Engine Optimization principles as applied to small & local businesses. We will briefly define digital marketing, then go into the history, trends and current state of SEO. Participants will walk away with practical steps to take in order to improve their small business’ SEO position, and will have a basic understanding of how Search Engines work.
- What is Digital Marketing?
- What is SEO?
- How do search engines operate?
- Experiment #1: Scavenger Hunt using Advanced Search Techniques
- How do human beings use Search?
- Small Business & Search
- What does a Panda, a Penguin, a Hummingbird, & a Pigeon have in common?
- 5 Steps to Local Search Optimization
Gen Z and the marketplaces - let's translate their needsLaura Szabó
The product workshop focused on exploring the requirements of Generation Z in relation to marketplace dynamics. We delved into their specific needs, examined the specifics in their shopping preferences, and analyzed their preferred methods for accessing information and making purchases within a marketplace. Through the study of real-life cases , we tried to gain valuable insights into enhancing the marketplace experience for Generation Z.
The workshop was held on the DMA Conference in Vienna June 2024.
Instagram has become one of the most popular social media platforms, allowing people to share photos, videos, and stories with their followers. Sometimes, though, you might want to view someone's story without them knowing.
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC
Ellisha Heppner, Grant Management Lead, presented an update on APNIC Foundation to the PNG DNS Forum held from 6 to 10 May, 2024 in Port Moresby, Papua New Guinea.
Italy Agriculture Equipment Market Outlook to 2027harveenkaur52
Agriculture and Animal Care
Ken Research has an expertise in Agriculture and Animal Care sector and offer vast collection of information related to all major aspects such as Agriculture equipment, Crop Protection, Seed, Agriculture Chemical, Fertilizers, Protected Cultivators, Palm Oil, Hybrid Seed, Animal Feed additives and many more.
Our continuous study and findings in agriculture sector provide better insights to companies dealing with related product and services, government and agriculture associations, researchers and students to well understand the present and expected scenario.
Our Animal care category provides solutions on Animal Healthcare and related products and services, including, animal feed additives, vaccination
2. What Is SEO?
Stands for “Search Engine Optimization”
Why do you care?
Internet Presence Starts on Search
Internet Users Start on Search
3. Internet Search Statistics
93% on online experiences begin on a search engine
70% of links users click on are organic
70-80% of users ignore paid ads
75% of users never scroll past the first page of search results
Search is the #1 driver of traffic to content sites, beating social media by
more than 300%
4. How Do People Search?
1. Experience the need for an answer, solution, or piece of information
2. Formulate that need in a string of words known as “the query”
3. Enter query into search engine
4. Browse through the results for a match
5. Click on result
6. Scan for a solution, or a link to that solution
6. How Are Web Pages Ranked?
2 Factors:
Relevance & Popularity
7. Meta Data & Schema.org
Schema.org is an initiative launched in 2011 by all major search engines to
create and support a common set of schemas for structured data markup
on web pages.
Meta Data is a form of displaying information in HTML in between the <head>
tags on your website that provides information about a web page to aid in
the indexing and categorization for Search Engines.
8. Example of Schema Tags
<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://checkmatecreations.com/"><div
itemprop="name"><strong>Checkmate Creations</strong></div>
</a>
<div itemprop="description">Mobile App Development & Digital Media Agency</div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1253 WHITNEY AVE</span><br>
<span itemprop="addressLocality">Hamden</span><br>
<span itemprop="addressRegion">Connecticut</span><br>
<span itemprop="postalCode">06518</span><br>
<span itemprop="addressCountry">United States</span><br>
</div>
</div>
9. Example of Meta Data
<HEAD>
<title>Top Mobile App Development Agency in Connecticut</title>
<Meta http-equiv=”content-type” content=”text/html; charset=utf-8”>
<Meta name="Description" content="Checkmate is Connecticut’s leading mobile app development & marketing agency. ">
<Meta name="Keywords" content="Mobile App Development Connecticut, Digital Marketing Agency, Mobile Solutions">
<Meta name=”subject” content=”Top Mobile App Development Agency in CT”>
<Meta name=”author” content=”Checkmate Creations”>
<Meta name=”googlebot” content=”index, follow”>
<Meta http-equiv=”Content-Language” Content=”EN-US”>
<Meta name=”revisit-after Content=”7 Days”>
<Meta name=”city” content=”Hamden”>
<Meta name=”state” content=”CT”>
<Meta name=”zipcode” content=”06518”>
<Meta name=”copyright” content=”Checkmate Creations”>
</head>
<Body>
This is where the visible portion of your website is configured.
</Body>
</div>
10. PageRank & Popularity
“It turns out, people who win the Nobel Prize have citations
from 10,000 different papers. A large number of citations in
scientific literature, he said, means our work was important,
because other people thought it was worth mentioning” The
Google Story by David Vise
12. Server Rendering Vs. Client-Only Rendering
If the website owner doesn’t care about achieving top ranking, and the
only goal is to get indexed by Google and not any other search engine,
then it is ok to do Client only rendering with angular
13. Client Only Rendered HTML
Requires the following:
• Enable push state in Angular so you get pretty URLs without the hash.
• Implement UI Router or the new Component Router in Angular so you can map URLs
to pages.
• Follow all normal SEO best practices for page titles, URLs, content, etc. Nothing
changes here.
• Optimize the heck out of the initial page load—a major mistake many make is
thinking initial page load time for client-rendered apps doesn’t matter, but it does!
14. Server Rendering Performs Better For SEO
Reasons:
• Google is good at client rendering, but not perfect.
• Other search engines are really not good at it.
• Things like Facebook or Twitter link previews will not work.
• It is much easier to make server rendering fast than it is to make the
initial load for client rendering fast—and that makes a big difference.
15. Options for Server Rendering
• Implement in PHP or another language. This will work but requires that you
duplicate all pages, which is generally not feasible unless you have a
small/simple site.
• Use Prerender.io or a similar service. This works but can get expensive for
larger sites, can be tricky to set up, and you need to be OK with long page
cache times (i.e., server pages are one day old).
• Build a custom solution off the Jangular library. Although this works, it does
require a lot of heavy lifting.
• Wait for Angular 2.0 (possibly to be released end of 2015)
16. Free Tools!
• Google Structured Data Tool
• SEO Power Suite
• Screaming Frog SEO Spider
• SEMrush.com
• Moz.com
17. So What’s The Problem?
JavaScript…
It is getting better…?
SEO stands for “search engine optimization.”
Why do you care? You might not… But you should!
The way people learn, work, share, play, shop, research, socialize and interact online starts with search
Simply put organizations, causes, brands, charities, individuals - almost all other entities - need to have an internet presence of some kind.
They need search engines and search functionality within all platforms to generate exposure and facilitate engagement.
Lets look at some stats!
How people use search, and with the integration of Google’s Knowledge Graph and Vault have changed how Search Engine Results Pages (SERP) display information, but the primary principles of search remain unchanged, and conducting a search remains unchanged.
Search engines crawl the entire internet analyzing unique documents which are web pages, PDFs, or other files.
The search engine uses links to navigate the billions and billions of interconnected documents on the web.
The pages are quickly deciphered and indexed based on the information found on said web page
Relevance and popularity are determined by mathematically through algorithms to sort the information for relevancy and then rank the content in order to establish quality SERPs.
Relevance is established by the content of the page being crawled. By incorporating structured data i.e. information on your website that incorporates keywords naturally in a pages URL, Title, Anchor Text and Content in order to index a page properly. Meta Info & Schema.org as well as having a sitemap & robots.txt file markup help search engines index and navigate your web pages
Popularity is determined based on PageRank. A formula named after the founder of Google Larry Page.
Schema.org - Wouldn’t it be nice if The purpose of using the vocabulary along with the micordata, RDFa, or JSON-LD formats to mark up website content with metatdata about itself. Such markups are recognized by search engine spiders and other parsers, thus gaining access to the meaning of website. Schema data can be used for creative work, events, organization, place, person & product.
Metadata is a form of structured data and acts as a system of pairing a name with a value that helps that helps search engines categorize and index your website.
Larry Page felt the same principle could be applied to the web to find the best and most influential content. To measure how much a particular link mattered, you could look at the number of other links pointing at the page it was on. This ranking is called PageRank, named after Larry Page and not a more literal meaning
Essentially PageRank utilizes the democratic nature of the web, and uses the opinions of webmasters to determine the relative importance of a given page.
This is how Google was able to deliver more relevant and accurate search, and there are over 200 components that are used to determine popularity of a Web Page
While the above approach will work for Google indexing, you will perform better in organic search with server rendering.
In most JavaScript frontend frameworks, having dynamic meta data dependent on routes can be tricky. In most cases Google (as well as other search engines) will run an AJAX Crawl. Problem is more often than not your JavaScript updating your data will not run!
Well it is getting better...
In most JavaScript frontend frameworks, having dynamic meta data dependent on routes can be tricky. In most cases Google (as well as other search engines) will run an AJAX Crawl. Problem is more often than not your JavaScript updating your data will not run!
Well it is getting better…
Google as of October 2015 has deprecated AJAX crawls, allowing some JS to run, but you still need to make sure it is running in time. If it doesn’t run in X amount of time, it will not render.
BING does use AJAX……… (But It’s Not Google)
We work on a lovely framework called Meteor, which allows us flexibility for different front end frameworks. The ones officially supported are Angular, Blaz, as well as React.
Well, we all are aware there is a bit of shift in the community from Blaze. At some point Blaze will not be receiving first class support like Angular and React. Also there are some performance issues with Blaze, an odd lifecycle, and, well, there’s better options out there.
React, Facebook’s baby, it’s where the community at large is moving to. Galaxy is actually written with React! But that’s not why we’re here…
Angular. Well, this is Google’s baby; and if any of you are unsure as to why Angular and Meteor aren’t a dream pairing, please talk to my home boy Urigo. He’s actually not my home boy, but he’s really charming, and we constantly reference him for our projects because he pushes out to most Angular Meteor content.
If you’re interested in using Angular on your Meteor apps, visit the Angular Meteor website!
I’m not here to sell you on Angular, but I will admit it’s powerful, backed by second most valuable tech company in the world.
Angular 2 is also coming soon, it entered RC this past May. Which, fun fact, you can already start writing in Meteor! That’s right, Meteor has official support for Angular 2. MEAN IO doesn’t, and from what I last recall, Express.JS doesn’t have official Angular 2 support either (or an upgrade plan to support it). Moral of the story, Meteor IS the platform for Angular 2 developers.
We’re sticking to Angular 1.5.x though just because we have a stable platform, and 1.5 is designed for easier upgrading to 2.
NPM package
Let’s use a NPM package!
Uhm, maybe not….
Many of the packages on NPM involve special directives or binding an object with all of your meta data to the <head> of your application. However if you’ve done any Angular Meteor work you know that the <head> is not really part of the
Some NPM packages include…
angular-update-meta
angular-metas
Just some JavaScript
We want an easy way to update our meta tags for every route. I mean, you could use JQuery, pure JavaScript, or Angular’s implementation of jqLite. In every controller for every route you can write a bunch of function to manipulate the DOM. Not really reusable, I mean, arguable yes, but not efficient at all!
Angular Service
Ooooh!!!! Now we’re getting close!!!!
In Angular, a service is a function, or object, that is available for your AngularJS application from virtually anywhere.
You can use this to take that code you wrote in JS to update the <head> and have it anywhere
But… I already did this for you though.
We’re actually expediting the Angular 1 tutorial from angular-meteor.com, to get a quick Angular app, and then implement some ngmeta!!!! I invite and recommend that if you get the chance to take a tinker with it.
Also we’re only getting to Step 3, so we’re not worrying about autopublish or insecure. Keep in mind that may change this.
Meteor scans all the HTML files in your client and concatenates them together. Concatenation means merging the content of all HEAD and BODY tags found inside these HTML files together. So in our case, Meteor found our index.html file, found the HEAD and BODY tag inside and added it's content to the HEAD and BODY tag of the main generated file.
-(index.html)-
<body ng-app="socially" ng-strict-di=""> <socially></socially></body>
---
Angular 1 apps are actually individual modules. So let’s make sure we are able to have our module in our client, and then we’ll create the module.
-(main.js)-
import angular from 'angular';import angularMeteor from 'angular-meteor';import { name as Socially } from '../imports/ui/components/socially/socially';
---
Note that the Mongo.Collection has been used in a file that is outside /client or /server folders. This is because we want this file to be loaded in both client and server, and AngularJS files are loaded in the client side only. That means that this collection and the actions on it will run both on the client (minimongo) and the server (Mongo), you only have to write it once, and Meteor will take care of syncing both of them.
If you however continued the tutorial you’ll adjust how you define the collection (when you remove autopublish and insecure).
-(parties.js)-
Parties = new Mongo.Collection('parties');
---
-(socially.html)-
<parties-list></parties-list>
---
-(socially.js)-
import angular from 'angular';import angularMeteor from 'angular-meteor';import template from './socially.html';import { name as PartiesList } from '../partiesList/partiesList';class Socially {}const name = 'socially';// create a moduleexport default angular.module(name, [ angularMeteor, PartiesList]).component(name, { template, controllerAs: name, controller: Socially});
---
-(partiesList.html)-
<ul> <li ng-repeat="party in partiesList.parties"> {{party.name}} <p>{{party.description}}</p> </li></ul>
---
-(partiesList.js)-
import angular from 'angular';import angularMeteor from 'angular-meteor';import template from './partiesList.html';class PartiesList { constructor($scope, $reactive) { 'ngInject'; $reactive(this).attach($scope); this.helpers({ parties() { return Parties.find({}); } }); }}const name = 'partiesList';// create a moduleexport default angular.module(name, [ angularMeteor]).component(name, { template, controllerAs: name, controller: PartiesList});
---
-(startup.js)-
Meteor.startup(() => { if (Parties.find().count() === 0) { const parties = [{ 'name': 'Dubstep-Free Zone', 'description': 'Fast just got faster with Nexus S.' }, { 'name': 'All dubstep all the time', 'description': 'Get it on!' }, { 'name': 'Savage lounging', 'description': 'Leisure suit required. And only fiercest manners.' }]; parties.forEach((party) => { Parties.insert(party) }); }});
---
in main app module
import {ngmeta as ngmeta} from 'meteor/mkslt04:ngmeta';
attach as service
.service('ngmeta', ngmeta);
To dynamically edit this data whenever a page is loaded. Inside of your (PartiesList) constructor function pass in ngmeta as an argument. Then in the function we can call our ngmeta function ngmeta.setMetaTags(). This takes an object of the new values for the tags you want.
ngmeta.setMetaTags({
title: 'Parties List'
});