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.
The esiest way to install the package is to use nuget:
dotnet add package UmbracoSeoVisualizer
- Version 14 for Umbraco 14
- Version 13 for Umbraco 13
- Version 12 for Umbraco 12
- Version 11 for Umbraco 11
- Version 10 for Umbraco 10
- Version 9 for Umbraco 9
- Version 8 for Umbraco 8
- Version 1 for Umbraco 7
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.
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".
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".
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.
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.
Developers should be able to open the solution and just run any of the test-sites in the project, or use dotnet run.
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\build.ps1
- SeoVisualizer.Core
- SeoVisualizer