Seo Archive

Sitecore with React and SEO

On a recent Sitecore build-out, the architecture included, among other things, a significant amount of functionality that was provided by a client-side accessed API.  We chose React to connect to and provide the UI for that API.  Since we were already using React for some things, we chose to standardize on React and use it for all of the UI.

The prevailing approach to be found around the web was to write the entire page as a single React component.  The rare article or guide that spoke of using smaller standalone components all suggested supplying the components with their data in the form of JSON.

Let’s take a look at the example of a simple, standalone component on React’s homepage:

On the last line (line 7) above, we see that the property value, subject="World", is being supplied to the component. But let’s assume that "World" is text that is managed by the CMS.  How would we get that text from the CMS to React? Popular thinking suggests outputting all the data you would need as JSON–and passed directly to React.render, inside of a script tag, much as you see on line 22 below.

The problem is, that approach doesn’t provide very good SEO value.

So how can we provide the data to our components in an SEO-friendly way? Interestingly, use one of the technologies introduced to assist search engines to improve the semantic value of the data they crawl–schema.org.

Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.

Schema.org vocabulary can be used with many different encodings, including RDFa, Microdata and JSON-LD. These vocabularies cover entities, relationships between entities and actions, and can easily be extended through a well-documented extension model.

Schema.org markup includes the concepts of itemscope, and itemprop.  We adapted this approach to provide a markup structure and attributes that would readily convert to the JSON-full-of-component-props that we need to render React components.

A simplified version of the final result:

As you can see, data-react="%ReactComponentName%" attribute-value pair identifies a markup structure as a React component.  Inside this structure, data-prop="%propertyName%" attribute-value signifies that the contents of a given html tag represent the value of that property. For instance, data-react="HelloMessage" identifies a markup structure as representing the place in the page where a HelloMessage component should render. And the markup structure also contains data-prop’s to provide the props data for the component. The first HelloMessage has data-prop="greeting" with text contents of "Hello". This is converted to { greeting: "Hello" } before being passed in when rendering the component.

Consider the following markup:

The above markup gets converted to the JavaScript object below:

As an added convenience, the React components are not rendered into some other DOM Node, as in the previous examples. Instead, quite naturally, they are rendered in-place right where they are defined in the markup, using the props defined inside the same markup.

And there we have it, Sitecore with React and SEO.

written by: Dennis Hall (Presentation Layer Architect, Technology)

Social networks overtake Google in the UK

This post &utm_content=Google+Reader)makes it clear that we need to think beyond just SEO when building web properties. If you think about it, SEO and now also integrating with Social Networks is probably the most important thing you can do for your digital property. If you are building a site that no one can find, what’s the point. I do think social will help grow you link popularity, at least tangentially. At the end of the day, link popularity is a factor in organic SEO anyway.

from http://eu.techcrunch.com/2010/06/08/report-social-networks-overtake-search-engines-in-uk-should-google-be-worried/

New social media offering

Digitage Web 2.0Image by ocean.flynn via Flickr

We just announced a new offering with our social-media partner Pluck and their product code-named AdLife. AdLife will inject social media features like customer comments and user-generated content into digital advertisements such as banner ads or micro sites - in effect, turning mainstream ads into social media opportunities distributed across the digital world.

From a technology community perspective we have worked with Pluck on several clients to bring social media features to client’s websites. Plucks services are available through software as a service which enables us to drive faster solutions for our clients. The are some key elements such as dealing with a AJAX/Flash/Silverlight integration and still enabling SEO. Unfortunately, search engines are not able to deal well with rich internet applications yet, but we have some ideas on how to deal with this.

That being said, I think there’s a couple of critical element to why we have to make our sites social.

  1. We are social beings, our sites should follow. Communities will help us make our sites better, by adding the right metadata through comments or confirming where we get it right or telling us where we get it wrong - wikipedia anyone:).

  2. Without bringing social technologies to our client’s sites, the sites we build won’t be found. Organic search engines depend on social to surface pages. Remember google bombing? That was enabled through blogging and trackbackids, a key aspect of social. If your site/page isn’t enabled socially, it won’t rank in google, live, and yahoo.

  3. Outside of organic search people read things on the web, so they can send them to their social graph. Again, we mush make it easy for people to connect with their social graph, so people can passively or actively tell their community about the content.

At Avenue A | Razorfish, we’re one of the largest buyers of online media in the world and we’re partnering with Pluck, a social media technology vendor serving 2.5 billion impressions a month to bring this to life. For more information read the press release or read David Deal’s blog.

Zemanta Pixie