3 posts categorized " Search Engine Optimization"

11/19/2018

Introducing the Wild Apricot Text Manager

Wild Apricot Text Manager logo
Wild Apricot Text Manager

 Wild Apricot allows any content gadgets to be edited by a website administrator. When placing your cursor over a content gadget you can see the option to edit, like below:

Content editor

However, many gadgets in the System Pages are marked as (System) and do not allow editing whatsoever:

System gadget

Now it is possible to change the text on form labels and buttons inside these System gadgets. You can also publish Wild Apricot websites in 2 languages!

The Wild Apricot Text Manager (WATM) is a simple to configure JavaScript library that levers the jQuery library already included with every Wild Apricot website. WATM will help any administrator manage and replace nearly every piece of system text in Wild Apricot. You can also use it to change CSS for any class or ID. WATM can be used optionally to enable 2 language Wild Apricot websites without needing to create any additional site pages or page templates. A list of replaceable elements is included in the easy-to-edit Excel configuration file. You can make a variety of changes such as global search and replace, modifying form labels and buttons, changing CSS properties on any class or ID and hiding certain labels or buttons altogether.

The configuration for the Wild Apricot Text manager is made inside a comma separated configuration file which can be edited in Microsoft Excel or another text editor. To activate WATM, a few lines need to be added to Wild Apricot’s Global Javascript. You will also need  to edit and upload  the WATM configuration file which includes the text edits and translations. The full WATM package is added to your site using Wild Apricot’s website Files manager.

Support for WATM is available by getting in touch.

 Download Wild Apricot Text Manager

 

Version History

0.1 - Initial Release 11/19/18

0.2 - Added support for many more system flags, added French translation into CSV configuration file, changed testing button toggle label 11/27/18

0.3 - Added support for adding a style, added several more system labels, added support for limiting the language toggle display "flicker" 12/5/18

0.4 - Added support for effective primary menu design changes, added support to override any CSS class or ID 12/13/18

05/04/2017

Making Articles on TypePad Social Media Ready with Open Graph

An alert reader of the NewPath Consulting newsletter recently shared one of our articles on LinkedIn and noticed something interesting. When you share on social media platforms like Facebook, Twitter or LinkedIn, extra information about your post should be displayed as you begin to share an article. Unfortunately because we are using Advanced Templates on TypePad, we did not have any of the <META> tags coded to support Open Graph, the standard coding mechanism used to render the rich media previews and search engine optimization.

The TypePad Knowledgebase has a short article on implementing Open Graph, but we went one step further and created a code snippet that can be used to create the necessary markup for both pages and posts.

image from www.brightedge.com

Below is the code you can insert into your custom Header template or include to support a variety of meta data. These tags will cover most social media platforms. Note that we are using a tag called MTIfNonEmpty to evaluate whether an article has an excerpt loaded. Since TypePad can autogenerate excerpts, using this tag effectively lets us evaluate whether we are adding these tags to a page or post. This conditional trickery lets us use the same piece of code on ALL of our pages and posts of the website.


<!-- Schema.org markup for Google+ -->


<MTIfNonEmpty tag="MTEntryExcerpt"> <!-- if there is an exceprt, this is a blog post or category archive -->


<meta itemprop="name" content="<$MTArchiveTitle remove_html="1"$>">
<meta itemprop="description" content="<$MTEntryExcerpt$>">

 

<!-- evaluate if there is an image in the post, the first image is used if there is -- the spec enables automatic resizing of pictures -->
<! -- see http://help.typepad.com/image-tech-specs.html for more details on image specs and resizing -->


<MTEntryPhoto>
<meta itemprop="image" content="<$MTEntryPhotoURL spec="640pi"$>">
</MTEntryPhoto>


<MTElse> <!-- no excerpt, so this is a page -->


<meta itemprop="name" content="<$MTPostPageTitle remove_html="1"$> - <$MTBlogName$>">
<meta itemprop="image" content="<$MTBlogURL$>images/logo.png">

</MTElse>

</MTIfNonEmpty>

<!-- Twitter Card meta data -->
<!-- these tags are shared by both posts and pages -->

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@twitter_handle_goes_here">
<meta name="twitter:site" content="@twitter_handle_goes_here">
<meta name="twitter:url" content="<$MTEntryPermalink>">

<MTIfNonEmpty tag="MTEntryExcerpt"> <!-- check if there is an exceprt, a blog post -->

<!-- NOTE: Twitter description must be less than 200 characters -->


<meta name="twitter:description" content="<$MTEntryExcerpt$>">
<meta name="twitter:title" content="<$MTPostPageTitle remove_html="1"$>">

<!-- Twitter summary card with large image must be at least 280x150px -->
<MTEntryPhoto>
<meta name="twitter:image" content="<$MTEntryPhotoURL spec="640pi"$>">
</MTEntryPhoto>

<MTElse> <!-- no excerpt, so this is a page -->

<meta name="twitter:description" content="<$MTPostPageTitle remove_html="1"$> - <$MTBlogName$>">
<meta name="twitter:title" content="<$MTPostPageTitle remove_html="1"$> - <$MTBlogName$>">

<!-- we are using a standard image here as s placeholder as MTEntryPhoto only works for posts -->


<meta name="twitter:image" content="<$MTBlogURL$>images/logo.png">

</MTElse>

</MTIfNonEmpty>


<!-- Open Graph data -->

<MTIfNonEmpty tag="MTEntryExcerpt"> <!-- this is a blog post -->

<meta property="og:title" content="<$MTPostPageTitle remove_html="1"$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$MTEntryPermalink>" />


<MTEntryPhoto>
<meta property="og:image" content="<$MTEntryPhotoURL spec="640pi"$>" />
</MTEntryPhoto>

<meta property="og:description" content="<$MTEntryExcerpt$>" />

<meta property="og:site_name" content="<$MTBlogName$>" />

<!-- the format string converts internal date/time into the right format for OpenGraph DateTime type -->

<meta property="article:published_time" content="<$MTEntryDate format="%Y-%m-%dT%H:%M:%S-05:00"$>" />
<meta property="article:modified_time" content="<$MTEntryDateModified format="%Y-%m-%dT%H:%M:%S-05:00"$>" />

<!-- this code iterates over all the categories attached to a post and creates a nice category list -->

<meta property="article:section" content="<MTEntryIfCategories><MTEntryCategories glue=", "><MTBlogIfArchives archive_type="Category"><$MTCategoryLabel$><MTElse><$MTCategoryLabel$</MTElse></MTBlogIfArchives></MTEntryCategories></MTEntryIfCategories>" />


<meta property="article:tag" content="blog" />

<MTElse> <!-- this is a page or category archive -->


<meta property="og:site_name" content="<$MTPostPageTitle remove_html="1"$> - <$MTBlogName$>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<$MTBlogURL$>" />
<meta property="og:image" content="<$MTBlogURL$>images/logo.png" />
<meta property="article:published_time" content="<$MTUserStartDate format="%Y-%m-%dT%H:%M:%S-05:00"$>" />
<meta property="article:modified_time" content="<$MTUserStartDate format="%Y-%m-%dT%H:%M:%S-05:00"$>" />
<meta property="article:tag" content="website" />
</MTElse>

</MTIfNonEmpty>

10/05/2016

Installing SSL Security on Your Website

Starting in 2017, you will be hearing a lot about securing your website with something known as SSL. SSL (Secure Sockets Layer) is the standard security technology for establishing an encrypted link between a web server and a browser. This link ensures that all data passed between the web server and browsers remain private and integral.

So for example when you type your credit card into a form you want that information to be passed securely without anyone being able to snoop while it is in transit. That is what SSL does. A visitor to a web page knows a website is secure when they see a little lock somewhere near the address bar:

image from www.geek.com

If you manage a website, how do you obtain the necessary SSL certificate required? That's the question many will be asking, and there is a lot of confusion around this topic, unfortunately. In the past, SSL certificates were sold for anywhere between $20 and $100 and had to be renewed, like domain names, every year. This is presently still the case, but we think SSL prices will go down dramatically as more website owners start to purchase and install them. Obtaining an SSL certificate can be a complex exercise but many domain name registrars like GoDaddy and 1and1.com are making the process much easier and less expensive. Starter SSL certificates are now available for free from LetsEncrypt.org and from many hosts.

Zerossl.com is one such authority that can generate a free, domain-validated (ie DV) certificate using the Let's Encrypt system. Domain Validated certificates only need to confirm your ownership of the domain name. The confirmation process is very simple and there are two options to choose from: DNS verficiation and HTTP verification. The former requires creating a specific DNS record of TXT type for the domain. The latter requires creating a plain text file with a specific content on your web server. Note that the text file that you need to install does not have an extension and some hosts prevent files without extensions as a security measure. This may change in the future. Choose the option you are most comfortable with - normally all registrars provide a way to edit DNS records, but you might like creating a text file better. DNS verification also might take a bit longer depending on how quickly your registrar's servers publish the changes (usually within 15-20 minutes), while HTTP verification can be instant.

We have a Business Package from 1and1.com and recently were offered a free SSL Starter certificate that we enabled for www.newpathnetwork.org. The process was quite painless as it is essentially a one click install and creates a domain validated SSL certificate. We had to spend about an hour eliminating references to non-secure code in our website to ensure full security was activated.

Finally we had to create an .htaccess file to ensure non HTTP requests (non-SSL) redirected automatically to the secure version of the site. This also makes sure when Google searches bring up your site you will be found online. We are sharing our .htaccess file stored in the root directory of our Linux-powered shared hosting environment over at 1and1.com. If you are running WordPress, SSL installation may be even simpler with your host.

Step 1. Create or edit a file called .htaccess in the root of your website.

Step 2. Add these lines (or edit if they already exist)

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.yourdomain\.com$ [NC]
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [R=301,L]

Step 3. Save the file. You can upload via SFTP or use your favourite shell editor to edit the file.

Step 4. Test your website to make sure the SSL secure site is loading. Click the lock or the little circle with an i in it to check security details.

Essentially these commands take an inbound request for www.yourdomain.com or yourdomain.com and redirect the visitor to the https://www.yourdomain.com equivalent. Any URL will automatically redirect to the correct new, shiny and secure URL.

NOTE: Adding SSL security to your site does not mean that you don't have to maintain the integrity of the software that runs the site. If you have a host that does the updates and maintenance, then great! But if you are worried about hackers getting into your website, get in touch with us. We can tell you more about how we can help you maintain security on your WordPress-powered website. We include SSL certificate installation with our Silver and Gold plans!