Skip to content

Latest commit

 

History

History
98 lines (66 loc) · 3.5 KB

README.md

File metadata and controls

98 lines (66 loc) · 3.5 KB
Raw

Seo Visualizer for Umbraco

Seo Visualizer is a simple property editor for Umbraco used to take seo-related user input and visualize the page in the Google search results for the editor.

Screenshot of Seo Visualizer

Installation

The esiest way to install the package is to use nuget:

dotnet add package UmbracoSeoVisualizer

Version

Features

The property editor just shows a form with two fields

  • Page title Shows a hint for the user if the title is longer than 70 chars which is not good.
  • Meta description Shows a hint for the user if the title is longer than 155 chars which is not good.
  • Title Suffix Can be configured so titles will be rendered like eg My Page | Umbraco
  • No index-toggle Can be configured to be shown next to the seo-settings.

While typing in the text boxes a preview of the Google snippet is shown in the backoffice.

How to use

Set up

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 property on the document type the alias "seo".

In the views

The recommended approach is to use Models Builder but you can also access the properties like this:

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

or like this

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

<html>
<head>
  <title>@seo.Title</title>
  <meta name="description" content="@seo.Description" />
</head>
<body>
</body>
</html>

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

Contribution

We welcome any contribution both as in reporting issues, adding translations and in writing code. If you're planing to make a Pull Request please start with an issue to let us know and to increase the chances for the PR to be merged.

Running the Project

Developers should be able to open the solution and just run any of the test-sites in the project, or use dotnet run.

Frontend

To get started with the frontend-files, open a terminal, go to the SeoVisualizer/Client and run npm install (make sure to check the required node version in .nvmrc before).

Then just build the frontend assets using npm run build or npm run watch.

Build for NuGet

1. Adjust version in Directory.Build.props

2. Run:

build\build.ps1

3. Upload to nuget

  • SeoVisualizer.Core
  • SeoVisualizer