Seo Visualizer

Simple property editor that let's editors set Title and Meta Description while it visualize how it would look in the search result in a "Google-fasion"-style.

Created by the same team as the great Newsletter Studio-package.

Install via NuGet:

Install-Package UmbracoSeoVisualizer

NOTE! Make sure to use the right version depending on your version of Umbraco, 

• Seo Visualizer v1 is for Umbraco 7
• Seo Visualizer v8 is for Umbraco 8

Features

The property editor just shows a form with two fields

Page title
Shows a hit for the user if the title is longer than x (60 by default) chars which is not goot.

Meta description
Shows a hit for the user if the title is longer than x (160 bydefault) chars which is not goot.

How to use

Setup

If you are installing the package using NuGet you'll have to manually add a new data type in the developer section of your Umbraco backoffice. Choose the Property Editor named "Seo Visualizer".

Document Types

After that you need to add this data type to one or more of your document types so that the editors can use it, in the examples below we gave the custom property on the document type the alias "seo".

In the views

There are two ways to use the values from the property editor in the views.

@(this.Model.Content.GetPropertyValue<SeoValues>("seo").Description)

or like this

@{ var seo = this.Model.Content.GetPropertyValue<SeoValues>("seo"); }

@seo.Title

@seo.Description

The last approach would perform better as the convertion of the object will only have to be done once.